高德JS2.0瓦片纠偏图层插件发布

简介

@vuemap/amap-xyz-layer是高德地图JSAPI2.0的开源扩展插件，该插件可用于加载瓦片图层，插件支持瓦片的坐标系纠偏，当前支持`WGS84` `GCJ02` `BD09`三种坐标。

插件文档地址

配套高德vue组件库 @vuemap/vue-amap

示例地址

codepen示例

由于天地图的key每天调用量只有1W，示例中的天地图瓦片很有可能会加载不成功，可换成自己的key测试使用

使用方法

插件支持CDN加载和npm加载两种方式，使用CDN加载时会将`CustomXyzLayer`类加载到AMap命名空间下，使用npm加载时则可以直接从插件里import相应的类来处理，具体使用方式可以查看文档。

代码示例

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'
})

插件优势

插件基于`https://github.com/gisarmory/mapboxgl.InternetMapCorrection/tree/main/src`改造而成，支持主流的三种坐标系，同时可以方便的扩展额外功能。

已完成功能

• 瓦片加载
• 瓦片纠偏
• 支持AMap.GLCustomLayer所有参数
• 掩膜
• 瓦片缓存控制
• 海拔

插件效果

最后再标注一下项目地址： github链接