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

1、需求：仅展示某一区域的地图，如中国地图或省份地图等。

2、首先引入高德地图，引入方法可看我的上一篇博客。（此时引入的是全球地图，并不满足需求）

3、这时候就需要使用高德开放平台的行政区查询插件了。

4、引入插件AMap.plugin（写在AMapLoader.load的.then方法中）

AMapLoader.load({
    key: "key的值", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale", "AMap.DistrictSearch"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
        const  mask = [];
      //引入插件，此示例采用异步引入，更多引入方式 https://lbs.amap.com/api/javascript-api-v2/guide/abc/plugins
      AMap.plugin("AMap.DistrictSearch", function () {
        
    })
    .catch((e) => {
      console.log(e);
    });

5、绘制行政区划边界（此时也只是在全球地图中绘制了合肥市的行政区域，其他非合肥市区域依旧可以看见，还需接着处理）。

//引入插件，此示例采用异步引入，更多引入方式 https://lbs.amap.com/api/javascript-api-v2/guide/abc/plugins
      AMap.plugin("AMap.DistrictSearch", function () {
        var district = new AMap.DistrictSearch({
          extensions: "all", //返回行政区边界坐标等具体信息
          level: "district", //设置查询行政区级别为区
        });
        district.search("合肥市", function (status, result) {
          var bounds = result.districtList[0].boundaries; //获取合肥市的边界信息
          if (bounds) {
            for (var i = 0; i < bounds.length; i++) {
              //生成行政区划 polygon
              var polygon = new AMap.Polygon({
                map: map, //显示该覆盖物的地图对象
                strokeWeight: 1, //轮廓线宽度
                path: bounds[i], //多边形轮廓线的节点坐标数组
                fillOpacity: 0.2, //多边形填充透明度
                fillColor: "#CCF3FF", //多边形填充颜色
                strokeColor: "#CC66CC", //线条颜色
              });
            }
            map.setFitView(); //将覆盖物调整到合适视野
          }
        });
      });

6、配置地图属性及显示区域数据。

  AMapLoader.load({
    key: "key的值", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale", "AMap.DistrictSearch"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
        //创建mask空数组用来接收查询回来的指定区域数据
        const  mask = [];
      //引入插件，此示例采用异步引入，更多引入方式 https://lbs.amap.com/api/javascript-api-v2/guide/abc/plugins
      AMap.plugin("AMap.DistrictSearch", function () {
        var district = new AMap.DistrictSearch({
          extensions: "all", //返回行政区边界坐标等具体信息
          level: "district", //设置查询行政区级别为区
        });
        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: mask,
        mapStyle: "amap://styles/normal", //设置地图的显示样式
        zoom: 10, // 设置当前显示级别
        expandZoomRange: true, // 开启显示范围设置
        zooms: [7, 20], //最小显示级别为7，最大显示级别为20
        viewMode: "3D", // 特别注意,设置为3D则其他地区不显示
        zoomEnable: true, // 是否可以缩放地图
      });
    })
    .catch((e) => {
      console.log(e);
    });

7、此时，一个只有合肥市的地图就写好了，效果图如下：

8、但此时还有个问题，一旦刷新之后，地图就不显示了。这个问题下章更新