- 设置空间参考坐标系
使用哪个坐标系取决于加载的地图服务,如果坐标系与地图服务的不同,则可能出现无法加载地图的问题
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 tiandimap = new ol.layer.Tile({
source: new ol.source.WMTS({
url: url,
projection: projection,
style: 'default',
format: 'image/png',
matrixSet: "EPSG:4326",
layer: "1",
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent);,
resolutions: resolutions,
matrixIds: matrixIds
}),
})
});
var view = new ol.View({
projection: projection,
center: [120.151527, 35.99825595],
zoom: 9
})
var map = new ol.Map({
layers: [tiandimap] ,
target: 'map',
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}).extend([
new ol.control.ZoomToExtent({
extent: [120.05144842, 35.95285152, 120.25160558, 36.04366038]
})
]),
view: view
});
<!DOCTYPE html>
<html>
<head>
<title>WMTS</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/openlayers/4.6.5/ol.css" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.bootcss.com/openlayers/4.6.5/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 projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = [];
var matrixIds = [];
for (var z = 0; z < 19; ++z) {
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = z;
}
var url = "http://www.sdmap.gov.cn/tileservice/SDPubMap";
var tiandimap = new ol.layer.Tile({
source: new ol.source.WMTS({
url: url,
projection: projection,
style: 'default',
format: 'image/png',
matrixSet: "EPSG:4326",
layer: "1",
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
})
});
var view = new ol.View({
projection: projection,
center: [120.151527, 35.99825595],
zoom: 9
});
var map = new ol.Map({
layers: [tiandimap],
target: 'map',
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}).extend([
new ol.control.ZoomToExtent({
extent: [120.05144842, 35.95285152, 120.25160558, 36.04366038]
})
]),
view: view
});
</script>
</body>
</html>