esri-leaflet介绍
- 一句话定位
Esri-Leaflet = 把“Leaflet 的轻量”与“ArcGIS 的强大”拼在一起的开源“胶水”库；
通过它，你可以像加普通图层那样，把 ArcGIS Online / ArcGIS Server 的底图、要素、影像、地理编码、空间查询一口气搬进 Leaflet，而不用写 ArcGIS API for JavaScript 那样厚重的代码。
- 核心能力（能干什么）
| 场景 | 对应 Esri-Leaflet 模块 | 一句话说明 |
|---|---|---|
| 基础底图 | L.esri.basemapLayer() | 直接拉取 Esri 街道、影像、地形、导航等 10+ 种底图 |
| 动态/切片图层 | L.esri.dynamicMapLayer() / tiledMapLayer() | 把 ArcGIS Server 发布的动态或缓存服务当图层叠上来 |
| 矢量要素 | L.esri.featureLayer() | 支持点线面、实时筛选、Popup、样式函数，还能编辑 |
| 热力图 / 聚类 | 插件 esri-leaflet-heatmap / esri-leaflet-cluster | 万级点数据秒出热力或聚类，手机也流畅 |
| 地理编码 | 插件 esri-leaflet-geocoder | 地址⇄坐标双向解析，自带 Search Box UI |
| 空间查询 | .query() / .nearby() / .within() | 属性过滤、几何相交、距离缓冲，一条链式调用搞定 |
- 技术性格
- 体量：核心库 gzip 后 ≈ 30 kB，插件按需引入，比 ArcGIS JS API 轻一个量级。
- 浏览器：支持到 IE11（Promise 需 polyfill），现代浏览器直接 ES Module。
- 授权：Apache 2.0，商用友好；只调用 ArcGIS Online 服务时受 ArcGIS 服务条款 约束。
- 渲染：完全复用 Leaflet 的 SVG/Canvas 渲染管线，不额外起 Canvas，性能=原生 Leaflet。
- 5 分钟上手
① 引包（CDN 最快，也可 npm i esri-leaflet）
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"></script>
② 一张图 + 一个要素层（纽约市 311 投诉示例）
const map = L.map('map').setView([40.712, -74.227], 10);
// 1. 底图
L.esri.basemapLayer('Streets').addTo(map);
// 2. 要素服务
L.esri.featureLayer({
url: 'https://services.arcgis.com/.../311_Incidents/FeatureServer/0',
where: "complaint_type = 'Noise'",
pointToLayer (geo, latlng) {
return L.circleMarker(latlng, { color: '#f00', radius: 4 });
}
}).addTo(map);
页面保存→双击打开，就能看到只显示“噪音投诉”的红点，Popup 自动带属性。
- 常用插件清单（官方维护）
| 名称 | 作用 |
|---|---|
| esri-leaflet-geocoder | 地址搜索、反向地理编码 |
| esri-leaflet-heatmap | 把 FeatureLayer 直接画成热力图 |
| esri-leaflet-cluster | 与 Leaflet.markercluster 打通，自动聚类 |
| esri-leaflet-renderers | 自动读取 ArcGIS 服务里配置的符号样式，零代码还原桌面效果 |
| esri-leaflet-gp | 调用 ArcGIS Server 地理处理（GP）模型，如缓冲区、视域分析 |
- 性能与最佳实践
- 大数据：>10 000 要素请开“聚类”或“热力”，或改用
tiledMapLayer让服务器渲染。 - 移动端：开启
renderer: L.canvas()并给图层加simplifyFactor减少节点。 - 编辑：需要在线编辑时，再引入
esri-leaflet-edit；只读场景别给自己加戏。 - 跨域：ArcGIS Server 10.3 以下没开 CORS 时，在
L.esri.get里加proxy: '/proxy.ashx'。
- 与 ArcGIS JS API 怎么选
| 需求 | 建议方案 |
|---|---|
| 只想叠地图、查点、画 popup | Esri-Leaflet 足够，包小、上手快 |
| 要做 WebScene、三维、网络分析、复杂编辑 | 直接上 ArcGIS Maps SDK for JavaScript 4.x |
| 团队已全是 Leaflet 插件生态 | 用 Esri-Leaflet 继续堆插件，别换栈 |
- 学习资源（全部免费）
- 官方文档/示例：esri.github.io/esri-leafle…
- 中文快速入门（CSDN）：含底图、要素、查询、聚类完整代码
- GitHub 仓库：github.com/Esri/esri-l… 一站打尽）
- 视频教程：B 站搜索“Esri-Leaflet 快速上手”，30 分钟跟做完成“地图+搜索+缓冲区”。
- 结语
如果你已经会 Leaflet，Esri-Leaflet 就像给你手里的瑞士军刀再开一层“ArcGIS”刀片——
一样轻，却瞬间拥有了企业级空间数据、全球底图与专业分析能力。
