###
使用 `
leaflet.ChineseTmsProviders
.js` 和 `
leaflet.mapCorrection
.js` 加载无偏移高德
地图图层
在
Leaflet 中加载高德
地图瓦片图层时，由于高德
地图使用的是 GCJ-02 坐标系，而
Leaflet 默认
使用 WGS84 坐标系，因此会出现坐标偏移问题。为了解决这一问题，可以结合 `
leaflet.ChineseTmsProviders
.js` 和 `
leaflet.mapCorrection
.js` 插件来
实现无偏移的高德
地图图层加载。
#### 安装与引入插件
首先需要安装并引入相关插件：
```bash
npm install
leaflet.chinatmsproviders
npm install
leaflet.mapcorrection
```
然后在项目中导入插件脚本文件：
```
javascript
import '
leaflet.chinatmsproviders/src/
leaflet.ChineseTmsProviders
.js';
import '
leaflet.mapcorrection/
leaflet.mapCorrection
.js';
```
#### 创建无偏移的高德
地图图层
通过 `L
.TileLayer
.ChinaProvider` 可以直接创建高德
地图的瓦片图层实例，并
设置其类型为 `'Gaode
.Normal
.Map'`：
```
javascript
const gaodeLayer = L
.tileLayer
.chinaProvider('Gaode
.Normal
.Map', {
maxZoom: 18,
minZoom: 5
});
```
#### 启用
地图纠偏功能
为了消除 GCJ-02 与 WGS84 坐标系统之间的偏移，需启用 `
leaflet.mapCorrection
.js` 提供的
地图校正功能。可以在初始化
地图时配置 `
crs`（坐标参考系统）为经过修正的
CRS 对象：
```
javascript
const corrected
CRS = new L
.Proj
.CRS('EPSG:3857', {
resolutions: [
...Array(20)]
.map((_, z) => 256 * Math
.pow(2, 18 - z)),
origin: [0, 0],
bounds: L
.bounds([0, 0], [256 * Math
.pow(2, 18), 256 * Math
.pow(2, 18)])
});
const map = L
.map('map', {
crs: corrected
CRS,
layers: [gaodeLayer]
})
.setView([39
.9042, 116
.4074], 10);
```
#### 整合
代码示例
以下是一个完整的 HTML
示例代码，展示如何整合这两个插件
实现无偏移的高德
地图显示：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Leaflet 高德
地图无偏移加载</title>
<link rel="stylesheet" href="https://unpkg
.com/
leaflet/dist/
leaflet.css" />
<style>
#map { height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg
.com/
leaflet/dist/
leaflet.js"></script>
<script src="
leaflet.chinatmsproviders/src/
leaflet.ChineseTmsProviders
.js"></script>
<script src="
leaflet.mapcorrection/
leaflet.mapCorrection
.js"></script>
<script>
const gaodeLayer = L
.tileLayer
.chinaProvider('Gaode
.Normal
.Map', {
maxZoom: 18,
minZoom: 5
});
const corrected
CRS = new L
.Proj
.CRS('EPSG:3857', {
resolutions: [
...Array(20)]
.map((_, z) => 256 * Math
.pow(2, 18 - z)),
origin: [0, 0],
bounds: L
.bounds([0, 0], [256 * Math
.pow(2, 18), 256 * Math
.pow(2, 18)])
});
const map = L
.map('map', {
crs: corrected
CRS,
layers: [gaodeLayer]
})
.setView([39
.9042, 116
.4074], 10);
</script>
</body>
</html>
```
该方法利用了 `
leaflet.ChineseTmsProviders
.js` 来简化对国内
地图服务（如高德、百度等）的调用流程，并借助 `
leaflet.mapCorrection
.js`
实现了坐标系统的校正，从而达到无偏移显示高德
地图的目的[^1]。
本文介绍了如何在GIS中使用Leaflet.js和CRS（坐标参考系统）创建全球椭圆形地图。通过引入依赖库，定义CRS实例，添加底图，以及标记点和多边形，实现了地图的展示。示例代码可供读者根据需求进行定制和扩展。
订阅专栏 解锁全文
扫一扫
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
