gis：高德开放平台的基本使用(高德地图)小计章节3

news2024/9/24 13:24:13

上一章节说到使用行政区域查询做区域掩膜会有刷新不显示地图问题，这章咱们来解决一下。

关于这个问题，很多博主说是以script异步引入方式，生命周期，本地缓存，监听刷新等方式，但是很多是不生效的。并且vue项目我们采用的是npm安装的高德地图，如果你直接套用script异步引用会报错。这里我使用的是高德开放平台提供的官方写法。

1、思路：这里不在单纯的使用行政区域查询来实现。而是通过行政区域查询+设置指定数据图层（这里使用的是高德的标准图层，可依据需求更改），说白了区域掩膜就是展示指定的数据图层！图层！图层！重要的事情说三遍。注意这句话你明白了，数据掩膜就会了。接下来直接看代码（改动很少，放心啦）

<script setup>
import { onMounted, onUnmounted } from "vue";
// 引入 JS API  Loader
import AMapLoader from "@amap/amap-jsapi-loader";

function hefeiMap() {
  window._AMapSecurityConfig = {
    // 「你申请的安全密钥」
    securityJsCode: "你申请的安全密钥",
  };
  AMapLoader.load({
    key: "开发者Key", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.DistrictSearch"], //需要使用的的插件列表，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      //创建mask空数组用来接收查询回来的指定区域数据
      let mask = [];
      //引入插件，此示例采用异步引入，更多引入方式 https://lbs.amap.com/api/javascript-api-v2/guide/abc/plugins
      AMap.plugin("AMap.DistrictSearch", function () {
        var district = new AMap.DistrictSearch({
          subdistrict: 0,
          extensions: "all", //返回行政区边界坐标等具体信息
          level: "city", //设置查询行政区级别为市
        });
        district.search("合肥市", function (status, result) {
          var bounds = result.districtList[0].boundaries; //获取合肥市的边界信息
          if (bounds) {
            for (var i = 0; i < bounds.length; i++) {
              //存储获取到的所有指定区域的数据
              mask.push([bounds[i]]);
              //生成行政区划 polygon
              var polygon = new AMap.Polygon({
                map: map, //显示该覆盖物的地图对象
                strokeWeight: 1, //轮廓线宽度
                path: bounds[i], //多边形轮廓线的节点坐标数组
                fillOpacity: 0.2, //多边形填充透明度
                fillColor: "#CCF3FF", //多边形填充颜色
                strokeColor: "#CC66CC", //线条颜色
              });
            }
            // map.setFitView(); //将覆盖物调整到合适视野
          }
          var map = new AMap.Map("container", {
            mask: mask,
            mapStyle: "amap://styles/normal", //设置地图的显示样式
            viewMode: "3D",
            zoomEnable: true, // 是否可以缩放地图
            zoom: 10, // 设置当前显示级别
            zooms: [7, 15], //最小显示级别为7，最大显示级别为20
            layers: [
              AMap.createDefaultLayer(), //高德默认标准图层
            ],
          });
          //添加描边
          for (var i = 0; i < bounds.length; i += 1) {
            new AMap.Polyline({
              path: bounds[i],
              strokeColor: "pink",
              strokeWeight: 4,
              map: map,
            });
          }
          map.setFitView(); //将覆盖物调整到合适视野
        });
      });
    })
    .catch((e) => {
      console.log(e);
    });
}

onMounted(() => {
  hefeiMap();
});

onUnmounted(() => {
  // 销毁地图组件
  map?.destroy();
});
</script>
<template>
  <!-- 创建地图容器 -->
  <div id="container"></div>
</template>

<style scoped>
/* 地图容器样式 */
#container {
  width: 100%;
  height: 100%;
}
</style>

2、效果图：（此时无论你怎么点击刷新都是没问题的）