riku
2025-09-11 307b17ef15c73a071912a262834f2a5f68e1fa87
src/utils/map/toolbox.js
@@ -1,6 +1,19 @@
/* eslint-disable no-undef */
import { map, satellite, controlbar } from './index_old';
// import '@/lib/jquery-3.5.1.min';
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);
    }
  }
);
/**
 * 坐标拾取鼠标点击回调事件
@@ -35,13 +48,74 @@
  }
}
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
   */
  toggleFeatures(value) {
    value ? map.setFeatures(['bg', 'road', 'point', 'building']) : map.setFeatures(['bg', 'road']);
    value
      ? map.setFeatures(['bg', 'road', 'point', 'building'])
      : map.setFeatures(['bg', 'road']);
    toolboxStore.featuresStatus = value;
  },
  /**
@@ -50,6 +124,7 @@
   */
  toggleSatellite(value) {
    value ? satellite.show() : satellite.hide();
    toolboxStore.satelliteStatus = value;
  },
  /**
@@ -59,6 +134,7 @@
  toggleControlbar(value) {
    // value ? controlbar.show() : controlbar.hide();
    value ? $('.amap-controlbar').show() : $('.amap-controlbar').hide();
    toolboxStore.controlbarStatus = value;
  },
  /**
@@ -74,5 +150,25 @@
      _locationMarker = undefined;
      _locationText = undefined;
    }
    toolboxStore.coorPickStatus = value;
  },
  /**
   * 开关数据弹框
   */
  toggleDataDialogStatus(value) {
    toolboxStore.dataDialogStatus = value;
    if (value) {
      DialogUtil.openWindow();
    } else {
      DialogUtil.closeWindow();
    }
  },
  /**
   * 开关溯源清单
   */
  toggleSceneSearch(value) {
    toolboxStore.sceneSearchStatus = value;
  }
};