leromro-web/src/views/system/dept/mapSetting.vue

<template>
    <tlbs-map ref="mapRef" api-key="KFEBZ-P2GKZ-A5PX4-7Q6Y7-KXOBF-XCB4C" :center="center" :zoom="zoom"
        :control="control" @click="handleClick" @map_inited="onMapInited">
        <div style="position: absolute;top: 0;left: 0;z-index: 2000;">
            <button @click.stop="mode = 'draw'">
                设置绘制模式
            </button>
            <button @click.stop="mode = 'edit'">
                设置编辑模式
            </button>
            <button @click.stop="activeId = 'polygon'">
                设置画多边形
            </button>
            <button @click.stop="activeId = 'circle'">
                设置画圆形
            </button>
            <button @click.stop="getOverlayList">
                获取图层列表
            </button>
            <button @click.stop="onSelectGeometry">
                选中图形
            </button>
            <button @click.stop="onGetSelectedList">
                获取选中集合图形
            </button>
            <button @click.stop="onClear">
                清空选中
            </button>
        </div>
        <!--vue2使用:active-overlay-id.sync="activeId" -->
        <tlbs-geometry-editor ref="editorRef" v-model:active-overlay-id="activeId" :action-mode="mode"
            polygon-id="polygon" :default-polygon-geometries="geometries" :polygon-styles="styles" selectable
            @select="onSelect" @draw_complete="onDrowComplet" @adjust_complete="onAdjustComplete"
            @draw_error="onDrawError" />
    </tlbs-map>
</template>
<script setup>
import { ref, watch } from 'vue';
import { onMounted } from 'vue';
import { getMapCoder } from '@/api/map';
const paths = [
    { lat: 40.041117253378246, lng: 116.2722415837743 },
    { lat: 40.03942536171407, lng: 116.2726277820093 },
    { lat: 40.03970460886076, lng: 116.27483769345417 },
    { lat: 40.041404706498625, lng: 116.27443003983899 },
];
const mapRef = ref(null);
const center = ref({ lat: 40.040452, lng: 116.273486 });
const zoom = ref(17);
const editorRef = ref(null);
const mode = ref('edit');
const activeId = ref('polygon');
const onToggleMode = () => {
    mode.value = mode.value === 'draw' ? 'edit' : 'draw';
};

const onSelect = (e) => {
    console.log('select', e);
};
const onDrowComplet = (geomeytry) => {
    console.log(geomeytry);
};
const onAdjustComplete = (geomeytry) => {
    console.log(geomeytry);
};
const onDrawError = (e) => {
    console.log(e);
};

const getOverlayList = () => {
    console.log(editorRef.value.editor.getOverlayList());
};

const onMapInited = () => {
    // 地图加载完成后，可以获取地图实例，调用地图实例方法
    console.log(mapRef.value.map);
};

const control = {
    scale: {},
    zoom: {
        position: 'topRight',
    },
}
const geometries = [
    {
        id: 'firstPolygon',
        styleId: 'polygon', // 样式id
        paths, // 多边形的位置信息
        properties: {
            // 多边形的属性数据
            title: 'polygon',
        },
    },
]

const styles = {
    polygon: {
        color: '#3777FF', // 面填充色
        showBorder: false, // 是否显示拔起面的边线
        borderColor: '#00FFFF', // 边线颜色
    },
}

function handleClick(e) {
    console.log(e);
}
function onClear() {
    editorRef.value.editor.select([]);
}
function onSelectGeometry() {
    editorRef.value.editor.select(['firstPolygon']);
}
function onGetSelectedList() {
    console.log(editorRef.value.editor.getSelectedList());
}
</script>

<style>
.map-container {
    width: 100%;
    height: 100%;
}
</style>
<style scoped>
.control-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
}

button {
    padding: 4px;
    background-color: #fff;
    margin-right: 5px;
    border: 1px solid #ddd;
}
</style>