高德地图通过行政区划名称获取边界线数据绘制多边形面展示

最新推荐文章于 2024-04-26 18:20:06 发布

月照一江秋水

最新推荐文章于 2024-04-26 18:20:06 发布

阅读量584

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_41206597/article/details/134134102

版权

    // 绘制行政区划（子区划）
    // 区划编码（adcode），区域节点（AreaNode）
    drawAreaNode(areaName) {
      let that = this;
      const { map } = this;
      if (this.polygons.length >= 1) {
        map.remove(this.polygons);
      }
      if (this.areaMarker.length >= 1) {
        map.remove(this.areaMarker)
      }
      this.polygons = [];
      AMap.plugin('AMap.DistrictSearch', () => {
        // 利用行政区查询获取边界构建mask路径
        // 也可以直接通过经纬度构建mask路径
        let opts = {
          subdistrict: 0,
          extensions: 'all',
          level: 'city'
        };
        let district = new AMap.DistrictSearch(opts);
        district.search(areaName, function(status, result) {
          // 这里包含行政区的边界线和名称中心点等信息
          let bounds = result.districtList[0].boundaries;
          for (let i = 0; i < bounds.length; i += 1) {
            let polygon = new AMap.Polygon({
                map: map,
                strokeWeight: 10,
                strokeColor: 'rgba(0, 255, 250, 0.5000)',
                strokeOpacity: 0.5,
                fillColor: 'rgba(0, 255, 250, 0.5000)',
                fillOpacity: 0.2,
                path: bounds[i]
            });
            that.polygons.push(polygon);

            let marker = new AMap.Marker({
                map: map,
                content: 
                `
                  <div class="area-bg">
                    ${areaName}
                  </div>
                `,
                position: result.districtList[0].center,
                offset: new AMap.Pixel(-188, -270)
            });
            that.areaMarker.push(marker);
          }
          map.setFitView();// 地图自适应
        });
      });
    },