leaflet.js地图制作中篇

您所在的位置:网站首页 leaflet移除图层 leaflet.js地图制作中篇

leaflet.js地图制作中篇

2023-02-28 22:18| 来源: 网络整理| 查看: 265

1.featureGroup图层创建

在实际项目中地图数据分为不同类型,这时如果把所有数据同时加载到地图上来进行操作会带来各种问题,所以此时需要利用L.featureGroup方法创建不同的图层,用来加载不同类型的数据,以方便操作,具体方法如下:

var _viewSpotLayer=new L.featureGroup([]);_map.addLayer(_viewSpotLayer);如需要清除图层上的数据集合,使用内置方法即可:

_viewSpotLayer.clearLayers();2.使用L.marker创建点数据

如上图,橙色框内为 popup,粉色框内为 label ,图标为 icon,三者组合构成了marker。

示例:var pointFeature = new L.marker([39.905,116.399],{ icon: viewIcon,title:"故宫"}).bindLabel("故宫",{noHide:true}).addTo(_viewSpotLayer);参数说明:icon //用于渲染标记的图标实例。使用L.icon创建,下面会有详细讲解title //鼠标悬停时提示文本alt //图像文本riseOnHover //true/false(默认),为true时当您将鼠标悬停在其上时,标记将会显示在其他标记之上。

方法说明:.addTo(layer) //添加到指定图层当中.bindLabel() //给marker绑定label,使用方法及参数下面详解

事件说明:marker支持各种鼠标事件,使用方法为marker.on("event",function(){ //do something})

ps:如果通过ajax请求加载多个marker,并且都需要添加点击事件,请使用【封闭空间】循环加载数据点

使用示例:$.ajax({ url:"js/demo.json", type:"POST", success:function(data){ for(var i=0;i



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3