Leaflet

### Leaflet.js 地图库使用指南 Leaflet.js 是一种流行且功能强大的开源 JavaScript 映射库，以其轻量级和灵活性受到广泛欢迎[^1]。以下是关于如何使用 Leaflet.js 创建交互式地图的一些核心概念和技术细节。 #### 1. 基本设置 要开始使用 Leaflet.js，首先需要引入其脚本文件以及 CSS 文件。可以通过 CDN 或下载本地版本实现： ```html <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> ``` 接着，在 HTML 中定义一个容器用于显示地图，并指定宽度和高度： ```html <div id="mapid" style="width: 600px; height: 400px;"></div> ``` 初始化地图并加载底图瓦片服务： ```javascript var map = L.map('mapid').setView([51.505, -0.09], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap contributors' }).addTo(map); ``` 上述代码展示了如何创建一个基本的地图实例，并将其定位到伦敦地区，同时加载来自 OpenStreetMap 的免费瓦片层[^2]。 #### 2. 添加标记 (Markers) 可以轻松地向地图添加标记以标注特定位置： ```javascript L.marker([51.5, -0.09]).addTo(map) .bindPopup("A pretty CSS3 popup.<br> Easily customizable.") .openPopup(); ``` 这段代码会在坐标 `[51.5, -0.09]` 处放置一个带有弹窗的标记[^3]。 #### 3. 绘制几何图形 除了简单的标记外，还可以绘制更复杂的形状，比如圆圈或多边形： ```javascript // Circle example L.circle([51.508, -0.11], { color: 'red', fillColor: '#f03', fillOpacity: 0.5, radius: 500 }).addTo(map).bindPopup("I am a circle."); // Polygon example L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047] ]).addTo(map).bindPopup("I am a polygon."); ``` 以上示例分别展示了一个红色圆形区域和一个多边形的绘制方式[^4]。 #### 4. 高度定制化路径装饰器 如果想要进一步增强地图上的线条表现形式，则可利用 `Leaflet.PolylineDecorator` 插件完成这一目标。该插件支持多种样式选项，例如虚线、箭头等: 安装插件后即可按照如下方法操作: ```javascript var polyline = L.polyline([[51.5, -0.09], [51.51, -0.1]]).addTo(map), decorator = L.polylineDecorator(polyline, {patterns: [ {offset: 10, repeat: 20, symbol: L.Symbol.dash({pixelLength: 5})} ]}).addTo(map); ``` 这会在线条上每隔一定距离生成短划线效果。 #### 5. 投影转换处理 当涉及到不同投影系统的数据集成时，可能需要用到额外的支持工具。例如 Proj4Leaflet 提供了一种解决方案来应对此类需求[^5]： ```html <script src="path/to/proj4-compressed.js"></script> <script src="path/to/proj4leaflet.js"></script> <script> var crs = new L.Proj.CRS('EPSG:3857', '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs'); </script> ``` 通过这种方式能够无缝切换至其他 CRS（Coordinate Reference System）环境下的地理空间数据分析流程之中。 ---