我用地理服务器发布了我的地图，并使用了地图代理的wmts服务。 mapproxy 获得了 OpenLayer 版本 2 的示例，我想使用 openlayer 版本 4，但该版本 4 不起作用。
这是 OpenLayer 2 的 Mapproxy 示例
var map;
var mapOptions = {
projection: new OpenLayers.Projection('EPSG:3857'),
resolutions: [156543.03392804097, 78271.51696402048, 39135.75848201024,
19567.87924100512, 9783.93962050256, 4891.96981025128, 2445.98490512564,
1222.99245256282,
611.49622628141, 305.748113140705, 152.8740565703525, 76.43702828517625,
38.21851414258813, 19.109257071294063, 9.554628535647032, 4.777314267823516,
2.388657133911758, 1.194328566955879, 0.5971642834779395,
0.29858214173896974],
units: 'm',
maxExtent: new OpenLayers.Bounds(-20037508.342789244, -20037508.342789244,
20037508.342789244, 20037508.342789244),
tileSize: new OpenLayers.Size(256, 256)
};
map = new OpenLayers.Map('map', mapOptions);
var layer = new OpenLayers.Layer.WMTS({
name: "WMTS osm",
url: '../wmts/osm/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}.png',
layer: 'osm',
matrixSet: 'webmercator',
format: 'png',
isBaseLayer: true,
style: 'default',
requestEncoding: 'REST'
});
map.addLayer(layer)
这是我使用 OpenLayer 版本 4 的示例代码，不适用于此版本
function createWMTS() {
var gridsetName = 'EPSG:900913';
var wmtslayer = new ol.source.WMTS({
url:
layer: 'osm',
matrixSet: 'webmercator',
isBaseLayer: true,
format: 'image/png',
style: 'default',
requestEncoding: 'REST',
projection: new ol.proj.Projection({
code: 'EPSG:3857',
units: 'm',
axisOrientation: 'neu'
}),
tileGrid: new ol.tilegrid.WMTS({
tileSize: [256, 256],
extent: [-2.003750834E7, -2.003750834E7, 2.003750834E7, 2.003750834E7],
resolutions: resolutions,
matrixIds: params['TILEMATRIX']
}),
style: "",
wrapX: true
})
return wmtslayer;
};
var view = new ol.View({
center: [5720657.8367, 4263876.019],
zoom: 5 ,
minZoom: 3,
maxZoom: 19
});
var gitaBaseMap = createWMTS();
var rasterLayer = new ol.layer.Tile();
rasterLayer.setSource(gitaBaseMap);
var format = 'image/png';
map = new ol.Map({
layers: [rasterLayer],
target: 'map',
view: view,});
请帮助我
这是我为 Open Layer 6 所做的;
我还使用 Proj4 来变换 OSM 底图。
提示：
我通过以下控制台命令获取ol.View的center和resolution参数;
map.getView().getResolution()和map.getView().getCenter()
您可以在查看地图时在浏览器的控制台中调用这些命令。
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css">
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.2/proj4-src.min.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var resolutions = [264.5833333333, 132.2919312505292, 66.1459656252646, 33.0729828126323,
16.53649140631615, 8.268245703158074, 4.134122851579037, 2.0670614257895186,
1.0335307128947593];
proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
'+x_0=400000 +y_0=-100000 +ellps=airy ' +
'+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
'+units=m +no_defs');
ol.proj.proj4.register(proj4);
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
url: '[mapproxy_url]/wmts/moata/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}.png',
layer: 'moata',
format: 'image/png',
matrixSet: 'mercator',
requestEncoding: 'REST',
projection: ol.proj.get('EPSG:27700'),
tileGrid: new ol.tilegrid.WMTS({
resolutions: [264.5833333333, 132.2919312505292, 66.1459656252646, 33.0729828126323,
16.53649140631615, 8.268245703158074, 4.134122851579037, 2.0670614257895186,
1.0335307128947593],
extent: [258536.05215197292,446521.1903102073,421600.6383919524,586398.6826073326],
origin: [-5220400.0, 4470200.0],
tileSize: 512,
matrixIds:["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
})
})
})
],
view: new ol.View({
center: [343273.8405364175, 526209.345032014],
projection: ol.proj.get('EPSG:27700'),
resolution: 82.71791209587954
}),
target: 'map'
});
</script>
</body>
</html>