leaflet.js地图制作中篇— —点、线、面、图层,的添加删除与相关鼠标操作;

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({
  
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值