CDN
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v3.20.1/build/ol.js" type="text/javascript"></script>
1. 点击Logo -》版本号 -》查看自己的wms地址
2. 查看WTMS,右键查看源码
3. 将所有script
标签中的代码复制下来,删除红框,添加绿框
4.修改baseUrl
var baseUrl = 'http://localhost:8089/geoserver/gwc/service/wmts';
完整代码 注意:script
要放在html
后
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v3.20.1/build/ol.js" type="text/javascript"></script>
</head>
<body>
<h2>WTMS</h2>
<div id="map"></div>
</body>
<script src="js/test.js"></script>
</html>
test.js
function init() {
var gridsetName = 'landsat_zdy';
var gridNames = ['landsat_zdy:0', 'landsat_zdy:1', 'landsat_zdy:2', 'landsat_zdy:3', 'landsat_zdy:4', 'landsat_zdy:5'];
var baseUrl = 'http://localhost:8089/geoserver/gwc/service/wmts';
var style = '';
var format = 'image/png';
var infoFormat = 'text/html';
var layerName = 'webgis_test:LC08_L1TP_123033_20170523_20170526_01_T1_B1';
var projection = new ol.proj.Projection({
code: 'EPSG:32650',
units: 'm',
axisOrientation: 'neu'
});
var resolutions = [2609.2074758118906, 1304.6037379059453, 652.3018689529727, 326.1509344764863, 163.07546723824316, 81.53773361912158];
baseParams = ['VERSION', 'LAYER', 'STYLE', 'TILEMATRIX', 'TILEMATRIXSET', 'SERVICE', 'FORMAT'];
params = {
'VERSION': '1.0.0',
'LAYER': layerName,
'STYLE': style,
'TILEMATRIX': gridNames,
'TILEMATRIXSET': gridsetName,
'SERVICE': 'WMTS',
'FORMAT': format
};
// 构建layer的source
function constructSource() {
var url = baseUrl + '?'
for (var param in params) {
if (baseParams.indexOf(param.toUpperCase()) < 0) {
url = url + param + '=' + params[param] + '&';
}
}
url = url.slice(0, -1);
var source = new ol.source.WMTS({
url: url,
layer: params['LAYER'],
matrixSet: params['TILEMATRIXSET'],
format: params['FORMAT'],
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
tileSize: [256, 256],
extent: [166021.44309607794, 0.0, 833978.556903922, 9351399.593309816],
origin: [166021.44309607794, 9351399.593309816],
resolutions: resolutions,
matrixIds: params['TILEMATRIX']
}),
style: params['STYLE'],
wrapX: true
});
return source;
}
var layer = new ol.layer.Tile({
source: constructSource()
});
var view = new ol.View({
center: [0, 0],
zoom: 2,
projection: projection,
extent: [166021.44309607794, 0.0, 833978.556903922, 9351399.593309816]
});
var map = new ol.Map({
layers: [layer],
target: 'map',
view: view
});
map.getView().fit([320685.0, 4187385.0, 553515.0, 4424415.0], map.getSize());
}
init();