vue高德地图区域掩模,自定义掩膜
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>
更多推荐
所有评论(0)