项目中leafleft使用方法整理

最新推荐文章于 2024-05-17 00:00:00 发布

张不大了

最新推荐文章于 2024-05-17 00:00:00 发布

阅读量1.2k

点赞数 31

分类专栏： leaflet 文章标签： leaflet

本文链接：https://blog.csdn.net/weixin_46054156/article/details/135262661

版权

leaflet 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

leaftlet地图使用文档

一、文件结构

|- map/
|  |- draw                                # 内置绘制方法
|  |- heatMap                            # 热力图
|  |- leaflet                            # leaflet
|  |- minimap                            # 小地图
|  |- pruneCluster                        # 通用场景 点聚合
|  |- track                                # 卷帘
|  |- jquery.min.js                     # jquery
|  |- L.Menu.css                            # 菜单
|  |- Leaflet.Marker.SlideTo.js        # marker标记
|  |- map.js                                # 自定义地图方法
|  |- Menu.js                            # 菜单相关
|  |- Semicircle.js                        # 圆相关
|  |- transform.js                        # 变换

二、具体方法

1. 参数配置（options）

名称	类型	描述
id	String	地图容器ID
url	String	电子地图服务地址
satelliteUrl	String	卫星服务地址
mapCenter	Array	地图中心位置 [纬度，经度]
mapZoom	Number	放大层级
minZoom	Number	最小缩放级别
maxZoom	Number	最大缩放级别
mapId	String	地图视图
imgUrl	String	图片路径
serviceUrl	String(‘/api’)	接口服务
markerDraggable	Boolean	设备标注拖动
loadDevice	Boolean	加载设备
markerCluster	Boolean	是否点聚合
deviceStatus	Boolean	设备显示状态

2. 初始化地图

加载地图底层对象：new L.Map(id,{配置项})
监听地图点击： this.map.on(‘click’, function(e){
                    // [ e.latlng.lat, e.latlng.lng ]
                    latlngs = e.latlng
                }, this);
监听地图鼠标抬起： this.map.on(‘mouseup’,function(){}, this)

信息通知：

window.top.portMessage({
    type:’’ ,
    data:’’
},’*’)
接收消息：
window.addEventListen(‘message’,() =>{} )

3.关闭菜单( closeMenu() )

this.map.closeMenu()

4. 清除图层（removeLayer(图层实体)）

this.map.removeLayer(实体)

5. 绘制可编辑圆

   data.radius = Number(data.radius) || 20
   // 创建圆
   this.circle = L.circle(data.latLng, data.radius);
   // 开启编辑
   this.circle.editing.enable();
   // 将圆添加到指定图层
   this.circle.addTo(this.drawDotLayer)
   // 监听编辑，获取半径
   this.circle.on('edit', (e) => {
       this.drawDotData.radius = Math.round(e.target._mRadius)
       this.filterDevice(this.drawDotData.radius, data.latLng)
   });

6. 声明图层组（new L.layerGroup()）

let layer = new L.layerGroup();
// 将图层添加到地图
layer.addTo(this.map)

7. 绘制点图标（L.divIcon({})）

图片图标（new L.icon({})）

// 绘制元素图标
let icon = L.divIcon({
    className: 'my-div-icon',
    html: `<div class="dot-content">${this.drawDotIdx+1}</div>`,
     html: `<div class="live" style="margin-left:-9px;margin-top:-25px">
               <img src="` + iconImg + `">
               <div class="name" style="width:100px;text-align:center;transform: translate(-38px, -5px);background: rgba(255,255,255,0.5);display:` + nameShowHidden + `">` + data.name + `</div>
           </div>`
}})
// 绘制图片图标
let icon = new L.icon({
    iconUrl: 'static/images/address.png',
    iconSize: [35, 54],
    iconAnchor: [15,35],
    rotate:false,
    iconUrl:'/static/images/people.png'
})

8.绘制marker图标（L.marker(坐标，{})）

移动marker图标（marker.slideTo([], {})）

悬浮marker显示提示（marker.bindTooltip(string)）

marker 更新icon图标（marker.setIcon(icon)）

// 创建marker图标
// latlng:[lat, lng]
let marker = L.marker(latlng, {
    icon: icon， // 图标
    draggable: true,
    autoPan: true,
    name:'',
    id:'',
    data:''
})

// marker 监听拖动
marker.on('dragend', (e) =>{
    console.log(e.target._latlng)
    // 获取纬度
    let lat = e.target.getLatLng().lat
    // 获取经度
    let lng = e.target.getLatLng().lng
})

// marker 监听点击
marker.on('click', function(e) {})

// marker 鼠标右击菜单
marker.on('contextmenu',function(e) {})

// 移动marker 
marker.slideTo([lat, lng], {
    duration: 500, //  时间
})

// 悬浮marker显示提示
marker.bindTooltip(name)

9.绘制轨迹线（L.polyline(坐标)，{}）

// 生成线，并添加到图层
let line = L.polyline(latlngs,{
    weight: 8,
}).addTo(layer)

10.绘制轨迹方向箭头，轨迹装饰（L.polylineDecorator(line,{})）

// 生成轨迹箭头，并添加到图层
let decorator = L.polylineDecorator(line,{
    patterns: [{
       repeat: 50,
       // 箭头
       symbol: L.Symbol.arrowHead({
           pixelSize: 5,
           headAngle: 75,
           polygon: false,
           pathOptions: {
               stroke: true,
               weight: 2,
               color: '#FFFFFF'
            }
        })
    }]
}).addTo(layer)

11.更新轨迹线（line.setLatLngs(latlngs)）

line.setLatLngs(latlngs)

12.更新轨迹箭头（decorator.setPaths(line)）

decorator.setPaths(line)

13.判断地图是否具有图层（this.map.hasLayer）

this.map.hasLayer(marker)

14.设置视图（this.map.setView([lat, lng], 16)）

this.map.setView([lat,lng],16)

15.添加电子底图地图（L.tileLayer(url, {})）

// 创建底图
// url： "/GisMap/GaodeMap/{z}/{y}/{x}.png"
let electronics = L.tileLayer(url, {
    maxZoom: maxZoom,
    minZoom: minZoom,
    id:'electron'
})
// 显示地图
electronics.addTo(this.map)

16.创建鹰眼地图（new L.Control.MiniMap(electronics, {})）

let miniMap = new L.Control.MiniMap(electronics, {
    toggleDisplay: true,
    zoomAnimation: true, // 动画缩放
    maxZoom: 10, // 最大图层
    minZoom: 2, // 最小图层
    // 矩形框选移动图形
    aimingRectOptions:{
        color：'red',
        weight: 1, 
        fillColor: 'blue'    
    }
})
miniMap.addTo(this.map)

17.加载楼层底图（L.tileLayer(url, {})）

let floor = L.tileLayer(url, {
    worldCopyJump: false,
    noWrap: true
})

18,图层遍历循环（this.map.eachLayer(function(layer) {})）

this.map.eachLayer(function (layer) {
     if (!layer._container || ('' + $(layer._container).attr('class')).replace(/\s/g, '') != 'leaflet-layer') {
        layer.remove();
     }
})

19.点聚合

创建点聚合实体（ new PruneClusterForLeaflet()）

// 创建点聚合实体
let markerCluster = new PruneClusterForLeaflet()
// 设置聚合大小
markerCluster.Cluster.Size = 1;
// 创建点聚合 marker
let marker = new PruneCluster.Marker(lat,lon,{
    data:data
})
// 注册 marker
markerCluster.RegisterMarker(marker)
// 监听聚合变化
this.markerCluster.PrepareLeafletMarker = function (leafletMarker, data) {
    // 点聚合设备图标重置
     _this.resetMark(leafletMarker, data.data)
}
// 重绘图标
markerCluster.RedrawIcons()
// 点聚合移除
markerCluster.RemoveMarkers(marker)

// 执行视图进程
markerCluster.ProcessView()

// 点聚合实体添加到地图
markerCluster.addTo(this.map)

20.经纬度转成地图坐标（L.latLng(lat,lon)）

// 经纬度坐标转换
let latlng = L.latLng(lat,lon)

21.添加到图层（layers.addLayer(marker)）

layers.addLayer(marker)

22.地图设置边界（map.fitBounds([])）

let latlngs = []
// 地图设置边界
map.fitBounds(latlngs)

23.地图两点之间的距离（map.distance(latlng,latlng1)）

// 计算两点之间的距离
let distance = map.distance(latlng, latlng1)

24.获取轨迹线的经纬度集合（line.getLatLngs()）

let latlngs = line.getLatLngs()

25.创建动态marker( L.animatedMarker(latlngs, {}) )


let animatedMarker = L.animatedMarker(latlngs, {
     // speedList: speedList,
     interval: 300, // 默认为100mm
     icon: icon, // 图标
     // 行走回调, 更新路线
     playCall: (latlng) => this.updateRealLine(latlng, this.latlngs, realRouteLine, decorator),
     // 结束回调， 删除动态marker
     playEnd: () => { layer.removeLayer(animatedMarker) }
 }).addTo(layer)
 
this.trackMarkers.push(animatedMarker)

// 开始运动
animatedMarker.start();
// 停止运动
animatedMarker.stop();
// 暂停运动
animatedMarker.pause()

/**
  * 回调:绘制已行走轨迹线
  * @param {*} latlng  绘制坐标 
  * @param {*} latlngs  轨迹原始坐标
  * @param {*} realRouteLine  实时轨迹线对象 
  * @param {*} decorator 轨迹方向箭头对象
*/ 
updateRealLine(latlng, latlngs, realRouteLine, decorator) {
   // 更新实时轨迹线
   let newLatlngs = realRouteLine.getLatLngs()
   newLatlngs.push(latlng)
   realRouteLine.setLatLngs(newLatlngs)
   // 更新箭头指向路径
   decorator.setPaths(realRouteLine)
}

26.地图放大（map.zoomIn()）

map.zoomIn()

27.地图缩小（map.zoomOut()）

map.zoomOut()

28.添加draw控件（L.FeatureGroup）

// 创建控件
let drawnItem = new L.FeatureGroup()
// 添加到地图
map.addLayer(drawnItem)
// 监听绘制创建完成
map.on(L.Draw.Event.CREATED, function(e) {
    let layer = e.layer
    drawnItems.addLayer(layer);
    //  进行逻辑处理    
})
// 监听绘制清除（保存）
map.on(L.Draw.Event.DELETED, function() {})

29.绘制直线( new L.Draw.Polyline(map,{}) )

let polylineHandler = new L.Draw.Polyline(map,{
    showLength: true,
    metric:true
})
// 禁用所有绘制
polylineHandler.disable()
rectangleHandler.disable()
circleHandler.disable()
polygonHandler.disable()

// 启用直线绘制
polylineHandler.enable()

30.绘制矩形（new L.Draw.Rectangle(map,true)）

let rectangleHandler = new L.Draw.Rectangle(map, true);

// 禁用所有绘制
polylineHandler.disable()
rectangleHandler.disable()
circleHandler.disable()
polygonHandler.disable()

// 启用绘制
rectangleHandler.enable()

31.绘制多边形（new L.Draw.Polygon(map,{})）

let polygonHandler = new L.Draw.Polygon(map, {
    allowIntersection: false,
    showArea: true,
    showLength: true
});

// 禁用所有绘制
polylineHandler.disable()
rectangleHandler.disable()
circleHandler.disable()
polygonHandler.disable()

// 启用绘制
polygonHandler.enable()

32.绘制圆形（new L.Draw.Circle(map, true)）

let circleHandler = new L.Draw.Circle(this.map, true);

// 禁用所有绘制
polylineHandler.disable()
rectangleHandler.disable()
circleHandler.disable()
polygonHandler.disable()

// 启用绘制
circleHandler.enable()

33.清除绘制（ new L.EditToolbar.Delete(map,{}) ）

let deleteHandler = new L.EditToolbar.Delete(this.map, {
    featureGroup: this.layers.drawnItems
})
// 清除绘制  启用
deleteHandler.enable()

34.绘制扇形（new L.semiCircle(latlng,{})）

    
/**
  * 绘制扇形
  * @param latlng  坐标
  * @param radius  半径
  * @param startAngle  开始角度
  * @param endAngle  结束角度
  *  */ 

let semiCircle = L.semiCircle(latlng, {
    radius: radius,
    fill: true,
    fillColor:'#f03',
    fillOpacity: 0.5,
    color: '#f03',
    opacity: 0.5,
    startAngle: Number(startAngle),
    stopAngle: Number(endAngle)
})
semiCircle.addTo(map);

35.热力图图层（new HeatmapOverlay(cfg)）

var cfg = {
       // radius should be small ONLY if scaleRadius is true (or small radius is intended)
       "radius": 26,
       "maxOpacity": .8, 
       // scales the radius based on map zoom
       "scaleRadius": false, 
       // if set to false the heatmap uses the global maximum for colorization
       // if activated: uses the data maximum within the current map boundaries 
       //   (there will always be a red spot with useLocalExtremas true)
       "useLocalExtrema": true,
        // which field name in your data represents the latitude - default "lat"
        latField: 'lat',
        // which field name in your data represents the longitude - default "lng"
        lngField: 'lng',
        // which field name in your data represents the data value - default "value"
        valueField: 'count'
 };
// 创建热力图
let heatmapLayer = new HeatmapOverlay(cfg);
// 将热力图添加到地图
heatmapLayer.addTo(this.map)
// 给热力图设置数据
let max = 8; 
heatmapLayer.setData({
    max: max,
    data: data
})
// 设置边界范围
map.fitBounds(latlngs)

36.地图菜单（ new L.menu( [],{} )）

// 创建菜单
let menu = L.menu([], {
     offset: [2, 0]
})

// 监听鼠标右键
map.on('contextmenu',function(e) {
    // 打开菜单
    map.openMenu(menu, e.latlng, ["显示名称", '隐藏名称'], {
        attach: e
    });    
})

menu.on('itemclick', function(e) {
    let target = e.attach.target;
    switch(e.text) {
         case '显示名称' :
            // 控制元素创建的icon显示
            $('.live .name').css('display','block')
         break;
         case '隐藏名称' :
             // 控制元素创建的icon隐藏
             $('.live .name').css('display','none')
         break;                                                                                      
    }
})

37. 获取地图中心（map.getCenter()）

// 获取地图中心位置
map.getCenter()

38.获取地图层级大小（map.getZoom()）

// 获取地图层级大小
map.getZoom()

39.设置地图最小层级（map.setMinZoom()）

map.setMinZoom(8)

40.设置地图最大层级（ map.setMaxZoom() ）

map.setMaxZoom(18)

41.创建dom元素（L.DomUtil.create('元素名称','className'，document.createElement('div'))）

let moveMarker = document.createElement("div");
moveMarker.id = "x_map_id_movedevice";
moveMarker.style.cssText = "text-align:center; position:absolute; left:0px; top:0px; z-index:1001; display:none; cursor:pointer"

let img = L.DomUtil.create("img", null, moveMarker);
img.src = imgSrc;
// img.style.width = "30px";

let textDiv = L.DomUtil.create("div", "x_map_device_name", moveMarker);
textDiv.innerHTML = text;
document.getElementById('mapContainer').appendChild(moveMarker);