proj4leaflet
是一个用于将坐标转换为不同投影方式并在 Leaflet 地图中显示的 JavaScript 库。本文将详细介绍如何使用 proj4leaflet
库。
安装
使用 npm 安装 proj4leaflet
:
--- ------- ------------
用法
首先,在项目中引入必要的库:
---- ------- --- --- ----- ---------------- ----------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ----------------------- ---------------------------- -- ---- ------- ---------- --- ------- --------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ----------------------- -------------------------------------- ---- ----- ---------- --- ------- ------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ----------------------- -------------------------------------- ---- ------------ ---------- --- ------- ----------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ----------------------- --------------------------------------
然后,定义地图容器:
---- -------- -------------- --------------
接下来,在 JavaScript 中创建地图对象:
--- --- - ----------------------------- ------- ----
默认情况下,Leaflet 使用 WGS84 投影方式。如果需要使用其他投影方式,可以使用 proj4leaflet
库进行转换。
例如,假设要在 EPSG:3857 投影方式下显示一个点(纬度:39.91488,经度:116.40398),则需要先定义两个投影方式:
-- -- ----- -- ----------------------- -------------- ------------ ----------- -- -- --------- -- ----------------------- ----------- ---------- ---------- ----------- ---------- -------- ------ ------ -------- --------------- ------- -----------
然后,将 WGS84 坐标转换为 EPSG:3857 坐标:
--- ----- - ------------------ ----------- --- -------- - ------------------ ------------ ----------- ------------
最后,在地图上显示该点:
--- ------ - --------------------------------------------------------------- ----------------------------------------------------------- ---------- ---------------------------------------------------------------------------------------