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

riku

2025-03-12 42f42dc88214f283b43c422f37e10ab45c5c5578

 src/utils/map/toolbox.js

@@ -1,28 +1,174 @@
/* 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);
    }
  }
);

/**
 * 坐标拾取鼠标点击回调事件
 */
var _locationMarker, _locationText;
function _coorPickListener(e) {
  var text = `经度: ${e.lnglat.getLng()}<br/>纬度: ${e.lnglat.getLat()}`;
  if (_locationMarker == undefined) {
    var textM = new AMap.Text({
      style: {
        'font-size': '12px'
      },
      text: text,
      position: e.lnglat,
      offset: new AMap.Pixel(0, 30)
    });

    var marker = new AMap.Marker({
      position: e.lnglat
      // icon: icon,
      // anchor: 'top-center',
      // content: '<i class="fa fa-map-marker fa-2x" style="color: #E6DB06;" aria-hidden="true"></i>'
    });
    map.add(marker);
    map.add(textM);
    _locationMarker = marker;
    _locationText = textM;
  } else {
    _locationMarker.setPosition(e.lnglat);
    _locationText.setPosition(e.lnglat);
    _locationText.setText(text);
  }
}

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']);
  toggleFeatures(value) {
    value
      ? map.setFeatures(['bg', 'road', 'point', 'building'])
      : map.setFeatures(['bg', 'road']);
    toolboxStore.featuresStatus = value;
  },

  /**
   * 开关卫星地图
   * @param {boolean} value
   */
  toggleSatellite: (value) => {
  toggleSatellite(value) {
    value ? satellite.show() : satellite.hide();
    toolboxStore.satelliteStatus = value;
  },

  /**
   * 开关控制罗盘
   * @param {boolean} value
   */
  toggleControlbar: (value) => {
  toggleControlbar(value) {
    // value ? controlbar.show() : controlbar.hide();
    value ? $('.amap-controlbar').show() : $('.amap-controlbar').hide();
    toolboxStore.controlbarStatus = value;
  },

  /**
   * 开关坐标拾取
   * @param {boolean} value
   */
  toggleCoorPicking(value) {
    if (value) {
      map.on('click', _coorPickListener);
    } else {
      map.off('click', _coorPickListener);
      map.remove([_locationMarker, _locationText]);
      _locationMarker = undefined;
      _locationText = undefined;
    }
    toolboxStore.coorPickStatus = value;
  },

  /**
   * 开关数据弹框
   */
  toggleDataDialogStatus(value) {
    toolboxStore.dataDialogStatus = value;
    if (value) {
      DialogUtil.openWindow();
    } else {
      DialogUtil.closeWindow();
    }
  },

  /**
   * 开关溯源清单
   */
  toggleSceneSearch(value) {
    toolboxStore.sceneSearchStatus = value;
  }
};