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>
      <button @click.stop="onSavePointList">保存地址</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, onMounted, getCurrentInstance } from 'vue'
import { getMapCoder } from '@/api/map'
import { updateDept } from '@/api/system/dept'
import { useRoute } from 'vue-router'
const { proxy } = getCurrentInstance()
const route = useRoute()
const deptForm = ref({})
onMounted(() => {
  const row = localStorage.getItem('mapDeptRow')
  if (row) {
    deptForm.value = JSON.parse(row)
  }
})
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 latestPointList = ref([])
const onToggleMode = () => {
  mode.value = mode.value === 'draw' ? 'edit' : 'draw'
}

const onSelect = (e) => {
  console.log('select', e)
}
const onDrowComplet = (geomeytry) => {
  // 兼容 geomeytry 里可能的 paths 字段
  const pointList = geomeytry.paths || geomeytry.pointList || [];
  latestPointList.value = pointList;
  console.log({ pointList }, '这是地址获取到的数据');
}
const onAdjustComplete = (geomeytry) => {
  // 兼容 geomeytry 里可能的 paths 字段
  const pointList = geomeytry.paths || geomeytry.pointList || [];
  latestPointList.value = pointList;
  console.log({ pointList }, '这是地址获取到的数据');
}
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())
}
function onSavePointList() {
  if (!latestPointList.value.length) {
    proxy.$modal.msgError('请先绘制或调整图形');
    return;
  }
  // 合并所有部门字段和 pointList
  const payload = {
    ...deptForm.value,
    pointList: JSON.stringify(latestPointList.value)
  }
  updateDept(payload).then((response) => {
    if (response.code === 200) {
      proxy.$modal.msgSuccess('地址保存成功');
      open.value = false;
      getList();
    } else {
      proxy.$modal.msgError(response.msg || '地址保存失败');
    }
  })
}
</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>