![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
leaflet
勤劳@小蚂蚁
前端路上,用心编写、分享每篇前端技术文章....
展开
-
leaflet 绘制带箭头的线条(路径)
最近接到项目需求,需要在网页上实时展示APP用户巡检的轨迹,这个需求很简单,直接用leaflet画polyline就可以满足;很快便出了一版效果很项目经理,但是项目经理一看,说:这个和百度地址的路径展示差距太大,要求实现的效果和百度地图一样。OK,经过请教百度老师,发现leaflet的polylineDecorator可以满足此需求。经过实践,效果还不错,故分享出来,供参考和指导。1、引入 leaflet.min.js 和 leaflet.polylineDecorator.js访问polylineDe原创 2021-03-30 09:56:33 · 6773 阅读 · 8 评论 -
leaflet 清空地图上绘制的marker
1. 在data属性中定义layerGroup、map变量data() { return { layerGroup : null, map : null, };},2. 在地图上显示markerdrawWaterStMarker(arr){ // 如果地图没有加载完毕,则返回 if(!this.map){ return; } // 清空地图上已存在的站点 if(this.layerGroup !== n原创 2021-01-08 10:06:37 · 3316 阅读 · 1 评论 -
leaflet 点击地图marker,popup弹框展示chart图效果实现
1.leaflet绘制地图marker,添加点击事件drawWaterStMarker(arr){ // 如果地图没有加载完毕,则返回 if(!this.map){ return; } // 清空地图上已存在的站点 if(this.layerGroup !== null){ this.layerGroup.clearLayers(); } // 如果站点数据为空则返回 if(arr.length === 0){原创 2021-01-08 10:00:18 · 5318 阅读 · 14 评论 -
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/原创 2020-12-04 10:44:28 · 6235 阅读 · 13 评论 -
leaflet地图叠加瓦片图层
let url = 'http://gis.rwworks.com:6080/arcgis/rest/services/danjiangkou/tudizhengshouxian/MapServer'; const testLayer = L.esri.tiledMapLayer({ url: url, opacity: 1 }) testLayer.setZIndex(999); this.map.addLayer(testLayer);原创 2020-11-30 14:32:09 · 1924 阅读 · 0 评论 -
Leaflet加载、删除dynamicMapLayer动态图层
let url = 'http://gis.rwworks.com:6080/arcgis/rest/services/danjiangkou/tudizhengshouxian/MapServer'; const testLayer = L.esri.dynamicMapLayer({ url: url, opacity: 1 }) testLayer.setZIndex(999); this.map.addLayer(testLayer);原创 2020-11-30 14:34:41 · 1155 阅读 · 0 评论 -
leaflet移除除底图外的所有图层
map.eachLayer(function (layer) { if (!layer._container || ('' + jQuery(layer._container).attr('class')).replace(/\s/g, '') != 'leaflet-layer') { layer.remove(); }});原博客链接转载 2020-08-21 16:44:02 · 2747 阅读 · 0 评论