geoserver上传切片影像，并在网页中调用WMS服务以显示高清tiff影像

最新推荐文章于 2023-06-27 16:59:09 发布

一只小白芯

最新推荐文章于 2023-06-27 16:59:09 发布

阅读量1.3k

点赞数 2

本文链接：https://blog.youkuaiyun.com/zs_sss/article/details/106054548

版权

webgis 专栏收录该内容

1 篇文章

订阅专栏

推荐比较好的博客
调用geoserver上的WMS服务https://blog.youkuaiyun.com/sinat_28797501/article/details/69668701
GeoServer 发布大型影像数据https://blog.jonslow.com/geoserver-publishing-huge-image/
关于GeoServer发布金字塔影像的说明https://www.cnblogs.com/guaziren/p/3277548.html
我用的不是openlayers用的是高德地图API，下面是我的步骤：

一、切片

安装FWTools247.exe至根目录下打开FWTools Shell，输入代码：

C:\FWTools2.4.7\python\python.exe C:\FWTools2.4.7\bin\gdal_retile.py -v -r bilinear -levels 8 -ps 512 512 -co "TILED=YES" -co COMPRESS=LZW -targetDir E:\testImage E:\testImage\海口\海口市.tif

在这里插入图片描述
用到的参数说明如下：

（1）  levels 8  表示分成八级；

（2）  ps 512 512  表示切片大小为512*512；

（3）  COMPRESS=LZW 表示tiff影像
	   COMPRESS=JPEG 表示按照jpeg方式压缩；

（4）  targetDir E:\testImage   表示目标文件夹，即存放切片影像的文件夹；

（5）  E:\testImage\海口\海口市.tif   表示待处理影像文件。

切片后影像如下图所示：
在这里插入图片描述
方便后续写文件路径，我把切片后的文件放在了新建的tilehaikou文件夹中

二、发布

在这里插入图片描述
在网页中添加代码：

<!DOCTYPE html>
<html>
<head>
    <title>高德地图API</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=zsis"></script>
    <style>
        #container {
            width: 800px;
            height: 420px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script>
        // 创建地图实例
        var map = new AMap.Map('container', {
            zoom: 11,//级别
            //center: [116.397428, 39.90923],//中心点坐标
        });
        

        // 创建 WMS 标准图层
        var wms1 = new AMap.TileLayer.WMS({
            url: 'http://localhost:8080/geoserver/test/wms', // wms服务的url地址
            blend: false, // 地图级别切换时，不同级别的图片是否进行混合
            //tileSize: 512, // 加载WMS图层服务时，图片的分片大小
            params: {
                LAYERS: 'test:tilemulli',
                VERSION: '1.1.0'
            } // OGC标准的WMS地图服务的GetMap接口的参数
        });
        map.add(wms1);
        var wms2 = new AMap.TileLayer.WMS({
            url: 'http://localhost:8080/geoserver/topp/wms', // wms服务的url地址
            blend: false, // 地图级别切换时，不同级别的图片是否进行混合
            //tileSize: 512, // 加载WMS图层服务时，图片的分片大小
            params: {
                LAYERS: 'topp:states',
                VERSION: '1.1.0'
            } // OGC标准的WMS地图服务的GetMap接口的参数
        });
        map.add(wms2);
    </script>
</body>
</html>