leaftlet入门教程一

最新推荐文章于 2025-05-16 14:35:30 发布

六五酥

最新推荐文章于 2025-05-16 14:35:30 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： map 文章标签： javascript

本文链接：https://blog.csdn.net/qq_27149279/article/details/120490660

map 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Leaflet地图中监听鼠标移动事件获取坐标，创建和管理地图，包括设置初始视图、显示缩放尺度，以及使用Mapbox API、标注、旋转、移除和批量操作marker的方法。此外，还涵盖了divIcon和layerGroup的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、实时输出坐标

// 监听 mousemove 事件
map.on('mousemove', (e) => {
    let latlng = e.latlng;
    console.log(latlng );// {lat: 30.59, lng: 114.32}
});
 
// 取消 mousemove 事件
map.off('mousemove');

2、设置地图
<head>中添加

    <link rel="stylesheet" href="./leaflet/leaflet.css" />
    <script src="./leaflet/leaflet.js"> </script>

<head>中添加
如果你正在使用<div id=‘mapDiv’></div>地图容器

<style>
    #mapDiv {
        background: pink;
    }
</style>

也可以在body中的mapDiv的div里面添加，如下：

<body>中添加:

<div id="mapDiv" style="width: 1000px; height: 600px;background: white;"></div>

创建一个空白地图 <body>中的<script>代码块中添加：

	var leafletMap = L.map('mapDiv', {
	    center: [23.16, 113.40],//地图的初始地理中心
	    zoom: 6  //初始地图缩放级别
	});

或者

var leafletMap = L.map('mapDiv').setView([22, 113], 5);

3、显示缩放尺度

        L.control.scale().addTo(leafletMap);

在这里插入图片描述
4、mapbox api使用
https://docs.mapbox.com/api/overview/

5、标注
https://blog.csdn.net/qq_34922009/article/details/81164540?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-3.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-3.no_search_link

6、旋转
https://github.com/bbecquet/Leaflet.RotatedMarker

7、移除marker

var marker = L.marker([23.16, 113.40]).addTo(leafletMap)
            .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
            
leafletMap.removeLayer(marker)

    L.marker([23, 113]).addTo(leafletMap).bindTooltip("my tooltip text").openTooltip();

8、批量生成marker，批量移除marker

首先需要创建marker

        var myIcon1 = L.divIcon({
            html: "B25066666",
            className: 'my-div-icon',
            //iconSize:30

        });
        var myIcon2 = L.divIcon({
            html: "B25000000",
            className: 'my-div-icon',
            //iconSize:30

        });
        var myIcon3 = L.divIcon({
            html: "B25222222",
            className: 'my-div-icon',
            //iconSize:30

        });
          
         
        var lay1 = L.marker([23.5, 113.5], { icon: myIcon1});
        var lay2 = L.marker([23.9, 113.9], { icon: myIcon2});
        var lay3 = L.marker([23, 113], { icon: myIcon3});

创建marker数组

        var layers=[];
        layers.push(lay1);
        layers.push(lay2);

创建marker数组

        var myGroup = L.layerGroup(layers).addTo(leafletMap);//批量添加到layerGroup，并显示在leafletMap  div上

        myGroup.addLayer(lay3)//单独添加到layerGroup，并显示在leafletMap  div上

        myGroup.clearLayers();//批量删除


        var myGroup = L.layerGroup();

        myGroup.addLayer(lay1);
        myGroup.addLayer(lay2);
        myGroup.addLayer(lay3);
        myGroup.addTo(leafletMap);