失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > leaflet+geoJSON实现绘制区域边界和边界高亮效果

leaflet+geoJSON实现绘制区域边界和边界高亮效果

时间:2020-02-12 22:08:58

相关推荐

leaflet+geoJSON实现绘制区域边界和边界高亮效果

先展示下效果图:

具体代码如下:

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实现绘制区域边界和边界高亮效果》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。