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

一、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/

<think>好的,我需要帮助用户了解如何在GeoServer发布多层级地图服务。首先,我需要整理用户提供的引用内容,看看里面有哪些关键点。 引用[1]提到了GeoServer发布多层级底图切片服务,包括天地图、谷歌地图和高德地图,还提到了大图拼接和MBTiles规范。引用[2]讨论了GeoServer相对于ArcGIS的优势,比如开源和轻量,但提到插件和版本配置可能耗时。用户使用的是1.15.2版本。引用[3]则涉及切割离线瓦片时预览放大会缺失的问题,解决方法包括重新计算边界和正确配置图层组。 接下来,我需要将这些信息整合成一个清晰的步骤指南。首先,用户需要准备数据,可能需要处理大图或遵循MBTiles规范。然后配置数据存储,比如使用GeoTIFF或MBTiles插件。接着设置图层样式,定义坐标系统和边界。发布图层组时,要注意添加顺序和边界一致性。切片配置方面,选择合适的网格集和缩放级别,最后进行预览测试。 同时,我需要考虑用户可能遇到的问题,比如插件安装、版本兼容性,以及预览时的瓦片缺失问题。在步骤中要提醒用户注意这些点,例如严格计算边界、重新添加图层组等。此外,引用中的案例提到TileLayer预览问题,需要指导用户在切割前忽略该问题,正确配置后即可解决。 最后,生成相关问题,帮助用户深入理解,比如性能优化、插件使用、离线瓦片处理等。确保回答结构清晰,步骤详细,正确引用提供的资料。</think>以下是在GeoServer发布多层级地图服务的配置教程,结合引用内容和实践经验整理: --- ### **步骤一:数据准备** 1. **切片数据规范** - 多层级地图需遵循**瓦片金字塔模型**,建议采用MBTiles规范存储[^1] - 若为单张大图(如高德/天地图),需使用工具(如GDAL)进行**大图切割**生成标准瓦片目录结构 - 坐标系需统一(如Web墨卡托`EPSG:3857`或WGS84`EPSG:4326`) --- ### **步骤二:配置数据存储** 1. **安装插件** - 根据数据格式安装对应插件(如`geoserver-mbtiles`插件支持MBTiles格式[^1]) - 注意GeoServer版本与插件的兼容性(例如1.15.2需匹配插件版本[^2]) 2. **创建数据源** ```plaintext Store Type选择对应格式(如MBTiles/Raster File) → 指定文件路径 → 保存 ``` --- ### **步骤三:图层发布与样式设置** 1. **发布图层** - 在`Layer`页面选择数据存储 → 生成图层 - 定义`Coordinate Reference System`和`Bounding Box`(需精确计算地理范围[^3]) 2. **样式配置** - 若需叠加标注或调整渲染效果,使用SLD样式文件定义符号系统 --- ### **步骤四:多层级图层组配置** 1. **创建图层组** ```plaintext Layer Groups → Add new layer group → 添加所有层级对应的图层 → 设置叠加顺序 → 重新计算整体边界(避免预览时瓦片缺失) ``` 2. **坐标系对齐** - 确保所有子图层使用相同的坐标系和瓦片网格定义 --- ### **步骤五:切片配置与发布** 1. **Tile Caching设置** ```plaintext Tile Layers → 选择图层组 → Tile Caching → 选择网格集(如EPSG:3857/googlemaps) → 定义缩放级别范围(需与数据层级匹配[^1]) ``` 2. **生成切片** - 使用`Seed/Truncate`工具预生成瓦片,或按需动态渲染 --- ### **步骤六:服务测试** 1. **预览验证** - 通过`Layer Preview`查看各层级显示效果 - 若放大后瓦片缺失,检查边界计算和坐标系一致性 2. **服务调用** - 通过WMTS/TMS标准接口调用服务,例如: ``` http://localhost:8080/geoserver/gwc/service/wmts?... ``` --- ### **关键问题解决** 1. **瓦片预览缺失** - 必须删除旧图层组后**重新创建**,逐层校验边界值[^3] 2. **性能优化** - 预生成切片提升访问速度 - 使用`gzip`压缩减少传输量 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值