cesium.js入门基础教程二 （影像和标注）

影像简介

Cesium加载大的虚拟地球默认是有影像的，如图：

默认使用的影像是 “Bing Maps Aerial”：

影像提供者 ImageryProvider

除了途中列出的一些影像，开发者可以通过Cesium中的ImagerProvider影像提供者类创建所需的影像，Cesium中提供了很多种ImageryProvider影像提供类(不包括抽象类ImageryProvider):

加载图层影像的方法

• 在初始化viwer的时候添加
• 通过viwer.imageryLayers.addImageryProvider方法添加

初始化时添加影像

在初始化Viewer时可在第二个参数Viewer.ConstructorOptions中添加imageryProvider属性并提供一个ImageryProvider对象：

const viewer = new Cesium.Viewer("cesiumContainer", {
  imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
  })
})

注意:使用这种方法添加影像图层只能添加一个

使用addImageryProvider方法添加

使用viewer.imageryLayers.addImageryProvider方法，顾名思义需要传入一个ImageryProvider对象：

const ArcGisImagery = viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
  url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
}))

影像提供者示例

由于国外的影像地图服务往往拍摄生成的年份比较早，因此很多地区的影像和实际出入较大，所以推荐使用国内的影像服务

ArcGisMapServerImageryProvider

加载Arcgis影像服务的代码如下：

const viewer = new Cesium.Viewer("cesiumContainer", {
  imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
    url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
  })
})

加载后的效果如下：

BingMapsImageryProvider

加载Bing影像服务的代码，其中key属性需要在bing maps dev center中申请，按照页面提示申请即可：

viewer.imageryProvider = new Cesium.BingMapsImageryProvider({
  url: 'https://dev.virtualearth.net',
  key: 'xxx',
  mapStyle : Cesium.BingMapsStyle.AERIAL
})

加载后的效果如下：

其他地图服务加载方式基本与例子相同。