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': {}
    },
);