最近，工作中有需要用OpenLayers腳本庫調用天地圖的WMTS服務接口，由於這兩個都是剛開始接觸，所以是摸着石頭過河，遇到了地圖顯示不了的問題。
我也通過用瀏覽器直接提供的地址打開，來進行參數對比。再看了OpenLayers和天地圖的相關文檔和網絡上的文章，也加入了相關群下載相關資料瀏覽並詢問群友，還是未果。
雖然官網http://www.zjditu.cn/resource/apihelp 有這么一個例子，但是我替換成提供的正式地址，並沒有顯示地圖（每個層級都是需要的，否則只能通過放大或者縮小才能看到，還有layer的值大小寫需要匹配）。
最后還是讓提供方給了個例子，完成了實現（剛開始要，沒給，不知道是忙還是什么情況）。
為了讓剛接觸這種需求的廣大程序猿能夠少走點彎路，下面給出示例，有注釋。有些參數不懂或者想使用復雜功能的，則查閱下列網址：
OpenLayers官網：https://openlayers.org/
扯淡大叔的教程：http://anzhihun.coding.me/ol3-primer/
示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
</head>
<body>
<div>
選中的經緯度：
<input id="Coordinates" type="text" value="" disabled="disabled" style="width: 350px;" />
</div>
<div id="map" class="map" style="height: 493px;"></div>
<div id="div_overlay" style="display: none;">
<div id="marker" title="">
<img src="position_orange.png" />
</div>
<div id="popup" title=""></div>
</div>
<script>
var projection = ol.proj.get('EPSG:4326');//設置坐標系
var projectionExtent = projection.getExtent();
//分辨率
var resolutions = [
1.40625,
0.703125,
0.3515625,
0.17578125,
0.087890625,
0.0439453125,
0.02197265625,
0.010986328125,
0.0054931640625,
0.00274658203125,
0.001373291015625,
0.0006866455078125,
0.00034332275390625,
0.000171661376953125,
0.0000858306884765625,
0.00004291534423828125,
0.000021457672119140625,
0.000010728836059570312,
0.000005364418029785156,
0.000002682209014892578,
0.000001341104507446289
];
//瓦片矩陣
var matrixIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
var centerXY = "121.54449462890625,29.875946044921875";//地圖中心點，默認寧波市
var center = ReturnCenter(centerXY);
var emap_attributions = new ol.Attribution({
html: '<span class="span_switch" onclick="ChangeToImgMap()">點擊切換地圖類型</span>'
});
function EMap() {
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}).extend([
new ol.control.MousePosition()//是否顯示鼠標所在地圖點的經緯度
]),
layers: [
new ol.layer.Tile({
source: new ol.source.WMTS({
attributions: emap_attributions,
name: "中國矢量1-14級",
url: "http://t{0-6}.tianditu.com/vec_c/wmts",
layer: "vec",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: true,//地圖縮小后，防止在一個頁面出現多個一樣的地圖
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions.slice(0, 15),//slice方法不清楚的請百度
matrixIds: matrixIds.slice(0, 15)
})
}),
maxResolution: resolutions[0],
minResolution: resolutions[14]
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
attributions: emap_attributions,
name: "中國矢量注記1-14級",
url: "http://t{0-6}.tianditu.com/cva_c/wmts",
layer: "cva",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions.slice(0, 15),
matrixIds: matrixIds.slice(0, 15)
})
}),
maxResolution: resolutions[0],
minResolution: resolutions[14]
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
attributions: emap_attributions,
name: "浙江矢量15-17級",
url: "http://srv{0-6}.zjditu.cn/ZJEMAP_2D/wmts",
layer: "TDT_ZJEMAP",
style: "default",
matrixSet: "TileMatrixSet0",
format: "image/png",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions.slice(15, 18),
matrixIds: matrixIds.slice(15, 18)
})
}),
maxResolution: resolutions[14],//指定當前級數的上一級來平滑過渡，否則滾輪縮放當前級數會顯示空白
minResolution: resolutions[17]
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
attributions: emap_attributions,
name: "浙江矢量注記15-17級",
url: "http://srv{0-6}.zjditu.cn/ZJEMAPANNO_2D/wmts",
layer: "ZJEMAPANNO",
style: "default",
matrixSet: "TileMatrixSet0",
format: "image/png",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions.slice(15, 18),
matrixIds: matrixIds.slice(15, 18)
})
}),
maxResolution: resolutions[14],//指定當前級數的上一級來平滑過渡，否則滾輪縮放當前級數會顯示空白
minResolution: resolutions[17]
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
attributions: emap_attributions,
name: "XX縣矢量18-20級",
url: "替換成你需要的wmts服務接口地址",
layer: "jsemap",
style: "default",
matrixSet: "TileMatrixSet0",
format: "image/png",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions.slice(18, 21),
matrixIds: matrixIds.slice(18, 21)
})
}),
maxResolution: resolutions[17],//指定當前級數的上一級來平滑過渡，否則滾輪縮放當前級數會顯示空白
minResolution: resolutions[20]
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
attributions: emap_attributions,
name: "XX縣矢量注記18-20級",
url: "替換成你需要的wmts服務接口地址",
layer: "jsemapanno",
style: "default",
matrixSet: "TileMatrixSet0",
format: "image/png",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions.slice(18, 21),
matrixIds: matrixIds.slice(18, 21)
})
}),
maxResolution: resolutions[17],//指定當前級數的上一級來平滑過渡，否則滾輪縮放當前級數會顯示空白
minResolution: resolutions[21]
})
],
target: "map",
view: new ol.View({
center: center,//地圖中心點
projection: projection,//投影類別
zoom: 10,//默認縮放級別
maxZoom: 20,//最大縮放級別
minZoom: 1//最小縮放級別
})
});
//鼠標點擊時設置中心點覆蓋物
GetElementId("map").onclick = function () {
coordinates = GetElementsByClassName('ol-mouse-position')[0].innerHTML;
SetPosition(map, coordinates);
};
}
EMap();//顯示E電子地圖
function GetElementId(id) {
return document.getElementById(id);
}
function GetElementsByClassName(className) {
return document.getElementsByClassName(className);
}
//中心點處理
function ReturnCenter(centerXY) {
var centerObj = centerXY.split(',');
var centerX = centerObj[0];
var centerY = centerObj[1];
return [parseFloat(centerX), parseFloat(centerY)];//一定要轉換下類型，否則拖拽后，地圖就消失了
}
//設置中心點覆蓋物
function SetPosition(map, coordinates) {
GetElementId("Coordinates").value = coordinates;
var newcenter = ReturnCenter(coordinates);
// Position marker
var marker = new ol.Overlay({
position: newcenter,
positioning: 'bottom-center',
element: document.getElementById('marker'),
stopEvent: false
});
map.addOverlay(marker);
}
</script>
</body>
</html>
可將上述代碼直接復制到txt文件中並保存html，即可成功瀏覽。點擊鼠標可以顯示覆蓋物並把坐標值顯示在上面的文本框中。
附上坐標覆蓋物圖片和效果圖：
