Vue3+Cesium—第二章 地图与地形的加载

2.1 加载Cesium内置地图

    Cesium提供了一些地图资源，可以根据项目需求进行引用。

    1、注册登录Cesium账号

    2、选择"Asset Depot"

        这里属于Imagary类型的都是地图资源，想使用可以点击对应地图的"+"图标，添加到自己的资源库里。

    3、选择"My Asset"

        这里就是自己的资源库了，在"Asset Depot"添加的资源都会来到这里，选中资源在右侧会显示对应的代码，我们可以把他们复制到自己的工程里即可使用。

2.2 接入开源地图

    Cesium不仅自带了一些地图的风格，它还提供了一些API方法，方便我们去接入比较常用的开源地图。这里简单介绍一下接入百度地图、高德地图以及天地图的案例。

    注意：接入开源地图的时候，一定要设置Cesium实例的baseLayerPicker属性为false，也就是禁用Cesium地图和地形的选择面板，否则会影响开源地图的加载。

const viewer = new Cesium.Viewer('cesiumContainer', {
  baseLayerPicker: false,
});

2.2.1 接入天地图

    Cesium接入天地图是比较简单的，调用Cesium提供的WebMapTileServiceImageryProvider方法，传入天地图瓦片请求的url即可，这里是需要提供天地图的tk。关于天地图的tk获取，可以参考以下步骤：

    1、访问天地图官网：www.tianditu.gov.cn/

    2、注册登录天地图帐号

    3、进入导航栏的"开发资源"

    4、进入右上角的"控制台"

    5、创建新应用

        创建完新应用，它会生成一个tk，把这个tk复制到下面的代码里即可使用。

    以下是Cesium对接天地图的代码：

const tdtKey = 天地图token;
// 加载天地图影像底图
const tdtBasicLayer = new Cesium.ImageryLayer(new Cesium.WebMapTileServiceImageryProvider({
  url: `http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${tdtKey}`,
  layer: "tdtBasicLayer",
  style: "default",
  format: "image/jpeg",
  tileMatrixSetID: "GoogleMapsCompatible",
}));

// 加载天地图影像地理标签
const tdtLabelLayer = new Cesium.ImageryLayer(new Cesium.WebMapTileServiceImageryProvider({
  url: `http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${天地图token}`,
  layer: "tdtAnnoLayer",
  style: "default",
  format: "image/jpeg",
  tileMatrixSetID: "GoogleMapsCompatible",
}));

viewer.imageryLayers.add(tdtBasicLayer);
viewer.imageryLayers.add(tdtLabelLayer);

2.2.2 接入高德地图

    接入高德地图比天地图更简单，连地图的token都不需要，直接传入高德提供的影像地址即可：

/** 加载高德地图 */
// 加载高德影像底图
const gdBasicLayer = new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
  url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
  style: 'default',
  format: 'image/png',
  tileMatrixSetID: 'GoogleMapsCompatible',
}));

// 加载高德地图影像地理标签
const gdLabelLayer = new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
  url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
  style: 'default',
  format: 'image/jpeg',
  tileMatrixSetID: 'GoogleMapsCompatible',
}));

viewer.imageryLayers.add(gdBasicLayer);
viewer.imageryLayers.add(gdLabelLayer);

2.2.3 接入百度地图

    接入百度地图相对比较复杂的，它需要自己手动定义好关于百度地图的各种参数才能够使用。

/** 加载百度地图 */
function BaiduImageryProvider(options) {
  this._errorEvent = new Cesium.Event();
  this._tileWidth = 256;
  this._tileHeight = 256;
  this._maximumLevel = 18;
  this._minimumLevel = 1;
  var southwestInMeters = new Cesium.Cartesian2(-33554054, -33746824);
  var northeastInMeters = new Cesium.Cartesian2(33554054, 33746824);
  this._tilingScheme = new Cesium.WebMercatorTilingScheme({
    rectangleSouthwestInMeters: southwestInMeters,
    rectangleNortheastInMeters: northeastInMeters
  });
  this._rectangle = this._tilingScheme.rectangle;
  var resource = Cesium.Resource.createIfNeeded(options.url);
  this._resource = resource;
  this._tileDiscardPolicy = undefined;
  this._credit = undefined;
  this._readyPromise = undefined;
}
 
Object.defineProperties(BaiduImageryProvider.prototype, {
  url: {
    get: function () {
      return this._resource.url;
    }
  },
  proxy: {
    get: function () {
      return this._resource.proxy;
    }
  },
  tileWidth: {
    get: function () {
      if (!this.ready) {
        throw new Cesium.DeveloperError('tileWidth must not be called before the imagery provider is ready.');
      }
      return this._tileWidth;
    }
  },
  tileHeight: {
    get: function () {
      if (!this.ready) {
        throw new Cesium.DeveloperError('tileHeight must not be called before the imagery provider is ready.');
      }
      return this._tileHeight;
    }
  },
  maximumLevel: {
    get: function () {
      if (!this.ready) {
        throw new Cesium.DeveloperError('maximumLevel must not be called before the imagery provider is ready.');
      }
      return this._maximumLevel;
    }
  },
  minimumLevel: {
    get: function () {
      if (!this.ready) {
        throw new Cesium.DeveloperError('minimumLevel must not be called before the imagery provider is ready.');
      }
      return this._minimumLevel;
    }
  },
  tilingScheme: {
    get: function () {
      if (!this.ready) {
        throw new Cesium.DeveloperError('tilingScheme must not be called before the imagery provider is ready.');
      }
      return this._tilingScheme;
    }
  },
  tileDiscardPolicy: {
    get: function () {
      if (!this.ready) {
        throw new Cesium.DeveloperError('tileDiscardPolicy must not be called before the imagery provider is ready.');
      }
      return this._tileDiscardPolicy;
    }
  },
  rectangle: {
    get: function () {
      if (!this.ready) {
        throw new Cesium.DeveloperError('rectangle must not be called before the imagery provider is ready.');
      }
      return this._rectangle;
    }
  },
  errorEvent: {
    get: function () {
      return this._errorEvent;
    }
  },
  ready: {
    get: function () {
      return this._resource;
    }
  },
  readyPromise: {
    get: function () {
      return this._readyPromise;
    }
  },
  credit: {
    get: function () {
      if (!this.ready) {
        throw new Cesium.DeveloperError('credit must not be called before the imagery provider is ready.');
      }
      return this._credit;
    }
  },
});

BaiduImageryProvider.prototype.requestImage = function (x, y, level, request) {
  var r = this._tilingScheme.getNumberOfXTilesAtLevel(level);
  var c = this._tilingScheme.getNumberOfYTilesAtLevel(level);
  var s = this.url.replace("{x}", x - r / 2).replace("{y}", c / 2 - y - 1).replace("{z}", level).replace("{s}", Math.floor(10 * Math.random()));
  return Cesium.ImageryProvider.loadImage(this, s);
};

const bdBasicLayer = new Cesium.ImageryLayer(new BaiduImageryProvider({
  url: "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
}));
viewer.imageryLayers.add(bdBasicLayer);