先看看实现后的样子:
这里就不说根底了,有不懂能够去查一下,网上对于根底还是挺多的
或者能够看看官网文档:入口高德地图vue应用根底疏导
看完就能够把高德地图的根底图层引入到我的项目中了
而后再看看官网遮罩示例:遮罩示例
然而想要应用遮罩插件还须要以下配置:
1、配置平安密钥(留神:不是key)
window._AMapSecurityConfig = { securityJsCode:'你的平安密钥', };
留神:配置平安密钥必须在初始化地图根底图层(AMapLoader.load)之前!否则没有任何成果!
2、引入省市区查问插件(其余插件也是这样引入的)
AMapLoader.load({ key:"你的key", version:"2.0",//这个是版本 plugins:['AMap.DistrictSearch']//插件在这里引入 }).then((AMap) => { let map = new AMap.Map("container",{ resizeEnable: true, zoom: 11,//地图初始的缩放倍数 center:[res.city.longitude,res.city.latitude],//初始化后地图展现的核心地位 }); this.initPolygon(city, map);//这是创立遮罩的办法,我把城市和初始化的地图传进去 }).catch( e => { console.log(e); })
3、初始化遮罩
initPolygon(city, map) { AMap.plugin('AMap.DistrictSearch', function () { new AMap.DistrictSearch({ extensions: 'all', subdistrict: 0 }).search(city, function(status, result) { let 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) ]; let holes = result.districtList[0].boundaries; let pathArray = [outer]; pathArray.push.apply(pathArray, holes); //增加遮罩款式 let polygon = new AMap.Polygon({ pathL: pathArray, strokeColor: '#00eeff', strokeWeight: 1, fillColor: '#71B3ff', fillOpacity: 0.5 }); polygon.setPath(pathArray); map.add(polygon); }) }) },
这样,一个遮罩就弄出来了