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({
        url:"js/demo.json",
        type:"POST",
        success:function(data){
            for(var i=0;i<data.rows.length;i++){
                (function (index){ //封闭空间开始
                    var row=data.rows[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";
                    pointFeature.on("click",function(){
                        alert(row.name)
                    });
                    pointFeature.addTo(_viewSpotLayer)
                })(i) //封闭空间结束
            }
        }
    })

.bindLabel方法不是leaflet内置方法,需要引入额外的css与js文件才能使用,插件可以去Leaflet.label官网下载(https://github.com/Leaflet/Leaflet.label)。不过leaflet最新版本为1.3.4,此版本中直接引入Leaflet.label使用会报错,需要修改部分源码才能实现功能。

<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()    设置样式;

事件:
line.on("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:为限制图片范围的经纬度,是右上经纬度点与左下经纬度点,如需要填充整个地图可视范围,可使用
        _map.getBounds()直接获取当前试图内右上左下经纬度,或者也可以自己创建想要的范围,此时需要使    
        用内置方法创建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联动部分会说明。

 

  • 9
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值