Mapbox 加载自定义 WMS 数据源

Mapbox 加载自定义 WMS 数据源

Step 1 引入依赖文件

<link href="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js"></script>

Step 2 创建地图容器

<div id="map"></div>

Step 3 初始化一个空白地图

 var map = new mapboxgl.Map({
    container: 'map',style: {
    version: 8,"sprite": "http://x.x.x.x:xxxx/mapbox/mapbox_build/sprite/sprite",            "glyphs": "http://x.x.x.x:xxxx/mapbox/mapbox_build/fonts/{fontstack}/{range}.pbf",sources: {
    },layers: [{
    'id': 'background','paint': {
    'background-color': '#08294A'},'type': 'background'}]},zoom: 15,center: [0,0]});

Step 4 加载 WMS 数据源

map.addSource('source_id', {
    'type': 'raster','tiles': [                "http://x.x.x.x:xxxx/geoserver/xx/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&STYLES&LAYERS=xx:xx&SRS=EPSG:3857&WIDTH=768&HEIGHT=625&BBOX={bbox-epsg-3857}"],'tileSize': 512
});

Step 5 加载 WMS 图层

map.addLayer({
    'id': 'wms-layer','type': 'raster','source': 'source_id','paint': {
    }},
);