【leaflet】地图显示、标记、图层切换

leaflet


地图和marker显示:http://leafletjs.com/examples/quick-start.html

marker自定义图片:http://leafletjs.com/examples/custom-icons.html

图层切换(控制):http://leafletjs.com/examples/layers-control.html(其中cities的marker数组是option,可以删去)


具体文档:http://leafletjs.com/reference.html#marker


----------------------------------------------------------------------------------------------------------------------------------------------

移除Marker:

思路》》把marker放到layer中,删除layer,因为Marker实现了ILayer接口

添加时:map.addLayer(marker); //而不用marker.addTo(map);

删除时:map.removeLayer(marker);


Geojson图层:

//画导航线路
function drawGeojson(json){
	if(map.hasLayer(routeline)){
		map.
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
leaflet是一个轻量级的开源JavaScript库,用于创建交互式地图和WebGIS应用程序。它提供了多种功能,包括地图展示、缩放、拖拽、标记、弹出框、图例等。另外,leaflete还支持图层叠加,即在地图上添加多个覆盖层,使得用户可以通过切换图层,查看不同的地理信息。 实现图层叠加,需要先创建一个地图对象,然后在该对象上添加多个图层。例如,我们可以先创建一个OpenStreetMap图层: ```javascript var streetMap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'Map data © OpenStreetMap contributors' }); ``` 接着,我们可以添加一个WMS图层,用于显示卫星影像: ```javascript var satelliteMap = L.tileLayer.wms('http://localhost/wms', { layers: 'satellite', format: 'image/png', transparent: true }); ``` 最后,我们可以将这两个图层添加到地图对象,如下所示: ```javascript var map = L.map('map').setView([51.505, -0.09], 13); var baseMaps = { 'Street Map': streetMap, 'Satellite Map': satelliteMap }; L.control.layers(baseMaps).addTo(map); streetMap.addTo(map); ``` 通过以上的代码,我们在地图上添加了两个覆盖层,用户可以通过控制面板来切换不同的图层。在WMS图层中,可以使用layers参数指定要显示图层名称,format参数指定输出格式,transparent参数指示是否使用透明背景。 除了WMS图层,我们还可以添加GeoJSON图层、TileLayer图层等。总之,leaflet提供了丰富的图层叠加功能,可以满足多种地图展示需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值