只要项目里涉及位置，就躲不开地图这件事——门店分布、配送范围、房产标注、轨迹回放、行政区划展示，哪一样都得先把地图铺上去。市面上的商业地图 SDK 通常要申请密钥、有调用量限制，有的还限制商业使用；而开源方案配上免费的地图瓦片源就能跑起来，预算有限或者想自建的项目会更合适。这次整理了 4 款开源免费、可商用的网页地图与地理计算库，把显示和分析两块都覆盖到了。
四款库各管什么
Leaflet 是前端地图事实上的标准方案，体积小、接口简单，缩放平移、标记点、弹出框、图层切换、矢量绘制都有，插件生态极其丰富，放一张地图标几个点，十几行代码就能跑。MapLibre GL JS 是 Mapbox GL 的开源分支，用 WebGL 渲染矢量瓦片，地图可以任意旋转倾斜、平滑缩放，还支持三维建筑和自定义样式，做数据大屏和 3D 地图效果很出彩。Turf.js 把 GIS 计算搬进了浏览器，能算距离和面积、生成缓冲区、做多边形求交、判断点是否落在区域内。Proj4js 负责坐标系换算，WGS84 经纬度、Web 墨卡托、国家大地坐标系之间一行代码就能转。
实际项目里怎么组合
最常见的搭法是 Leaflet 或 MapLibre 负责显示，Turf.js 负责判断，Proj4js 负责换算。举个具体场景：做一个门店配送范围查询，先把门店和用户位置标在地图上，用 Turf.js 画一个配送半径的缓冲区，再判断用户点是不是落在范围里，结果直接在地图上高亮。整个过程都在浏览器里算完，不用往返请求后端接口，响应快、服务器压力也小。
包内容和用法
压缩包里按库名分成了四个目录，每个目录都放了压缩版和带注释的非压缩版两种文件，正式项目引 min 版，调试的时候看非压缩版。Leaflet 目录里连标记图标都一起打包了，不用另外找。四款库互相独立、不依赖任何框架，用 script 标签引入就能用。地图底图可以搭配免费的开源瓦片源使用，配合起来就是一个完整的自建地图方案。每个目录都附带了说明文档和许可文件，拿到手照着改就行。
地图类功能属于那种平时用不上、一用就是刚需的东西，提前把这套工具备好，真到项目要用的时候能省下好几天调研时间。如果团队里没人做过地图，建议先从 Leaflet 入手，它上手最平缓，放标记、画范围这些常规需求都能满足，等碰到三维或者自定义样式的要求再考虑换 MapLibre。这四款加起来一兆多，按需引入对页面加载影响很小。全部可免费商用、修改和再分发，保留各自的许可文件即可。后面还会继续整理前端开发常用的组件和工具合集，需要的可以先收藏。
暂无评论内容