OpenLayers 3 載入WMTS天地圖
阿新 • • 發佈：2018-12-31
- 設定空間參考座標系
使用哪個座標系取決於載入的地圖服務，如果座標系與地圖服務的不同，則可能出現無法載入地圖的問題
var projection = ol.proj.get('EPSG:4326');//經緯度空間參考座標系
var projection = ol.proj.get('EPSG:3857');//墨卡託投影空間參考座標系- 設定地圖縮放層級解析度
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = [];
var - 建立tile layer
var url = "http://www.sdmap.gov.cn/tileservice/SDPubMap";
var layers = [new ol.layer.Tile({
source: new ol.source.WMTS({
url: url,
projection: projection,
style: 'default' - 設定view
如果不設定view，則地圖無法載入
var view = new ol.View({
projection: projection,//座標系引數如果不設定，則預設為墨卡託
resolutions:resolutions,//解析度層級陣列
//resolution: resolutions[8],//初始展示解析度，若不設定該引數，則需設定zoom引數，否則地圖無法載入
center: [120.151527, 35.99825595],//必須引數，否則地圖無法載入
zoom: 14
})- 載入地圖
var map = new ol.Map({
layers: layers ,
target: 'map',//為地圖div的id
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),//放縮控制組件
view: view
});- 完整程式碼
<!DOCTYPE html>
<html>
<head>
<title>WMTS</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.3.1/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.3.1/build/ol.js"></script>
</head>
<style type="text/css">
#map {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="map" class="map"></div>
<script>
var projection = ol.proj.get('EPSG:4326');
//var projection = ol.proj.get('EPSG:3857');
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = [];
var matrixIds = [];
for (var z = 2; z < 19; ++z) {
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = z;
}
var url = "http://www.sdmap.gov.cn/tileservice/SDPubMap";
var layers = [new ol.layer.Tile({
source: new ol.source.WMTS({
url: url,
projection: projection,
style: 'default',
format: 'image/png',
matrixSet: "EPSG:4326",
layer: "sdvec",
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent);,
resolutions: resolutions,
matrixIds: matrixIds
}),
})
})];
var view = new ol.View({
projection: projection,//座標系引數如果不設定，則預設為墨卡託
resolutions:resolutions,//解析度層級陣列
//resolution: resolutions[8],//初始展示解析度，若不設定該引數，則需設定zoom引數，否則地圖無法載入
center: [120.151527, 35.99825595],//必須引數，否則地圖無法載入
zoom: 14
})
var map = new ol.Map({
layers: layers,
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: view
});
</script>
</body>
</html>