PolarMap.js在 Leaflet 中接入 ArcticWebMap 北极极地投影瓦片服务【免费下载链接】Leaflet JavaScript library for mobile-friendly interactive maps 项目地址: https://gitcode.com/gh_mirrors/le/Leaflet导读PolarMap.js 是一个专为 Leaflet 设计的 JavaScript 插件核心能力是把 ArcticWebMap 提供的免费极地瓦片接入 Leaflet 地图。ArcticWebMap 是一个包含 OSMOpenStreetMap数据的免费瓦片提供方其瓦片基于多种北极极地投影Arctic polar projections而非 Web 地图通用的 Web MercatorEPSG:3857因此无法直接使用 Leaflet 内置的L.tileLayer正常叠加。PolarMap.js 通过自定义坐标参考系CRS与瓦片地址封装解决了这一难题并额外暴露了底层 API方便与其他 Leaflet 插件进行更深度的集成。阅读本文后你将掌握ArcticWebMap 瓦片服务的接入方式、如何在 Leaflet 中处理非 Web Mercator 投影的底图、PolarMap.js 低层 API 的适用场景以及结合 Leaflet 源码理解 CRS 机制的原理性知识。本文基于当前仓库中 polarmap-js.md 插件索引文档展开并从 Leaflet 源码 出发补充原理说明。原插件仓库为 GeoSensorWeb Lab 维护的开源项目当前仓库仅收录其索引条目。插件概览与定位PolarMap.js 是 Leaflet 插件生态中 basemap-providers底图提供方分类下的一个条目在仓库中的元信息如下字段内容插件名称PolarMap.js分类basemap-providers底图提供方作者GeoSensorWeb Lab官方仓库https://github.com/GeoSensorWebLab/polarmap.js兼容性Leaflet 1.x 兼容compatible-v1: true2.x 标记为compatible-v2: false瓦片服务ArcticWebMaphttps://webmap.arcticconnect.ca/从 template.md 可以看出这类.md文件是 Leaflet 官方插件目录plugins.md中的索引条目字段compatible-v1/compatible-v2用于标注插件在 Leaflet 1.x 与 2.x 下的兼容状态。PolarMap.js 明确标注仅兼容 Leaflet 1.x在当前仓库所代表的 Leaflet 2.x 分支下未被验证这是选用该插件时首先要确认的约束条件。核心能力一句话概括展示 ArcticWebMap 瓦片直接渲染北极地区的 OSM 数据瓦片多极地投影支持瓦片基于多种北极极地投影生成而非 Web Mercator免费开放ArcticWebMap 是一个免费的瓦片提供方低层 API提供更细粒度的接口便于与其他 Leaflet 插件深度集成例如叠加自定义要素、接入其他渲染层。为什么极地投影的瓦片不能直接用L.tileLayerWeb 地图生态中绝大多数瓦片OSM、Google、Esri 等使用EPSG:3857 / Web Mercator投影。Leaflet 默认的crs选项就是 EPSG3857这一点在 Map.js 的选项注释中写得很清楚// option crs: CRS EPSG3857 // The [Coordinate Reference System](#crs) to use. Dont change this if youre not而 CRS.js 中的核心抽象决定了瓦片能否正确对齐latLngToPoint(latlng, zoom)把经纬度投影为像素坐标pointToLatLng(point, zoom)把像素坐标反算回经纬度scale(zoom)返回256 * 2^zoom的缩放比例getProjectedBounds(zoom)返回投影后在某一 zoom 下的边界用于计算瓦片范围。当瓦片服务使用极地投影如北极地区的兰勃特正形圆锥投影、极地方位投影等时经纬度到像素坐标的换算规则与 Web Mercator 完全不同。若仍让 Leaflet 按EPSG3857计算瓦片网格瓦片将错位、变形甚至无法覆盖地图视口。这正是 PolarMap.js 存在的意义为 ArcticWebMap 提供配套的自定义 CRS 与瓦片地址生成逻辑。如何在 Leaflet 中接入 PolarMap.jsPolarMap.js 属于 Leaflet 1.x 生态插件接入方式与常规 Leaflet 插件一致引入 Leaflet 1.x 的 CSS 与 JS引入 PolarMap.js 脚本使用插件暴露的瓦片图层类创建底图图层并配置对应 CRS。由于原索引文档并未给出可复制的完整代码以下代码基于插件定位与 Leaflet 1.x 通用接入模式给出参考骨架实际类名与选项以 官方仓库 为准link relstylesheet hrefhttps://unpkg.com/leaflet1.9.4/dist/leaflet.css / script srchttps://unpkg.com/leaflet1.9.4/dist/leaflet.js/script script srcpolarmap.js/script div idmap stylewidth: 800px; height: 600px;/div script var map L.map(map, { crs: PolarMap.CRS, // 使用插件提供的北极投影 CRS minZoom: 1, maxZoom: 7, center: [80, 0], zoom: 3 }); PolarMap.tileLayer().addTo(map); /script关键点说明crs选项必须替换极地瓦片必须搭配插件提供的自定义 CRS否则 Leaflet 默认的 EPSG3857 会让瓦片错位缩放范围ArcticWebMap 的可用缩放级别有限通常为 1–7 左右需要按实际服务范围设置minZoom/maxZoom中心点与初始视野北极地区的合理初始中心约在[80, 0]附近实际取值以服务覆盖范围为准。底层 API与其它 Leaflet 插件深度集成原文档明确指出 PolarMap.js 还包含lower-level API低层 API用于与其他 Leaflet 插件进行更深度的集成。这意味着你不仅仅可以把 ArcticWebMap 当作一个黑盒底图还可以在自定义 CRS 之上叠加使用L.marker、L.polyline、L.geoJSON等矢量图层接入其他依赖自定义投影的插件如 Proj4Leaflet 这类 Proj4js 集成方案让第三方插件在极地投影坐标系下正确完成坐标换算与交互。低层 API 的典型使用形态参考性骨架// 直接使用插件暴露的 CRS / 坐标换算工具 var projected PolarMap.project([80, 0]); // 经纬度 - 投影坐标 var latlng PolarMap.unproject(projected); // 投影坐标 - 经纬度 // 在极地投影地图上叠加矢量要素 L.marker([82, 30]).addTo(map); L.polyline([[75, -30], [85, 20]]).addTo(map);需要说明的是Leaflet 本身的矢量图层marker、path、GeoJSON 等的定位都会经由Map.options.crs完成经纬度与像素的换算参见 Map.js 中latLngToPoint/pointToLatLng的调用。因此只要crs换成 PolarMap.js 提供的极地投影实现矢量要素就能自动跟随正确投影对齐到北极地图上这是低层 API Leaflet 原生图层协同工作的原理基础。结合 Leaflet 源码理解 CRS 机制PolarMap.js 的工作方式本质上是实现了 Leaflet 的 CRS 抽象接口。在 CRS.js 中一个 CRS 需要提供方法/属性作用对应实现projection经纬度 - 投影坐标如 SphericalMercatortransformation投影坐标 - 像素坐标的仿射变换如 EPSG3857.js 中的 TransformationlatLngToPoint/pointToLatLng经纬度与像素坐标互转CRS 基类提供默认实现scale/zoomzoom 与比例因子互转默认256 * 2^zoomgetProjectedBounds计算瓦片覆盖范围供瓦片网格计算使用Leaflet 内置的 CRS 有 EPSG3857、EPSG4326、EPSG3395、SimpleCRS 等见 src/geo/crs/index.js它们都实现了同一套接口。PolarMap.js 需要做的就是针对 ArcticWebMap 的极地投影实现一套新的 projection 与 transformation然后把它作为crs传给L.map。这也解释了为什么 PolarMap.js 标注compatible-v1: true而compatible-v2: falseLeaflet 2.x 对 CRS 抽象与瓦片图层内部结构做了调整当前仓库src/即为 2.x 演进中的源码插件的 CRS 实现未必能在新架构下直接工作选用前务必确认目标 Leaflet 版本。使用限制与注意事项版本兼容PolarMap.js 仅标注兼容 Leaflet 1.xcompatible-v1: true在 Leaflet 2.x 下未经验证接入前请锁定 Leaflet 1.x 版本投影差异瓦片基于北极极地投影地图的经纬度网格、比例尺与常规 Mercator 地图差异明显交互体验需自行验证服务范围ArcticWebMap 主要覆盖北极地区其他区域请使用常规底图提供方参见同类条目如 leaflet-providers、Leaflet.ChineseTmsProviders缩放级别可用 zoom 级别受瓦片服务限制设置超出范围的 zoom 会得到空瓦片或错误瓦片瓦片服务可用性作为免费第三方瓦片服务其稳定性、加载速度与使用条款需在使用前查阅 ArcticWebMap 官方说明。延伸阅读Leaflet CRS 完整接口src/geo/crs/CRS.js默认 CRS 实现src/geo/crs/EPSG3857.js、src/geo/crs/EPSG4326.js、src/geo/crs/SimpleCRS.jsMap 的 crs 选项与坐标换算调用src/map/Map.js其他底图提供方插件索引leaflet-providers、L.TileLayer.HERE处理任意投影的姊妹方案Proj4LeafletLeaflet 插件编写指南PLUGIN-GUIDE.md【免费下载链接】Leaflet JavaScript library for mobile-friendly interactive maps 项目地址: https://gitcode.com/gh_mirrors/le/Leaflet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 PolarMap.js：在 Leaflet 中接入 ArcticWebMap 北极极地投影瓦片服务
PolarMap.js在 Leaflet 中接入 ArcticWebMap 北极极地投影瓦片服务【免费下载链接】Leaflet JavaScript library for mobile-friendly interactive maps 项目地址: https://gitcode.com/gh_mirrors/le/Leaflet导读PolarMap.js 是一个专为 Leaflet 设计的 JavaScript 插件核心能力是把 ArcticWebMap 提供的免费极地瓦片接入 Leaflet 地图。ArcticWebMap 是一个包含 OSMOpenStreetMap数据的免费瓦片提供方其瓦片基于多种北极极地投影Arctic polar projections而非 Web 地图通用的 Web MercatorEPSG:3857因此无法直接使用 Leaflet 内置的L.tileLayer正常叠加。PolarMap.js 通过自定义坐标参考系CRS与瓦片地址封装解决了这一难题并额外暴露了底层 API方便与其他 Leaflet 插件进行更深度的集成。阅读本文后你将掌握ArcticWebMap 瓦片服务的接入方式、如何在 Leaflet 中处理非 Web Mercator 投影的底图、PolarMap.js 低层 API 的适用场景以及结合 Leaflet 源码理解 CRS 机制的原理性知识。本文基于当前仓库中 polarmap-js.md 插件索引文档展开并从 Leaflet 源码 出发补充原理说明。原插件仓库为 GeoSensorWeb Lab 维护的开源项目当前仓库仅收录其索引条目。插件概览与定位PolarMap.js 是 Leaflet 插件生态中 basemap-providers底图提供方分类下的一个条目在仓库中的元信息如下字段内容插件名称PolarMap.js分类basemap-providers底图提供方作者GeoSensorWeb Lab官方仓库https://github.com/GeoSensorWebLab/polarmap.js兼容性Leaflet 1.x 兼容compatible-v1: true2.x 标记为compatible-v2: false瓦片服务ArcticWebMaphttps://webmap.arcticconnect.ca/从 template.md 可以看出这类.md文件是 Leaflet 官方插件目录plugins.md中的索引条目字段compatible-v1/compatible-v2用于标注插件在 Leaflet 1.x 与 2.x 下的兼容状态。PolarMap.js 明确标注仅兼容 Leaflet 1.x在当前仓库所代表的 Leaflet 2.x 分支下未被验证这是选用该插件时首先要确认的约束条件。核心能力一句话概括展示 ArcticWebMap 瓦片直接渲染北极地区的 OSM 数据瓦片多极地投影支持瓦片基于多种北极极地投影生成而非 Web Mercator免费开放ArcticWebMap 是一个免费的瓦片提供方低层 API提供更细粒度的接口便于与其他 Leaflet 插件深度集成例如叠加自定义要素、接入其他渲染层。为什么极地投影的瓦片不能直接用L.tileLayerWeb 地图生态中绝大多数瓦片OSM、Google、Esri 等使用EPSG:3857 / Web Mercator投影。Leaflet 默认的crs选项就是 EPSG3857这一点在 Map.js 的选项注释中写得很清楚// option crs: CRS EPSG3857 // The [Coordinate Reference System](#crs) to use. Dont change this if youre not而 CRS.js 中的核心抽象决定了瓦片能否正确对齐latLngToPoint(latlng, zoom)把经纬度投影为像素坐标pointToLatLng(point, zoom)把像素坐标反算回经纬度scale(zoom)返回256 * 2^zoom的缩放比例getProjectedBounds(zoom)返回投影后在某一 zoom 下的边界用于计算瓦片范围。当瓦片服务使用极地投影如北极地区的兰勃特正形圆锥投影、极地方位投影等时经纬度到像素坐标的换算规则与 Web Mercator 完全不同。若仍让 Leaflet 按EPSG3857计算瓦片网格瓦片将错位、变形甚至无法覆盖地图视口。这正是 PolarMap.js 存在的意义为 ArcticWebMap 提供配套的自定义 CRS 与瓦片地址生成逻辑。如何在 Leaflet 中接入 PolarMap.jsPolarMap.js 属于 Leaflet 1.x 生态插件接入方式与常规 Leaflet 插件一致引入 Leaflet 1.x 的 CSS 与 JS引入 PolarMap.js 脚本使用插件暴露的瓦片图层类创建底图图层并配置对应 CRS。由于原索引文档并未给出可复制的完整代码以下代码基于插件定位与 Leaflet 1.x 通用接入模式给出参考骨架实际类名与选项以 官方仓库 为准link relstylesheet hrefhttps://unpkg.com/leaflet1.9.4/dist/leaflet.css / script srchttps://unpkg.com/leaflet1.9.4/dist/leaflet.js/script script srcpolarmap.js/script div idmap stylewidth: 800px; height: 600px;/div script var map L.map(map, { crs: PolarMap.CRS, // 使用插件提供的北极投影 CRS minZoom: 1, maxZoom: 7, center: [80, 0], zoom: 3 }); PolarMap.tileLayer().addTo(map); /script关键点说明crs选项必须替换极地瓦片必须搭配插件提供的自定义 CRS否则 Leaflet 默认的 EPSG3857 会让瓦片错位缩放范围ArcticWebMap 的可用缩放级别有限通常为 1–7 左右需要按实际服务范围设置minZoom/maxZoom中心点与初始视野北极地区的合理初始中心约在[80, 0]附近实际取值以服务覆盖范围为准。底层 API与其它 Leaflet 插件深度集成原文档明确指出 PolarMap.js 还包含lower-level API低层 API用于与其他 Leaflet 插件进行更深度的集成。这意味着你不仅仅可以把 ArcticWebMap 当作一个黑盒底图还可以在自定义 CRS 之上叠加使用L.marker、L.polyline、L.geoJSON等矢量图层接入其他依赖自定义投影的插件如 Proj4Leaflet 这类 Proj4js 集成方案让第三方插件在极地投影坐标系下正确完成坐标换算与交互。低层 API 的典型使用形态参考性骨架// 直接使用插件暴露的 CRS / 坐标换算工具 var projected PolarMap.project([80, 0]); // 经纬度 - 投影坐标 var latlng PolarMap.unproject(projected); // 投影坐标 - 经纬度 // 在极地投影地图上叠加矢量要素 L.marker([82, 30]).addTo(map); L.polyline([[75, -30], [85, 20]]).addTo(map);需要说明的是Leaflet 本身的矢量图层marker、path、GeoJSON 等的定位都会经由Map.options.crs完成经纬度与像素的换算参见 Map.js 中latLngToPoint/pointToLatLng的调用。因此只要crs换成 PolarMap.js 提供的极地投影实现矢量要素就能自动跟随正确投影对齐到北极地图上这是低层 API Leaflet 原生图层协同工作的原理基础。结合 Leaflet 源码理解 CRS 机制PolarMap.js 的工作方式本质上是实现了 Leaflet 的 CRS 抽象接口。在 CRS.js 中一个 CRS 需要提供方法/属性作用对应实现projection经纬度 - 投影坐标如 SphericalMercatortransformation投影坐标 - 像素坐标的仿射变换如 EPSG3857.js 中的 TransformationlatLngToPoint/pointToLatLng经纬度与像素坐标互转CRS 基类提供默认实现scale/zoomzoom 与比例因子互转默认256 * 2^zoomgetProjectedBounds计算瓦片覆盖范围供瓦片网格计算使用Leaflet 内置的 CRS 有 EPSG3857、EPSG4326、EPSG3395、SimpleCRS 等见 src/geo/crs/index.js它们都实现了同一套接口。PolarMap.js 需要做的就是针对 ArcticWebMap 的极地投影实现一套新的 projection 与 transformation然后把它作为crs传给L.map。这也解释了为什么 PolarMap.js 标注compatible-v1: true而compatible-v2: falseLeaflet 2.x 对 CRS 抽象与瓦片图层内部结构做了调整当前仓库src/即为 2.x 演进中的源码插件的 CRS 实现未必能在新架构下直接工作选用前务必确认目标 Leaflet 版本。使用限制与注意事项版本兼容PolarMap.js 仅标注兼容 Leaflet 1.xcompatible-v1: true在 Leaflet 2.x 下未经验证接入前请锁定 Leaflet 1.x 版本投影差异瓦片基于北极极地投影地图的经纬度网格、比例尺与常规 Mercator 地图差异明显交互体验需自行验证服务范围ArcticWebMap 主要覆盖北极地区其他区域请使用常规底图提供方参见同类条目如 leaflet-providers、Leaflet.ChineseTmsProviders缩放级别可用 zoom 级别受瓦片服务限制设置超出范围的 zoom 会得到空瓦片或错误瓦片瓦片服务可用性作为免费第三方瓦片服务其稳定性、加载速度与使用条款需在使用前查阅 ArcticWebMap 官方说明。延伸阅读Leaflet CRS 完整接口src/geo/crs/CRS.js默认 CRS 实现src/geo/crs/EPSG3857.js、src/geo/crs/EPSG4326.js、src/geo/crs/SimpleCRS.jsMap 的 crs 选项与坐标换算调用src/map/Map.js其他底图提供方插件索引leaflet-providers、L.TileLayer.HERE处理任意投影的姊妹方案Proj4LeafletLeaflet 插件编写指南PLUGIN-GUIDE.md【免费下载链接】Leaflet JavaScript library for mobile-friendly interactive maps 项目地址: https://gitcode.com/gh_mirrors/le/Leaflet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考