Cesium載入各種網際網路地圖

**

Cesium載入各種網際網路地圖

**

（一）載入天地圖（載入天地圖影像地圖，WebMapTileServiceImageryProvider該介面是載入WMTS服務的介面，天地圖是典型的WMTS服務的原型）

   //初始化viewer控制元件
   	var viewer = new Cesium.Viewer('cesiumContainer',{ 
   		//需要進行視覺化的資料來源的集合
        animation: false, //是否顯示動畫控制元件
        shouldAnimate : true,
        homeButton: false, //是否顯示Home按鈕
        fullscreenButton: false, //是否顯示全屏按鈕
        baseLayerPicker: false, //是否顯示圖層選擇控制元件
        geocoder: false, //是否顯示地名查詢控制元件
        timeline: false, //是否顯示時間線控制元件
        sceneModePicker: true, //是否顯示投影方式控制元件
        navigationHelpButton: false, //是否顯示幫助資訊控制元件
        infoBox: false, //是否顯示點選要素之後顯示的資訊
        requestRenderMode: true, //啟用請求渲染模式
        scene3DOnly: false, //每個幾何例項將只能以3D渲染以節省GPU記憶體
        sceneMode: 3, //初始場景模式 1 2D模式 2 2D迴圈模式 3 3D模式  Cesium.SceneMode
		fullscreenElement: document.body, //全屏時渲染的HTML元素 暫時沒發現用處
		//載入天地圖影像地圖，WebMapTileServiceImageryProvider該介面是載入WMTS服務的介面
		imageryProvider: new Cesium.WebMapTileServiceImageryProvider({		 
		          url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=ebf64362215c081f8317203220f133eb',
		          layer:'img',
		          style:'default',
		          tileMatrixSetID:'w',
		          format:'tiles',
		          maximumLevel: 18
		      })
		});
		// 如果需要疊加路網與註記向量則新增以下程式碼
		viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
			url: 'http://t0.tianditu.gov.cn/cia_w/wmts?tk=ebf64362215c081f8317203220f133eb',
		          layer:'cia',
		          style:'default',
		          tileMatrixSetID:'w',
		          format:'tiles',
		          maximumLevel: 18
		      }))
	   //如需要其他圖層可參考一下部分（1.需要更改的部分為url的img_c||2.layer的img||3.tileMatrixSetID的c）
	   
		//影像地圖
		//(1)經緯度的影像地圖：1.img_c||2.img||3.c
		//(2)經緯度的影像註記：1.cia_c||2.cia||3.c
		//(3)墨卡託的影像地圖：1.img_w||2.img||3.w
		//(4)墨卡託的影像註記：1.img_w||2.img||3.w

		//向量地圖
		//(1)經緯度的向量地圖：1.vec_c||2.vec||3.c
		//(2)經緯度的向量註記：1.cva_c||2.cva||3.c
		//(3)墨卡託的向量地圖：1.vec_w||2.vec||3.w
		//(4)墨卡託的向量註記：1.cva_w||2.cva||3.w

（二）載入百度高德地圖（載入高德/百度影像地圖，UrlTemplateImageryProvider該介面是載入谷歌地圖或者其他網際網路地圖的介面，只需要將這段替換上面的天地圖就行）

		//載入高德/百度影像地圖，UrlTemplateImageryProvider該介面是載入谷歌地圖服務的介面
        imageryProvider : 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"
		}));

（三）還有小夥伴需要谷歌街道谷歌影像底圖，或天地圖街道，影像，地形底圖，arcgis大屏地圖的請加我 QQ657155100或者留言聯絡！

後續小編會持續更新cesium各種原始碼，特效以及其他效果或者模型載入的實現方式，還希望大家多多關注，小編也會持續更新的！

宣告：轉載請宣告出處。