最初项目开始的并没有想到使用leaflet，而是选择去使用百度地图、高德地图等地图引擎。但是随着项目进展发现客户那边对地图有很多定制化的需求，这些地图引擎并不能满足，所以选择了比较轻量级的leaflet。
一、特点
- 轻量级：包体积40多KB，几行代码就可以创建出地图
- 功能完善：支持WMTS、WMS等服务，可以自定义Marker、Popup等功能
- 插件丰富：像热力图、点聚合等这些功能虽然leaflet本身没有实现，但是有很多插件可以实现
二、基础功能
初始化地图
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" /> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin="" ></script> <style> html, body { margin: 0; width: 100%; height: 100%; } #map { width: 100%; height: 100%; } </style> </head> <body> <div id="map"></div> <script> const map = L.map("map", { center: [30.65, 104.06], // 默认中心 zoom: 8, // 默认缩放级别 }); </script> </body></html>
初始化地图后你会看到一个灰白色的页面上什么都没有，这是因为还没有加载地图服务
引入底图服务（我这里是使用的天地图公开的服务，但是需要自己去申请tk）
const tk = "xxx"; L.tileLayer( "http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + tk, { attribution: "", subdomains: ["1", "2", "3", "4", "5", "6", "7"], // 负载子域 } ).addTo(map);
创建完成后就可以一幅影像地图，但是没有地名信息还是和我们平时看到的地图不一样
引入地理信息图层
L.tileLayer( "http://t{s}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + tk, { attribution: "", subdomains: ["1", "2", "3", "4", "5", "6", "7"], } ).addTo(map);
这个时候看起来就和我们平时看到的地图比较像了
还有很多绘制点、线、面的方法就不一一介绍了，这里贴上官网地址。后面介绍一下leaflet的一些插件和项目中一些场景。
