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⽀持各种⿏标事件，使⽤⽅法为
<("event",function(){
//do somethingjs文字动画特效
})
ps：如果通过ajax请求加载多个marker，并且都需要添加点击事件，请使⽤【封闭空间】循环加载数据点
使⽤⽰例：
$.ajax({
url:"js/demo.json",
type:"POST",
success:function(data){
for(var i=0;i&ws.length;i++){
(function (index){ //封闭空间开始
var ws[index];
var pointFeature = new L.marker([row.lat,row.lng],{ icon:
viewIcon,title:row.name}).bindLabel(row.name,{noHide:true});
pointFeature.options.sm_sid = "rwjg";
<("click",function(){
alert(row.name)
});
pointFeature.addTo(_viewSpotLayer)
})(i) //封闭空间结束
}
}
})
<link href="css/leaflet.label.css" rel="stylesheet" />
<script src="leaflet/leaflet.label-src.js"></script>
<script src="leaflet/BaseMarkerMethods.js"></script>
<script src="leaflet/Marker.Label.js"></script>
<script src="leaflet/Map.Label.js"></script>
使⽤⽅法：
.bindLabel("⽂字内容",{options})
noHide //label是否⼀致显⽰不消失，默认为false,⿏标移⼊时才会显⽰label。
使⽤L.icon⽅法创建图标
var viewIcon = L.icon({
iconUrl: 'images/draw_maker.png',
iconSize: [18, 27],
iconAnchor: [9, 14],
popupAnchor: [0, -13]
});
参数说明：
iconUrl //图⽚路径
iconSize //图⽚⼤⼩，已像素为单位
iconAnchor //图标“尖端”的坐标（相对于其左上⾓）。图标将对齐，以使此点位于标记的地理位置。如果指定了size，则默认居中。popupAnchor //弹出窗⼝相对于图标锚点“打开”的点的坐标。
className //class名称
使⽤L.popup⽅法创建弹出层
<script>
使⽤⽰例：
var popText="<span style='width:80px;line-height:40px;text-align:center;font-
size:16px;display:block;'>故宫</span>";
var popup = L.popup({ maxWidth: 700, maxHeight: 600 })
.setLatLng([39.905,116.399])
.setContent(popText);
pointFeature.bindPopup(popup);
参数说明：
maxWidth //弹出窗最⼤宽度
minWidth //弹出窗最⼩宽度
maxHeight //弹出窗最⼤⾼度
autoPan //默认true，如果您不希望地图执⾏平移动画以适合弹出窗⼝，请将其设置为false。
closeButton //默认为true，是否显⽰关闭按钮
className //class名称
ps：默认点击地图会关闭已打开popup，像关闭该功能请在加载地图时进⾏设置，详见初篇L.map({options}).
⽅法说明:
setLatLng() //设置弹出窗⼝打开的地理位置。
setContent() //设置弹出窗内容。
marker.bindPopup(popup) //将popup绑定到图标上，绑定后点击marker会弹出/关闭popup
</script>
3.使⽤L.polyline创建线段
newL.polyline(数据集合,{options})
var lineArr=[[39.920969009399414, 116.38572692871094],[39.91101264953613,
116.3862419128418],[39.91161346435547, 116.39636993408203],[39.9217414855957,
116.3957691192627],[39.9213981628418, 116.38589859008789]];
var line =newL.polyline(lineArr,{color:'red',opacity:'0.8',weight:'3'})
.
addTo(_viewSpotLayer);
参数说明：
color：线段颜⾊
weight：线段宽度
opacity：线段透明度
dashArray：虚线间隔
fill：是否填充内部(true/false)
fillColor：内部填充颜⾊，如不设置，默认为color颜⾊
fillOpacity：内部填充透明度
⽅法：
.setStyle() 设置样式;
事件：
<("event",function(){
//do something
})
ps：线段的事件，是能在⿏标位于线段上⽅时操作才会触发
4.使⽤L.polygon创建⾯
L.polygon与L.polyline在使⽤⽅法，参数等上⾯完全⼀样，不同的是效果与事件范围有所差异，如下图
此⾯与上图的线段使⽤同⼀组数据，观察⼀下可以看出，两张图的左上⾓部分，线段是敞开的，⾯是闭合的，这就是polyline与polygon的不同之处，polygon会⾃动闭合⾸尾点，形成⼀个封闭的⾯，并且polygon的事件触发范围为整个⾯内（包括填充部分）。两者都可以使⽤.bindPopup()⽅法绑定弹窗，并且弹窗会根据⿏标点击位置弹出。
5.利⽤L.imageOverlay加载图⽚图层
效果图
使⽤⽰例：
var imgLayer=L.imageOverlay(imgurl,bounds,{options});
bounds：为限制图⽚范围的经纬度，是右上经纬度点与左下经纬度点，如需要填充整个地图可视范围，可使⽤ _Bounds()直接获取当前试图内右上左下经纬度，或者也可以⾃⼰创建想要的范围，此时需要使⽤内置⽅法创建bounds数据集合，具体⽅法为：
var bounds = new L.LatLngBounds(new L.LatLng(右上),new L.LatLng(左下));
例：var bounds = new L.LatLngBounds(
new L.LatLng(39.948177, 116.426239),
new L.LatLng(39.899082, 116.351222)
);
参数说明：
opacity：图⽚透明度
maxZoom：最⼤缩放层级
minZoom：最⼩缩放层级
className：class名称
⽅法说明：
setUrl() 重新设置图⽚路径
setBounds() 重新设置图⽚范围
ps: 1.setBounds()⽅法在最新版1.3.4内存在，⽼版本0.7.7版本没有此⽅法
2.使⽤L.imageOverlay⽅法加载图⽚到地图上时，进⾏缩放放⼤时，图⽚会模糊，所以需要使⽤
setUrl与setBounds⽅法重新加载图⽚，后续与arcgis联动部分会说明。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论