基於cesuim框架開發接入線上天地圖服務（特別全的）
阿新 • • 發佈：2019-01-11
1、首先理解線上天地圖服務的兩種座標系；
（1）經緯度座標；
（2）墨卡託投影座標；
2、其實經緯度座標與墨卡託投影座標的差別，你只需記住經緯度座標是球面座標，墨卡託投影座標是平面座標；
3、還需要注意：Cesium大多是預設Provider是按照墨卡託投影的，所以你要用經緯度的天地圖服務需要進行一定的配置；
4、cesuim中新增經緯度座標下的天地圖服務：
（1）需要在建立Provider時需要同時構建tilingScheme，指定其為經緯度座標系；
（2）需要配置tileMatrixLabels，因為level是從1開始（而不是0），所以需要指定每一層級的索引號（由於天地圖最大層級為18級，所以在配置tileMatrixLabels的時候，配滿18級即可）。
5、 建立天地圖不麻煩，但如何更好的建立呢？
（1）輪詢機制，我們知道天地圖提供了’t0’,‘t1’,‘t2’,‘t3’,‘t4’,‘t5’,‘t6’,'t7’8個域名，服務端TCP最大連結數是有限制的，輪詢機制下瓦片下載的速度更有保證；
（2）利用Cesium提供了subdomains的屬性，把url按照format的方式來指定引數 ，配置一下天地圖的URL就可以實現了；
6、輪詢機制配置的天地圖URL，參照以下程式碼，親測有效：
var URL_CONFIG={ TDT_IMG_W:"http://{s}.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" //線上天地圖影像服務地址(墨卡託投影) ,TDT_VEC_W:"http://{s}.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default&format=tiles" //線上天地圖向量地圖服務(墨卡託投影) ,TDT_CIA_W:"http://{s}.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.jpg" //線上天地圖影像中文標記服務(墨卡託投影) ,TDT_CVA_W:"http://{s}.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default.jpg" //線上天地圖向量中文標記服務(墨卡託投影) ,TDT_IMG_C:"http://{s}.tianditu.com/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default&format=tiles" //線上天地圖影像服務地址(經緯度) ,TDT_VEC_C:"http://{s}.tianditu.com/vec_c/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=vec&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default&format=tiles" //線上天地圖向量地圖服務(經緯度) ,TDT_CIA_C:"http://{s}.tianditu.com/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default&format=tiles" //線上天地圖影像中文標記服務(經緯度) ,TDT_CVA_C:"http://{s}.tianditu.com/cva_c/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=cva&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default&format=tiles" //線上天地圖向量中文標記服務(經緯度) };
7、cesuim天地圖服務接入程式碼：
var viewerObj = new Cesium.Viewer('cesiumContainer', { selectionIndicator: false, animation: false, //是否顯示動畫控制元件 baseLayerPicker: false, //是否顯示圖層選擇控制元件 geocoder: false, //是否顯示地名查詢控制元件 timeline: false, //是否顯示時間線控制元件 sceneModePicker: true, //是否顯示投影方式控制元件 navigationHelpButton: false, //是否顯示幫助資訊控制元件 infoBox: false, //是否顯示點選要素之後顯示的資訊 fullscreenButton:true, //天地圖影像服務（經緯度） imageryProvider:new Cesium.WebMapTileServiceImageryProvider({ url: URL_CONFIG.TDT_IMG_C, layer: "tdtImg_c", style: "default", format: "tiles", tileMatrixSetID: "c", subdomains:["t0","t1","t2","t3","t4","t5","t6","t7"], tilingScheme:new Cesium.GeographicTilingScheme(), tileMatrixLabels:["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19"], maximumLevel:18, show: false }) }); //設定初始位置 viewerObj.camera.setView( { destination: Cesium.Cartesian3.fromDegrees(118.63854163, 32.04047801, 1000) } ); //呼叫設定天地圖函式 //setOnlineMap.setTdt(); });
8、cesuim疊加多圖層程式碼：
//天地圖影像中文標記服務（經緯度）
var tdtCva=new Cesium.WebMapTileServiceImageryProvider({
url: URL_CONFIG.TDT_CIA_C,
layer: "tdtCva",
style: "default",
format: "tiles",
tileMatrixSetID: "c",
subdomains:["t0","t1","t2","t3","t4","t5","t6","t7"],
tilingScheme:new Cesium.GeographicTilingScheme(),
tileMatrixLabels:["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19"],
maximumLevel:18,
show: false
});
var layers = viewerObj.imageryLayers;
layers.addImageryProvider(tdtCva);
好的整理完成。