geoserver发布wmts服务并使用arcgis js4.x调用

最新推荐文章于 2025-06-08 16:40:06 发布

FlyToTheWorld

最新推荐文章于 2025-06-08 16:40:06 发布

阅读量3.7k

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/FlyToTheWorld/article/details/125906392

一、geoserver发布wmts服务

1、添加tif
在这里插入图片描述
2、设置切片网格集

3、add zoom level：超级重要的一步
（1）使用qgis打开tif查看切片比例尺，拿个小本本记录要切片缩放比例尺

（2）设置add zoom level后保存

4、发布wmts（按照发布wms的流程，tif仅设置tile caching即可，其余页面不需要任何设置）
在这里插入图片描述

设置切片网格集后，保存

5、制作本地切片缓存，加快访问速度

arcgis 调用 geoserver发布的wmts服务

1、进入geowebcache
在这里插入图片描述
2、打开WMTS 1.0.0 GetCapabilities document

ctrl + f ：输入切片图层id查询发布的wmts图层信息，调用wmts服务所需的全部信息都可以在这里找。按照下面教程也许用不上这个文件

3、使用WebTileLayer代替wmtslayer调用wmts图层
（1）使用代码调用时需要urlTemplate和tileInfo，其中urlTemplate需要自行拼接
在这里插入图片描述
参考控制台的url

拼接格式参考

（2）tileInfo需要根据网格集设置的数据一样

完整代码如下，注意：已把geoserver端口改为8090

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>WMTSLayer | Sample | ArcGIS API for JavaScript 4.22</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css" />
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        .esri-layer-list {
            width: 310px;
        }
    </style>
    <script src="https://js.arcgis.com/4.22/"></script>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/WMTSLayer",
            "esri/widgets/LayerList",
            "esri/layers/WebTileLayer",
            "esri/geometry/SpatialReference"
        ], (Map, MapView, WMTSLayer, LayerList, WebTileLayer, SpatialReference) => {

            let layer = new WebTileLayer({
                id: 'NingBo:NingBo_basemap_4326_GaoDe',
                urlTemplate: 'http://localhost:8090/geoserver/gwc/service/wmts?layer=NingBo:NingBo_basemap_4326_GaoDe&style=&tilematrixset=NingBo_basemap&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={level}&TileRow={row}&TileCol={col}',
                spatialReference: new SpatialReference({ wkid: 4326 }),
                tileInfo: {
                    'rows': 256,
                    'cols': 256,
                    'compressionQuality': 0,
                    'origin': {
                        'x': -180,
                        'y': 90
                    },
                    'spatialReference': {
                        'wkid': 4326
                    },
                    'lods': [{
                        'level': 13,
                        'resolution': 0.0001151597075108,
                        'scale': 45784
                    },
                    {
                        'level': 14,
                        'resolution': 0.0000575798537554,
                        'scale': 22892
                    },
                    {
                        'level': 15,
                        'resolution': 0.0000287899268777,
                        'scale': 11446
                    },
                    {
                        'level': 16,
                        'resolution': 0.0000143949634388,
                        'scale': 5722
                    },
                    {
                        'level': 17,
                        'resolution': 0.000007196224078,
                        'scale': 2860
                    },
                    {
                        'level': 18,
                        'resolution': 0.0000035993696804,
                        'scale': 1430
                    }]
                }
            })
            const map = new Map({
                layers: [layer]
            });
            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [121.94697, 29.951907],//
                zoom: 16,
                spatialReference: new SpatialReference(4326)
            });
        });
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>

运行结果：
在这里插入图片描述
参考文献：
https://blog.youkuaiyun.com/qlcheng2008/article/details/122245614
https://blog.youkuaiyun.com/weixin_43311389/article/details/99979275
https://blog.youkuaiyun.com/zhengjie0722/article/details/101219450/