只修改一行代码即可

1、下载所需文件

ps:如果要加载的地图正好是这几种,直接按照原作者的示例加载即可

要加载的底图与哪个坐标系一致就下载哪个文件夹,我要加载的地图坐标系是gcj02的,所以以高德地图为例


各厂家使用的坐标系
  火星坐标系(gcj02):
  		iOS 地图(其实是高德)
  		Google国内地图(.cn域名下)
  		搜搜、阿里云、高德地图、腾讯
  百度坐标系(bd09):
  		当然只有百度地图
  WGS84坐标系:
  		国际标准,谷歌国外地图、osm地图等国外的地图一般都是这个

2、下载这两个文件及CoordTransform.js


在这里插入图片描述

3、放入项目的utils里

在这里插入图片描述

4、修改AmapImageryProvider.js

const IMG_URL =
  //高德地图瓦片地图地址,
  // 'https://webst{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
  //---主要修改的--------------------------------------------------------要加载的地图地址
  process.env.VUE_APP_BGMAP_URL

const ELEC_URL =
  'https://webrd{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'

const CVA_URL =
  'https://webst{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'

class AmapImageryProvider extends Cesium.UrlTemplateImageryProvider {
  constructor(options = {}) {
    options['url'] =
      options.style === 'img'
        ? IMG_URL
        : options.style === 'cva'
        ? CVA_URL
        : ELEC_URL
    if (!options.subdomains || !options.subdomains.length) {
      options['subdomains'] = ['01', '02', '03', '04']
    }
    if (options.crs === 'WGS84') {
      options['tilingScheme'] = new AmapMercatorTilingScheme()
    }
    super(options)
  }
}

export default AmapImageryProvider

5、调用

        var options = {
          style: 'img', // style: img、elec、cva
          crs: 'WGS84' // 使用84坐标系
        }
        //按自己实际路径修改
        let tip=require("../transfer/amap/AmapImageryProvider")
        this._viewer.imageryLayers.addImageryProvider(new tip.AmapImageryProvider(options))

参考链接:
基于Cesium使高德地图、百度地图、腾讯地图与天地图无偏移叠加
cesium-map
coordtransform 坐标转换

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐