Simple use of leaflet - offline map scheme

Go to the official website first

leaflet Official website

Show the map

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

Add some Line round

spot

   L.marker([37.85008, 112.4455]).addTo(mymap)
        .bindPopup(" The street ")

More than one point

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

If there are many points, you can use the following points to aggregate perhaps Massive point

Line

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

round

    L.circle([37.89220, 112.34619], {
        radius: 135000,// Radius distance 
        color: 'red',// Color 
        fill: false,// Whether to fill 
        interactive: false,//false  No click event will be triggered   It can only be used as the base map 
    }).addTo(mymap);

Add a movement track

Add a leaflet plug-in unit leaflet.motion
leaflet.motion Address

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

Point aggregation ability

With the help of point aggregation capability plug-ins

	/**
      Point aggregation capability to achieve 
     head Inside   introduce js Files also have styles 
     <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],
        }),
        // The icon displayed on the control interface 
        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  Is to permanently open tooltips , Or open only when the mouse hovers .
         marker.bindTooltip("tip-for"+i, {
             direction: "top",
             permanent: true,
             offset: L.point(0, -8)
         }).openTooltip()
        markers.addLayer(marker);
    }
    myMap.addLayer(markers);

Random hand animation points on the map 、 Line 、 polygon 、 round

Also with the help of plug-ins Geoman

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

 	// Add a menu that can draw circles, dots and polygons   And monitoring 
    myMap.pm.addControls({
        position: "bottomleft",
        drawPolygon: true, //  Add draw polygon 
        drawMarker: true, // Add a button to draw a marker 
        drawCircleMarker: false, // Add a button to draw a circular marker 
        drawPolyline: true, // Add button to draw line 
        drawRectangle: true, // Add a button to draw a rectangle 
        drawCircle: true, //   Add a button to draw a circle 
        editMode: true, //   Add button to edit polygon 
        dragMode: true, //    Add button drag polygon 
        cutPolygon: true, //  Add a button to delete part of the content in the layer 
        removalMode: true, //  Clear layer 
    })
    myMap.on("pm:drawstart", (e) => {       // Draw start event 
        console.log(e, " Start ");
    });
    myMap.on("pm:create", (e) => {
        console.log(e, " Call... When drawing is complete ");
        if (e.shape === "Rectangle") {
            alert(e.layer._latlngs[0]); // Get the coordinates of the drawing  
        } else if (e.shape === "Circle") {// circular 
            console.log(" The longitude and latitude of the center of the circle " + e.layer._latlng, " radius " + e.layer._mRadius)
        } else if (e.shape === "Line") {
            console.log(e.layer._latlngs)
        } else if (e.shape === "Polygon") {
            console.log(e.layer._latlngs)
        }
    });