强大的地图库--Leaflet.js爬坑记录(1)

最新推荐文章于 2025-05-05 16:17:00 发布

王亟亟

最新推荐文章于 2025-05-05 16:17:00 发布

阅读量9.1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： html 混合开发文章标签：地图 javascript 技术

本文链接：https://blog.csdn.net/ddwhan0123/article/details/78685376

本文记录了使用Leaflet.js开发地图应用的过程中遇到的问题和解决方案，包括地图坐标系转换、事件分发、自定义Icon以及Icon旋转等实战技巧。适合需要使用开源地图库的开发者参考。

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

转载请注明出处：王亟亟的大牛之路

初衷以及传送门：
因为要做一个防碰撞的警报/预警系统，所以带着小伙伴最近在整地图相关的技术，有一些特殊要求

不使用收费的地图源
非瓦片图加载性能在秒级
丰富的API
成熟的实际商业案例

综合上述需要和朋友的推荐，使用/学习了Leaflet.js。基于播撒欢笑播撒爱的初衷，把体验过程中遇到的一些情况和积累，分享给大家。

不想看介绍，想直接看源码的可以进传送门
代码以更新为npm形式

运行的案例地址在src/html下，3个demo拽浏览器都能跑

Leaflet倒包的小要点
倒包需要样式的css和功能的js,但是js一定要在css后加载

 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
   crossorigin=""/>
    <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
   crossorigin=""></script>