1.因为高德地图只能定义到市级,我只需要某个地方的区域掩膜。,高德给的api听清楚的

自定义的mask里面的数组是我自己用地图吸取一个一个点的,暂时我还没有好的解决办法   拾取链接 https://lbs.amap.com/console/show/picker

<template>
    <div style="width: 100%;height: 100%;">
    </div>
</template>

<script>
    export default {
    data() {
      return {
          
      }
    },
       mounted: function() {
            var opts = {
        subdistrict: 0,
        extensions: 'all',
        level: 'city'
    };
    //利用行政区查询获取边界构建mask路径
    //也可以直接通过经纬度构建mask路径
    var district = new AMap.DistrictSearch(opts);

//引号里面是可以填写到市县级别 这样就不需要mask了
    district.search('', function(status, result) {
        var bounds = result.districtList[0].boundaries;
        var mask =  [
                
                  [121.919593,31.579758],
                [121.951522,31.554455],
                [121.964397,31.544069],
                
                
                [121.963882,31.54246],
                [121.96577,31.542313],
                [121.98534,31.517878],
                [121.99049,31.501487],
                [121.990833,31.493583],
                [121.98019,31.471331],
                [121.970233,31.466792],
                [121.941394,31.457568],
                
                [121.91616,31.447317],
                [121.899166,31.445706],
                [121.888523,31.438823],
                [121.870327,31.437211],
                [121.87067,31.439115],
                [121.887836,31.440727],
                [121.891784,31.448635],
                [121.904831,31.447463],
                
                [121.930236,31.460496],
                [121.925773,31.463425],
                [121.959419,31.510268],
                [121.960535,31.540558],
                [121.960449,31.540338],
                 [121.942939,31.553797],
                 [121.931352,31.566523],
                [121.924228,31.571715],
                [121.916332,31.575664],
                [121.915302,31.576249],
                [121.915645,31.576907],
                [121.919593,31.579758],
                
                
            ];
       /* for(var i =0;i<bounds.length;i+=1){
            mask.push([bounds[i]])
        }*/
        var map = new AMap.Map('container', {
            mask:mask,

//中心
            center:[121.95908,31.496941],
            disableSocket:true,
            viewMode:'3D',
            showLabel:false,
            labelzIndex:130,
            pitch:10,
            zoom:12.5,
            layers:[
                new AMap.TileLayer.RoadNet({
                    //rejectMapMask:true
                }),
                new AMap.TileLayer.Satellite()
            ]
        });
        var maskerIn = new AMap.Marker({
            position:[121.95908,31.496941],
            map:map
        })
        var maskerOut = new AMap.Marker({//区域外的不会显示
            position:[121.95908,31.496941],
            map:map
        })
        //添加高度面
        var object3Dlayer = new AMap.Object3DLayer({zIndex:1});
        map.add(object3Dlayer)
        var height = -8000;
        var color = '#0088ffcc';//rgba
        var wall = new AMap.Object3D.Wall({
            path:bounds,
            height:height,
            color:color
        });
        wall.transparent = true
        object3Dlayer.add(wall)
        //添加描边
        for(var i =0;i<bounds.length;i+=1){
            new AMap.Polyline({
                path:bounds[i],
                strokeColor:'#99ffff',
                strokeWeight:4,
                map:map
            })
        }
    });
}
  }
</script>

<style>
.amap-logo{
   opacity:0;
}
.amap-copyright {
    opacity:0;
}
</style>

Logo

前往低代码交流专区

更多推荐