mapbox加载geoserver发布的WMS服务

贴个群号

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

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

https://blog.youkuaiyun.com/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
                }
            },
        );