终于调试通了,,,太不容易了。。
wmts服务的部署见前面的文章,这里主要使用Openlayer来加载wmts服务
index.js文件如下:
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import WMTSCapabilities from 'ol/format/WMTSCapabilities';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS';
var parser = new WMTSCapabilities();
var map;
var req = new Request('http://192.168.9.147:8080/geowebcache/service/wmts?SERVICE=WMS&REQUEST=GetCapabilities', {method: 'GET', cache: 'reload'});
fetch(req).then(function(response) {
return response.text();
}).then(function(text) {
console.log(text);
var result = parser.read(text);
console.log(result);
var options = optionsFromCapabilities(result, {
layer: 'fztest',
matrixSet: 'EPSG:3857'
});
console.log(options);
if(null == options)
{
return
}
map = new Map({
layers: [
new TileLayer({
opacity: 1,
source: new WMTS(options)
})
],
target: 'map',
view: new View({
center: [15315324.5,2577647.3],
zoom: 16
})
});
});
index.html文件如下:
<!DOCTYPE html>
<html lang="en">
<head>
<title>WMTS Layer from Capabilities</title>
<style>
.map {
width: 100%;
height:400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script src="index.js"></script>
</body>
</html>
package.json如下
{
"name": "wmts",
"dependencies": {
"ol": "6.1.1"
},
"devDependencies": {
"parcel": "1.11.0"
},
"scripts": {
"start": "parcel index.html",
"build": "parcel build --experimental-scope-hoisting --public-url . index.html"
}
}
效果如下:
几个重点的地方解读:
var req = new Request('http://192.168.9.147:8080/geowebcache/service/wmts?SERVICE=WMS&REQUEST=GetCapabilities', {method: 'GET', cache: 'reload'});
为wmts的服务地址
layer 为发布的图层
下图为默认显示的中心点的位置以及显示的缩放图层。