高德地图学习--反遮罩层--只显示特定区域，其余遮罩

最新推荐文章于 2023-08-02 18:41:20 发布

pikaqiu_komorebi

最新推荐文章于 2023-08-02 18:41:20 发布

阅读量1.5k

点赞数 1

分类专栏：高德地图文章标签：学习前端

本文链接：https://blog.csdn.net/pikaqiu_komorebi/article/details/126707280

版权

高德地图专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.获取对应城市的坐标点

AMap.Geocoder的getLocation方法用于实现正向地理编码，例如获得某个城市或者城市的区域的坐标位置

2.绘制地图，再获取城市的区域范围

行政区查询服务（AMap.DistrictSearch）提供行政区信息的查询，使用该服务可以获取到行政区域的区号、城市编码、中心点、边界、下辖区域等详细信息，为基于行政区域的地图功能提供支持。

3.绘制轮廓线 polygon

一个正方形outer+区域轮廓线holes

            var geocoder = new AMap.Geocoder({})
            var address = that.userInfo.adder

            geocoder.getLocation(address, function (status, result) {
              if (status === 'complete' && result.geocodes.length) {
                that.centerLng = result.geocodes[0].location.lng
                that.centerLat = result.geocodes[0].location.lat
                console.log(that.centerLat)
                let map = new AMap.Map('container', {
                  zoom: 10, //级别
                  center: [that.centerLng, that.centerLat], //中心点坐标
                  // center: [116.329519, 39.972134], //中心点坐标
                  // center: [that.lnglat], //中心点坐标
                  // viewMode: '3D', //使用3D视图
                  showIndoorMap: false,
                  viewMode: '3D',
                  resizeEnable: true // 调整任意窗口的大小，自适应窗口
                })
                that.map = map
                new AMap.DistrictSearch({
                  extensions: 'all', // 返回边界坐标点
                  subdistrict: 0 // 显示下级行政区级数（行政区级别包括：国家、省/直辖市、市、区/县4个级别），商圈为区/县下一级  可选值：0、1、2、3
                }).search(that.userInfo.adcode, function (status, result) {
                  // 外多边形坐标数组和内多边形坐标数组
                  var outer = [
                    new AMap.LngLat(-360, 90, true),
                    new AMap.LngLat(-360, -90, true),
                    new AMap.LngLat(360, -90, true),
                    new AMap.LngLat(360, 90, true)
                  ]
                  var holes = result.districtList[0].boundaries
                  // console.log('holes', result.districtList[0].boundaries)
                  var pathArray = [outer]
                  pathArray.push.apply(pathArray, holes)
                  // console.log('pathArray', pathArray)
                  var polygon = new AMap.Polygon({
                    path: pathArray,
                    strokeColor: '#00eeff',
                    strokeWeight: 1, // 线宽
                    fillColor: '#71B3ff',
                    fillOpacity: 0.5
                  })
                  polygon.setPath(pathArray) // 多边形轮廓线的节点坐标数组。
                  that.map.add(polygon) // 添加覆盖物/图层
                })
              } else {
                alert('error')
              }