1、ol.layer.Tile及數據源類結構

openlayers中，圖層(layer)不可缺少的組成部分是數據源(source)，天地圖是切片的數據服務，對應的圖層是ol.layer.Tile，下圖是其數據源對應的類結構圖，紅色部分是重點內容。

從圖可以看到，加載天地圖的數據源，可以是ol.source.WMTS(簡稱WMTS) 和 ol.source.XYZ(簡稱XYZ)。下面首先以實際的代碼對分別使用WMTS和XYZ的方式加載天地圖進行說明，然后總結他們的區別。

2、WMTS的方式加載天地圖

//創建圖層(WMTS方式)

function crtLayerWMTS(type, proj, opacity){

var projection = ol.proj.get(proj);

var projectionExtent = projection.getExtent();

var size = ol.extent.getWidth(projectionExtent) / 256;

var resolutions = new Array(19);

var matrixIds = new Array(19);

for (var z = 1; z < 19; ++z) {

// generate resolutions and matrixIds arrays for this WMTS

resolutions[z] = size / Math.pow(2, z);

matrixIds[z] = z;

}

var layer = new ol.layer.Tile({

opacity: opacity,

source: new ol.source.WMTS({

attributions: 'Tiles ? 天地圖',

url: 'http://t'+Math.round(Math.random()*7)+'.tianditu.com/'+type+'/wmts',

layer: type.substr(0, 3),

matrixSet: type.substring(4),

format: 'tiles',

projection: projection,

tileGrid: new ol.tilegrid.WMTS({

origin: ol.extent.getTopLeft(projectionExtent),

resolutions: resolutions,

matrixIds: matrixIds

}),

style: 'default',

wrapX: true

})

});

layer.id = type;

return layer;

}

重要說明：

(1)天地圖有7個服務節點，代碼中沒有固定使用哪個節點的服務，而是使用 Math.round(Math.random()*7)的方式隨機決定從哪個節點請求服務，避免指定節點因故障等原因停止服務的風險。

(2)天地圖服務分經緯度和墨卡托投影兩種類型，所以url中地圖類型的投影方式應與參數 projection中保持一致(EPSG4326或EPSG3857)。

(3)天地圖切片服務共有18級，在計算分辨率時，最大計算到18級；經實驗發現，若指定到19或更高級別，放大到對應級別后，地圖出現空白。

(4)WMTS方式加載的參數中，layer、matrixSet的可取值見下面【天地圖地圖類型及url】，format的取值固定為tiles, style參數為天地圖服務默認的’style’。

天地圖的地圖類型及url如下所示：

// 全球影像地圖服務(經緯度) http://t0.tianditu.com/img_c/wmts

// 全球影像注記服務(經緯度) http://t0.tianditu.com/cia_c/wmts

// 全球影像地圖服務(墨卡托投影) http://t0.tianditu.com/img_w/wmts

// 全球影像注記服務(墨卡托投影) http://t0.tianditu.com/cia_w/wmts

// 全球矢量地圖服務(經緯度) http://t0.tianditu.com/vec_w/wmts

// 全球矢量注記服務(經緯度) http://t0.tianditu.com/cva_w/wmts

// 全球矢量地圖服務(墨卡托投影) http://t0.tianditu.com/vec_c/wmts

// 全球矢量注記服務(墨卡托投影) http://t0.tianditu.com/cva_c/wmts

// 全球地形暈渲地圖服務(經緯度) http://t0.tianditu.com/ter_c/wmts

// 全球地形暈渲注記服務(經緯度) http://t0.tianditu.com/cta_c/wmts

// 全球地形暈渲地圖服務(墨卡托投影) http://t0.tianditu.com/ter_w/wmts

// 全球地形暈渲注記服務(墨卡托投影) http://t0.tianditu.com/cta_w/wmts

3、XYZ的方式加載天地圖

//創建圖層(xyz方式)

function crtLayerXYZ(type, proj, opacity){

var layer = new ol.layer.Tile({

source: new ol.source.XYZ({

url: 'http://t'+Math.round(Math.random()*7)+'.tianditu.com/DataServer?T='+type+'&x={x}&y={y}&l={z}',

projection: proj

}),

opacity: opacity

});

layer.id = type;

return layer;

}

代碼中應注意問題與上述WMTS加載方式(1)、(2)一致。

4、WMTS與XYZ方式比較

相同點：(1)不管采用哪種方式，顯示的效果是一致的； (2)加載地圖的類型參數應與投影參數保持一致。

不同點：(1)WMTS使用的數據源類型為ol.source.WMTS，XYZ方式使用的數據源類型為ol.source.XYZ；

(2)WMTS方式遵從標準的OGC規范，需要計算、指定分辨率、顯示級別等，根據WMTS服務加載的標準規范加載天地圖，XYZ方式只需根據天地圖規定組裝簡單的url即可；

(3)實際使用中，難度上WMTS更繁瑣，效率上XYZ更優。

結論：推薦使用XYZ的方式加載天地圖服務(同時也是加載Google地圖的首選)。

作者：頑劣的石頭

原文：https://blog.csdn.net/shaxiaozilove/article/details/80371754

總結

以上是生活随笔為你收集整理的ol xyz 加载天地图_OpenLayers加载天地图方法——WMTS和XYZ的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。