@vuemap/amap-xyz-layer
Version:
高德地图 JSAPI v2.0 自定义瓦片图层，支持瓦片纠偏，支持海拔
142 lines (121 loc) • 9.19 kB
Markdown
# @vuemap/amap-xyz-layer
[](https://www.npmjs.org/package/@vuemap/amap-xyz-layer)
[](https://npmjs.org/package/@vuemap/amap-xyz-layer)
[](https://github.com/yangyanggu/amap-xyz-layer)
[](https://github.com/yangyanggu/amap-xyz-layer)
### 示例
[codepen示例](https://codepen.io/yangyanggu/pen/vYQQwBO)
### 简介
本项目为高德地图的自定义加载瓦片插件，支持瓦片纠偏，可以加载`WGS84`、`gcj02`、`bd09`三种坐标系瓦片。项目基于：https://github.com/gisarmory/mapboxgl.InternetMapCorrection/tree/main/src 进行改造。
### 加载方式
当前项目支持CDN加载和npm加载两种方式。
#### CDN加载
CDN加载需要先加载高德地图JS，代码如下
```js
<!--加载高德地图JS 2.0 -->
<script src = 'https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY'></script>
<!--加载自定义瓦片插件 -->
<script src="https://cdn.jsdelivr.net/npm/@vuemap/amap-xyz-layer/dist/index.js"></script>
```
#### npm加载
npm加载可以直接使用安装库
```shell
npm install @vuemap/amap-xyz-layer
```
### 使用示例
#### CDN方式
```js
<script src = 'https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY'></script>
<script src="https://cdn.jsdelivr.net/npm/@vuemap/amap-xyz-layer/dist/index.js"></script>
<script type="text/javascript">
const center = [116.335036, 39.900082];
const map = new AMap.Map(app', {
center: center,
zoom: 10,
viewMode: '3D',
pitch: 35,
});
const gaodeLayer = new AMap.CustomXyzLayer(map, {
url: 'https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
subdomains: ["1", "2", "3", "4"]
})
const tiandituLayer = new AMap.CustomXyzLayer(map, {
url: 'http://t{s}.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=xxxx',
subdomains: ["1", "2", "3", "4"],
proj: 'wgs84'
})
const baiduLayer = new AMap.CustomXyzLayer(map, {
url: 'https://maponline{s}.bdimg.com/starpic/?qt=satepc&u=x={x};y={y};z={z};v=009;type=sate&fm=46',
subdomains: ["1", "2", "3"],
proj: 'bd09',
tileType: 'bd09'
})
</script>
```
#### npm方式
```js
import {CustomXyzLayer} from '@vuemap/amap-xyz-layer'
const map = new AMap.Map('app', {
center: [120,31],
zoom: 14,
viewMode: '3D',
pitch: 35,
})
const gaodeLayer = new CustomXyzLayer(map, {
url: 'https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
subdomains: ["1", "2", "3", "4"]
})
const tiandituLayer = new CustomXyzLayer(map, {
url: 'http://t{s}.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=xxxx',
subdomains: ["1", "2", "3", "4"],
proj: 'wgs84'
})
const baiduLayer = new CustomXyzLayer(map, {
url: 'https://maponline{s}.bdimg.com/starpic/?qt=satepc&u=x={x};y={y};z={z};v=009;type=sate&fm=46',
subdomains: ["1", "2", "3"],
proj: 'bd09',
tileType: 'bd09'
})
```
### API文档说明
#### CustomXyzLayer说明
自定义瓦片图层<br/>
`` new AMap.CustomXyzLayer(map: AMap.Map, options) ``<br/>
###### 参数说明
map: 地图实例对象<br/>
options: 自定义瓦片图层的参数 <br/>
###### options参数说明
| 属性名 | 属性类型 | 属性描述 |
|-------------|------------------------------------------------|----------------------------------------------------------------------------------------------------|
| url | string | 瓦片地址，支持 {s} {x} {y} {z}，示例：`http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}` |
| subdomains | string[] | 子域名数组，当url中设置{s}后，该属性必填 |
| tileType | 'xyz' \| 'bd09' | 瓦片分割类型，默认是`xyz`，xyz代表瓦片是编号是从左上角开始，百度瓦片是由中间开始，所以需要区分普通瓦片还是百度 |
| proj | 'wgs84' \| 'gcj02' \| 'bd09' | 瓦片使用的坐标系，默认是`gcj02` |
| zooms | [number,number] | 图层缩放等级范围，默认 [2, 18] |
| opacity | number | 图层透明度，默认为 1 |
| visible | boolean | 图层是否可见，默认为 true |
| zIndex | number | 图层的层级，默认为 120 |
| debug | boolean | 开启debug后瓦片上将显示瓦片编号 |
| mask | number[][] \| number[][][] \| number[][][][] | 瓦片掩膜，数据结构与AMap.Map的mask参数一致 |
| cacheSize | number | 瓦片缓存数量，默认-1，不限制缓存瓦片数 |
| tileMaxZoom | number | 瓦片在服务器的最大层级，当地图zoom超过该层级后直接使用该层级作为做大层级瓦片，默认18 |
| altitude | number | 加载的瓦片海拔，设置该值后，在3D模式下瓦片将浮空，默认：0 |
###### 成员函数
| 函数名 | 入参 | 返回值 | 描述 |
|------------|-------------------------------------------------------------|-------------------------------------------------------------|------------------------------|
| show | 无 | 无 | 显示图层 |
| hide | 无 | 无 | 隐藏图层 |
| getzIndex | 无 | number | 获取图层层级 |
| setzIndex | number | 无 | 设置图层层级 |
| getOpacity | 无 | number | 获取图层透明度 |
| setOpacity | number | 无 | 设置图层透明度 |
| getZooms | 无 | [number, number] | 获取图层的显示层级 |
| setZooms | [number, number] | 无 | 设置图层显示层级 |
| destroy | 无 | 无 | 销毁图层，自动从地图上移除图层 |
| setMask | undefined \| number[][] \| number[][][] \| number[][][][] | 无 | 设置掩膜，可以通过传undefined删除之前设置的掩膜 |
| getMask | 无 | undefined \| number[][] \| number[][][] \| number[][][][] | 获取掩膜数据 |
###### 事件列表
暂无事件
| 事件名 | 参数 | 描述 |
| ---- | ---- | ---- |