Leafletjs--点、线、多边形的绘制-CSDN博客

本文介绍了如何使用Leafletjs进行地图绘制，包括自定义点、绘制线和多边形，并阐述了它们在项目中的应用，如物资和人员定位、安全路线规划和监测区域设定。同时，提到了Leafletjs的免费性和丰富的插件库，以及结合数据库存储和显示坐标点的方法。

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

Leafletjs 学习

最近做的项目很大部分的需求都是和室内地图相关的，学习一下。

gif 图片加载偏慢，再吐槽一下简书，做个生成目录就那么难吗？

0. 其它

1. 关于地图控件

百度地图、高德地图等在室内地图方面都不是很友好，这也是绝大部分地图控件的问题，着重的问题是没有办法让使用系统的用户自己添加自己的地图，可能有其它的技术，但是我不知道啊~；
关于室内地图，3D效果的地图是比较好的，但是我也还没有接触到，而且好像也没有比较好的学习路子，找到的所有能做室内3D地图的都是收费的，这里重点指的是所有。想要自己做的话，可能要用canvas+D3js+Treejs之类的，比较麻烦啊~
Leafletjs 是完全免费的，重点是完全免费，功能上面可能有些不足但是人家免费啊，而且插件比较多，还有缺点就是差不多都是英文的，查文档比较难。

2. 结合项目点、线、区域的效果

这里的点、线、区域都是提前绘制，把相应的坐标点存入数据库，最后在这个页面统一获取显示；

这里的需求是，点==物资和人员，线==安全路线，区域==监测的范围，所有点、线、区域都要绑定地图与绑定报警事件，一旦事件触发，则显示相应的点、线、区域。

效果.gif

效果图.png

3. 布置地图

所有的操作都是建立在地图上的

// 最主要的是这一步，下面请求操作是根据业务需求添加
var maplet = L.map('map', {
            crs: L.CRS.Simple,
            minZoom: -2,
            zoomControl: false
        });

 var bounds = [
            [0, 0],
            [1021.5, 1023]
        ];
        var imageObj = new Image();
        var image = L.imageOverlay("", bounds).addTo(maplet);

// 请求数据，拿到地图的 URL，这里的地图数据在地图管理模块添加完成
mymap(mapid)
function mymap(mapid) {
            $.ajax({
                url: localStorage.baseUrl + `/Map/GetMapByMapId?TOKEN=${localStorage.token}&MAP_ID=${mapid}`,
                async: true,
                type: 'GET',
                dataType: "json",