先展示下效果图:
具体代码如下:
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);},
如果觉得《leaflet+geoJSON实现绘制区域边界和边界高亮效果》对你有帮助,请点赞、收藏,并留下你的观点哦!