leaflet的简单使用-离线地图方案

先上官网

leaflet官网

展示地图

 	<link rel="stylesheet" href="leaflet/leaflet.css"/>
    <script type="text/javascript" src="leaflet/leaflet-src.js"></script>

 <div id="mapid"></div>

const mymap = L.map('mapid').setView([38.97649, 112.47803], 14);

 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 }).addTo(mymap);

添加点 线 圆

点

   L.marker([37.85008, 112.4455]).addTo(mymap)
        .bindPopup("街道")

多个点

L.layerGroup([marker1, marker2]).addTo(map); 

如果是非常多的点可以用下面的点聚合 或者海量点

线

const latlngs = [
        [38.44498, 111.02783],
        [38.37612, 113.37891],
        [37.16032, 111.26953],
        [38.97649, 112.47803],
        [36.80928, 113.02734],
        [38.44498, 111.02783]
    ];
    const polyline = L.polyline(latlngs, {color: 'red'}).addTo(mymap);
    // zoom the map to the polyline
    mymap.fitBounds(polyline.getBounds());

圆

    L.circle([37.89220, 112.34619], {
        radius: 135000,//半径距离
        color: 'red',//颜色
        fill: false,//是否填充
        interactive: false,//false 不会触发点击事件 只会做为底图
    }).addTo(mymap);

添加移动轨迹

在上面的基础上添加一个leaflet插件 leaflet.motion
leaflet.motion地址

<script type="text/javascript" src="leaflet/leaflet.motion.min.js"></script>

var latlngArr = [[34.52466, 110.23682], [35.40696, 113.51074],
       [36.41067, 113.71509], [36.70894, 113.49756]]
var carIcon = L.icon({
     iconUrl:'img/close.png',
     iconSize:[25.1,25],
 });
 L.motion.polyline(latlngArr,{
     color:'red'
 },{
     auto:true,
     duration:10000,
     easing:L.Motion.Ease.easeInOutQuart
 },{
     removeOnEnd:false,
     icon:carIcon
 }).addTo(mymap)

点聚合能力

借助点聚合能力插件

	/**
     点聚合能力实现
     head里面 引入js文件还有样式
     <link rel="stylesheet" href="./leaflet/dianjuhe/MarkerCluster.css"/>
     <link rel="stylesheet" href="./leaflet/dianjuhe/MarkerCluster.Default.css"/>
     <script src="./leaflet/dianjuhe/leaflet.markercluster-src.js"/>
     */
	var markers = L.markerClusterGroup({
        icon: L.icon({
            iconUrl: 'img/close.png',
            iconSize: [25.1, 25],
        }),
        //控制界面上面显示得图标
        iconCreateFunction: function(cluster) {
            if (cluster.getChildCount()>1){
                return new L.Icon({
                    iconUrl: '/img/has_point.png',
                    iconSize: [20, 20],
                })
            }else {
                return carIcon
            }
            // return L.divIcon({ html: '<b></b>' });
        }
    });
    for (var i = 0; i < Areas.length; i++) {
        var a = Areas[i];
        var title = a.name;
        var marker = L.marker(new L.LatLng(a.latitude, a.longitude), {title: title});
         //permanent 是永久打开工具提示，还是仅在鼠标悬停时打开。
         marker.bindTooltip("tip-for"+i, {
             direction: "top",
             permanent: true,
             offset: L.point(0, -8)
         }).openTooltip()
        markers.addLayer(marker);
    }
    myMap.addLayer(markers);

在地图上随意手动画点、线、多边形、圆

也是借助插件Geoman

	// head中引入
  	<script type="text/javascript" src="./leaflet-geoman.min.js"></script>
    <link rel="stylesheet" href="./leaflet-geoman.css"/>

 	//添加可以画圆画点画多边形的菜单 且有监听
    myMap.pm.addControls({
        position: "bottomleft",
        drawPolygon: true, // 添加绘制多边形
        drawMarker: true, //添加按钮以绘制标记
        drawCircleMarker: false, //添加按钮以绘制圆形标记
        drawPolyline: true, //添加按钮绘制线条
        drawRectangle: true, //添加按钮绘制矩形
        drawCircle: true, //  添加按钮绘制圆圈
        editMode: true, //  添加按钮编辑多边形
        dragMode: true, //   添加按钮拖动多边形
        cutPolygon: true, // 添加一个按钮以删除图层里面的部分内容
        removalMode: true, // 清除图层
    })
    myMap.on("pm:drawstart", (e) => {       //绘制开始时事件
        console.log(e, "开始");
    });
    myMap.on("pm:create", (e) => {
        console.log(e, "绘制完成时调用");
        if (e.shape === "Rectangle") {
            alert(e.layer._latlngs[0]); //获取绘制的坐标 
        } else if (e.shape === "Circle") {//圆形
            console.log("圆心经纬度" + e.layer._latlng, "半径" + e.layer._mRadius)
        } else if (e.shape === "Line") {
            console.log(e.layer._latlngs)
        } else if (e.shape === "Polygon") {
            console.log(e.layer._latlngs)
        }
    });