openlayer4 调用 geoserver的 tms 服务
目录
基于openlayer4 调用 geoserver 发布的服务，主要使用的是wms服务。最近因为一个项目发布地形数据服务，领导嫌弃sld渲染结果不细腻，要求达到global mapper渲染效果，折腾了两天终于搞定，记录下来作为后期参考。
global mapper 导出带渲染色的tif数据
用global mapper打开制作好的dsm的tif数据，然后点击file->export->export raster/image format,选择geoTIFF,弹出面板中platter 一定要选择 Image optimized platter
geoserver 发布
使用geotiff数据源发布服务，然后切片。到这一步出现一个致命问题，发布的服务带有黄色背景颜色。求助度娘无果后，只能到切片源中单个处理png图片黄色部分为透明（纯人工活，高手可以借助python写个小程序自动处理）
openlayer 调用
主要参考了这篇文章 tileUrlFunction 处理逻辑：https://blog.csdn.net/cyoubo/article/details/78030680
<!DOCTYPE html>
<html>
<head>
<title>XYZ</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/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.6.5/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var url="http://192.168.3.16:8080/geoserver/gwc/service/tms/1.0.0/ShanWei%3Adem_tif@EPSG%3A4326@png/";
var resolutions = [];
for (var i = 0; i < 19; i++) {
resolutions[i] = Math.pow(2, 18 - i);
}
var projection=new ol.proj.get("EPSG:4326");
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({source:new ol.source.OSM(),id:"电子地图",visible:true}),
new ol.layer.Tile({
source: new ol.source.XYZ({
projection: projection,
tileGrid: ol.tilegrid.createXYZ({extent: projection.getExtent()}),
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
return url+(tileCoord[0]-1)+ '/'+tileCoord[1] + '/' + (Math.pow(2,tileCoord[0]-1)+tileCoord[2]) + '.png';
}
})
})
],
view: new ol.View({
projection: projection,
center:[115.55145, 23.01361],
zoom:10
})
});
</script>
</body>
</html>转载自：https://blog.csdn.net/YH20090580118/article/details/80135873
