mapbox加载geoserver发布的WMS服务

有玉微凉，是为樱琅

已于 2024-01-15 17:48:46 修改

阅读量1.1k

点赞数

分类专栏： mapbox+leaflet 文章标签： mapbox geoserver ogc wms服务

于 2023-06-05 16:45:18 首次发布

本文链接：https://blog.csdn.net/Sakura1998gis/article/details/131051101

版权

mapbox+leaflet 专栏收录该内容

62 篇文章 7 订阅

订阅专栏

贴个群号

WebGIS学习交流群461555818，欢迎大家。

geoserver发布服务流程请看以前的博客

https://blog.csdn.net/Sakura1998gis/article/details/130192062?spm=1001.2014.3001.5501

获取地址

服务发布之后，在图层预览这里，找到我们的服务，然后最右侧那个下拉框内选择WMS服务下的png
在这里插入图片描述
在跳出的新页面，复制网页地址，一般是这样的

http://你的地址/geoserver/services/wms?service=WMS&version=1.1.0&request=GetMap&layers=services%3Acity&bbox=119.24124334100009%2C39.919077609000055%2C123.80837139200003%2C45.654079341000056&width=611&height=768&srs=EPSG%3A4326&styles=&format=image%2Fpng

这个链接要把bbox换成{bbox-epsg-3857}，就可以了。就是我们最终想要得到的WMS服务地址

WMS服务一般可以用一些样式文件，调用上面的链接的时候，可以把styles=的后面的换成这里的样式。
在这里插入图片描述

mapbox加载geoserver发布的WMS服务

wms服务在mapbox里面，类型是raster，基本参数写下面的就可以了，更加丰富的参数请参考官网。

        map.addSource('city', {
            'type': 'raster',
            'tiles': [
                    'http://你的地址/geoserver/services/wms?service=WMS&version=1.1.0&request=GetMap&layers=services%3Acity&bbox={bbox-epsg-3857}&width=611&height=768&srs=EPSG%3A3857&styles=city&format=image%2Fpng'
            ],
            'tileSize': 256
            });
        map.addLayer({
                'id': 'city',
                'type': 'raster',
                'source': 'city',
                'paint': {
                    'raster-opacity': 1
                }
            },
        );