项目中leafleft使用方法整理

发布时间:2023年12月28日

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);

文章来源:https://blog.csdn.net/weixin_46054156/article/details/135262661
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。