proj4leaflet 是一个用于将坐标转换为不同投影方式并在 Leaflet 地图中显示的 JavaScript 库。本文将详细介绍如何使用 proj4leaflet 库。
安装
使用 npm 安装 proj4leaflet：
npm install proj4leaflet
用法
首先，在项目中引入必要的库：
-- -------------------- ---- ------- ---- ------- --- --- ----- ---------------- ----------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ----------------------- ---------------------------- -- ---- ------- ---------- --- ------- --------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ----------------------- -------------------------------------- ---- ----- ---------- --- ------- ------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ----------------------- -------------------------------------- ---- ------------ ---------- --- ------- ----------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ----------------------- --------------------------------------
然后，定义地图容器：
<div id="map" style="height: 500px;"></div>
接下来，在 JavaScript 中创建地图对象：
var map = L.map('map').setView([51.505, -0.09], 13);默认情况下，Leaflet 使用 WGS84 投影方式。如果需要使用其他投影方式，可以使用 proj4leaflet 库进行转换。
例如，假设要在 EPSG:3857 投影方式下显示一个点（纬度：39.91488，经度：116.40398），则需要先定义两个投影方式：
// 定义 WGS84 投影
proj4.defs("EPSG:4326", "+proj=longlat +datum=WGS84 +no_defs");
// 定义 EPSG:3857 投影
proj4.defs("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");然后，将 WGS84 坐标转换为 EPSG:3857 坐标：
var wgs84 = L.latLng(39.91488, 116.40398);
var epsg3857 = proj4('EPSG:4326', 'EPSG:3857', [wgs84.lng, wgs84.lat]);最后，在地图上显示该点：
var marker = L.marker(L.Proj.CRS.TMS.EPSG3857.project(epsg3857)).addTo(map); > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/37257) ，转载请注明来源 [https://www.javascriptcn.com/post/37257](https://www.javascriptcn.com/post/37257)