Vue+Cesium：添加高德地图/百度地图/天地图

1.Viewer查看器控件的设置

const viewer = new Cesium.Viewer('container', {
		//地形图层
		terrain: Cesium.Terrain.fromWorldTerrain(),
		//信息窗口
		infoBox: false,
		//显示查询按钮
		// geocoder: false,
		//home按钮
		// homeButton: false,
		// 控制查看器的显示模式-地球/平面
		// sceneModePicker: false,
		// 是否显示图层选择
		baseLayerPicker: false,
		//帮助按钮
		navigationHelpButton: false,
		//播放动画
		// animation: false,
		//时间线
		// timeline: false,
		//全屏模式
		// fullscreenButton: false
	})

2 高德地图的添加

• 矢量图层

//加载高德/百度影像地图，UrlTemplateImageryProvider该接口是加载谷歌地图服务的接口
	viewer.imageryLayers.addImageryProvider(
		new Cesium.UrlTemplateImageryProvider({
			url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
			layer: 'tdtVecBasicLayer',
			style: 'default',
			format: 'image/png',
			tileMatrixSetID: 'GoogleMapsCompatible',
			show: false,
		})
	)

•  矢量注记图层

// 如果需要叠加高德/百度注记地图则添加以下代码
	viewer.imageryLayers.addImageryProvider(
		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',
			layer: 'tdtAnnoLayer',
			style: 'default',
			format: 'image/jpeg',
			tileMatrixSetID: 'GoogleMapsCompatible',
		})
	)

 3 天地图的添加

• 加载天地图影像注记图层

//影像注记
	viewer.imageryLayers.addImag