首页 / Leaflet / 使用示例
坐标拾取
鼠标移动时实时读出经纬度、Web 墨卡托米制坐标与容器像素,点击可落点并复制。
源码与运行效果
说明
坐标来自 mousemove 事件对象的三个字段:latlng 是
WGS84 经纬度,containerPoint 是相对地图容器的像素位置。
墨卡托坐标则由 map.project(latlng, zoom) 现算,
返回值单位为米,等价于 EPSG:3857。
落点用带常驻 tooltip 的 divIcon 标记,点击标记自身即删除。
mousemove 只更新文本,不做重计算,所以不需要节流;
如果要在里面做投影换算或发请求,应当改成 throttle 包装。
| 读数 | 来源 | 用途 |
|---|---|---|
| 经纬度 | e.latlng | 入库、分享、与 GPS 设备对齐 |
| 墨卡托米制 | map.project(latlng, z) | 与 3857 数据、切片服务对接 |
| 容器像素 | e.containerPoint | 自定义叠加层定位、截图标注 |
| 缩放级别 | map.getZoom() | 换算比例尺与瓦片层级 |
| 落点集合 | layerGroup | 批量导出或生成路径 |
刻度显示的数字不是「地图中心」而是「鼠标位置」。页面关闭缩放动画
或使用 zoomSnap: 1 时,project 的结果才与瓦片编号严格对应,
否则会出现半像素偏移。