先展示下效果图:
具体代码如下:
geoJSON绘制边界
initNewMap(){
var myStyle = {
"color": "#00f",
"weight": 2,
"opacity": 0.5,
"fillColor": 'red',
"fillOpacity": 0,
};
let JsonUrl = 'http://192.168.37.129:22221/assets/images/440000.json';
// 绘制地图边界
L.geoJSON(JsonUrl, {
style: myStyle,
}).addTo(this.map);
let _this = this;
$.getJSON(JsonUrl, function(json) {
_this.drawBoundary(json.features[0].geometry.coordinates[0]);
});
},
// 边界高亮及遮罩效果
drawBoundary(blist) {
let pNW = { lat: 59.0, lng: 73.0 };
let pNE = { lat: 59.0, lng: 136.0 };
let pSE = { lat: 3.0, lng: 136.0 };
let pSW = { lat: 3.0, lng: 73.0 };
let pArray = [];
pArray.push(pNW);
pArray.push(pSW);
pArray.push(pSE);
pArray.push(pNE);
pArray.push(pNW);
for (let i = 0; i < blist.length; i++) {
let points = [];
$.each(blist[i],function(k,v){
points.push({lat:v[1],lng:v[0]});
});
pArray = pArray.concat(points);
pArray.push(pArray[0]);
}
let plyall = L.polygon(pArray, { color:'transparent',fillColor:'#C0C0C0',fillOpacity:0.9 });
plyall.addTo(this.map);
},