先展示下效果圖：
具體代碼如下：
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);
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/230618.html
標籤：區塊鏈