openlayer4 调用 geoserver的 tms 服务

最新推荐文章于 2024-08-13 10:33:56 发布

YH20090580118

最新推荐文章于 2024-08-13 10:33:56 发布

阅读量3k

点赞数 1

分类专栏： openlayer开发文章标签： openlayer4 geoserver tms

本文链接：https://blog.csdn.net/YH20090580118/article/details/80135873

版权

openlayer开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

　　基于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>