2026.3.20

feiyu02

2026-03-20 20cdb83586daabfb15fc056c4c97eb8e7ccaf928

 src/utils/map/districtsearch.js

@@ -1,26 +1,70 @@
import { map, AMap, onMapMounted } from './index';
import { map, AMap, onMapMounted } from './index'

// 行政区划缓存
var districtPolygonMap = new Map();
var districtPolygonMap = new Map()
// 当前显示的区县
var activeDistrict = undefined;
var activeDistrict = undefined
export default {
  // 绘制区县边界
  drawDistrict(districtName, isNew) {
    if(!districtName) return;
  drawDistrictMask(districtName, isNew) {
    if (!districtName) return
    onMapMounted(() => {
      if (!isNew && districtPolygonMap.has(districtName)) {
        const districtPolygon = districtPolygonMap.get(districtName);
        map.add(districtPolygon);
        map.setFitView(districtPolygon);
        activeDistrict = districtPolygon;
        const { polygon, mask } = districtPolygonMap.get(districtName)
        map.add(polygon)
        map.setFitView(polygon)
        map.setMask(mask)
        activeDistrict = polygon
      } else {
        var district = new AMap.DistrictSearch({
          extensions: 'all', //返回行政区边界坐标等具体信息
          level: 'district' //设置查询行政区级别为区
        });
          level: 'district', //设置查询行政区级别为区
        })
        district.search(districtName, function (status, result) {
          var bounds = result.districtList[0].boundaries; //获取边界信息
          if (status === 'complete') {
            var bounds = result.districtList[0].boundaries //获取边界信息
            var mask = []
            var polygon = []
            for (var i = 0; i < bounds.length; i++) {
              mask.push([bounds[i]])

              //生成行政区划 polygon
              const districtPolygon = new AMap.Polygon({
                map: map, //显示该覆盖物的地图对象
                strokeWeight: 2, //轮廓线宽度
                path: bounds[i], //多边形轮廓线的节点坐标数组
                fillOpacity: 0, //多边形填充透明度
                fillColor: '#0077ff',
                strokeColor: '#99ffff', //线条颜色
              })

              polygon.push(districtPolygon)
            }
            activeDistrict = polygon
            districtPolygonMap.set(districtName, { polygon, mask })
            map.setFitView(polygon, true)
            map.setMask(mask)
          }
        })
      }
    })
  },
  // 绘制区县边界
  drawDistrict(districtName, isNew) {
    if (!districtName) return
    onMapMounted(() => {
      if (!isNew && districtPolygonMap.has(districtName)) {
        const districtPolygon = districtPolygonMap.get(districtName)
        map.add(districtPolygon)
        map.setFitView(districtPolygon)
        activeDistrict = districtPolygon
      } else {
        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
@@ -30,24 +74,47 @@
                path: bounds[i], //多边形轮廓线的节点坐标数组
                fillOpacity: 0.4, //多边形填充透明度
                fillColor: '#0077ff',
                strokeColor: '#CC66CC' //线条颜色
              });
                strokeColor: '#CC66CC', //线条颜色
              })

              districtPolygonMap.set(districtName, districtPolygon);
              activeDistrict = districtPolygon;
              map.setFitView(districtPolygon, true);
              districtPolygonMap.set(districtName, districtPolygon)
              activeDistrict = districtPolygon
              map.setFitView(districtPolygon, true)
            }
          }
        });
        })
      }
    });
    })
  },
  removeDistrict() {
    onMapMounted(() => {
      if (activeDistrict) {
        map.remove(activeDistrict);
        activeDistrict = undefined;
        map.remove(activeDistrict)
        activeDistrict = undefined
      }
    })
  }
};
  },
  districtLayer(districtName) {
    onMapMounted(() => {
      //2、创建省市简易行政区图层
      var distProvince = new AMap.DistrictLayer.Province({
        zIndex: 10, //设置图层层级
        zooms: [2, 15], //设置图层显示范围
        adcode: districtName, //设置行政区 adcode
        depth: 2, //设置数据显示层级，0：显示国家面，1：显示省级，当国家为中国时设置depth为2的可以显示市一级
      })
      // 3、设置行政区图层样式
      distProvince.setStyles({
        'stroke-width': 2, //描边线宽
        fill: function (data) {
          //设置区域填充颜色，可根据回调信息返回区域信息设置不同填充色
          //回调返回区域信息数据，字段包括 SOC(国家代码)、NAME_ENG(英文名称)、NAME_CHN(中文名称)等
          //国家代码名称说明参考 https://a.amap.com/jsapi_demos/static/demo-center/js/soc-list.json
          return '#ffffffe7'
        },
      })
      //4、将简易行政区图层添加到地图
      map.add(distProvince)
    })
  },
}