@vuemap/amap-xyz-layer

示例

codepen示例

简介

本项目为高德地图的自定义加载瓦片插件，支持瓦片纠偏，可以加载WGS84、gcj02、bd09三种坐标系瓦片。项目基于：https://github.com/gisarmory/mapboxgl.InternetMapCorrection/tree/main/src 进行改造。

加载方式

当前项目支持CDN加载和npm加载两种方式。

CDN加载

CDN加载需要先加载高德地图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加载可以直接使用安装库

npm install @vuemap/amap-xyz-layer

使用示例

CDN方式

<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方式

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说明

自定义瓦片图层 new AMap.CustomXyzLayer(map: AMap.Map, options)

参数说明

map: 地图实例对象 options: 自定义瓦片图层的参数

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[][][][] | 获取掩膜数据 |

事件列表

暂无事件

| 事件名 | 参数 | 描述 | | ---- | ---- | ---- |