1. 新增绘图模式的切换 2. 新增行政区划的切换展示

riku

2025-03-12 42f42dc88214f283b43c422f37e10ab45c5c5578

 src/utils/map/toolbox.js

@@ -1,9 +1,19 @@
/* eslint-disable no-undef */
import { map, satellite } from './index_old';
import { watch } from 'vue';
import { map, satellite, onMapMounted } from './index_old';
import { useToolboxStore } from '@/stores/toolbox';
import { DialogUtil } from '@/utils/map/dialog';

const toolboxStore = useToolboxStore();
watch(
  () => toolboxStore.selectedDistrict,
  (nV, oV) => {
    if (nV != oV && toolboxStore.districtStatus) {
      if (activeDistrict) map.remove(activeDistrict);
      drawDistrict(toolboxStore.selectedDistrict);
    }
  }
);

/**
 * 坐标拾取鼠标点击回调事件
@@ -38,8 +48,66 @@
  }
}

let districtPolygonMap = new Map();
let activeDistrict = undefined;
// 绘制区县边界
function drawDistrict(districtName, isNew) {
  onMapMounted(() => {
    if (!isNew && districtPolygonMap.has(districtName)) {
      const districtPolygon = districtPolygonMap.get(districtName);
      map.remove(districtPolygon);
      map.add(districtPolygon);
      activeDistrict = districtPolygon;
    } else {
      // eslint-disable-next-line no-undef
      var district = new AMap.DistrictSearch({
        extensions: 'all', //返回行政区边界坐标等具体信息
        level: 'district' //设置查询行政区级别为区
      });
      district.search(districtName, function (status, result) {
        var bounds = result.districtList[0].boundaries; //获取朝阳区的边界信息
        if (bounds) {
          for (var i = 0; i < bounds.length; i++) {
            //生成行政区划 polygon
            // eslint-disable-next-line no-undef
            const districtPolygon = new AMap.Polygon({
              map: map, //显示该覆盖物的地图对象
              strokeWeight: 1, //轮廓线宽度
              path: bounds[i], //多边形轮廓线的节点坐标数组
              fillOpacity: 0.6, //多边形填充透明度
              // fillColor: '#CCF3FF', //多边形填充颜色
              fillColor: '#0077ff',
              // strokeColor: '#ffffff' //线条颜色
              strokeColor: 'white', //线条颜色
              zIndex: 9
            });

            districtPolygonMap.set(districtName, districtPolygon);
            activeDistrict = districtPolygon;
          }
          // map.setFitView(); //将覆盖物调整到合适视野
        }
      });
    }
  });
}

export default {
  /**
   * 开关行政区划
   * @param {boolean} value
   */
  toggleDistrict(value) {
    if (value) {
      if (toolboxStore.selectedDistrict)
        drawDistrict(toolboxStore.selectedDistrict);
    } else {
      if (activeDistrict) map.remove(activeDistrict);
    }
    toolboxStore.districtStatus = value;
  },

  /**
   * 开关地物标注
   * @param {boolean} value
   */