Mapbox GL 加载GeoServer底图服务器的WMS source

<template>
    <div class="mapbox-maps">
        <div id="map"></div>
    </div>
</template>

<script>
import mapboxgl from './../../public/mapbox-gl.js'
import './../../public/mapbox-gl.css' // 一定要引入样式， 否则有些东西显示不出来(比如导航控制条)
//import MapboxLanguage  from '@mapbox/mapbox-gl-language'

let res = [];
const MAPTYPE = {
    NAVIMG: 'nav_img',
    NAVLBL: 'nav_lbl',
    NAVVEC: 'nav_vec'
}
export default {
    data: () => ({
        map: null
    }),

    methods: {
        getNavTileUrls(lyr) {
            const dict = {
                'nav_img': 'https://webst0${subdomain}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
                'nav_lbl': 'https://webst0${subdomain}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
                'nav_vec': 'http://webrd0${subdomain}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
            }
            for (let i = 1; i < 5; i++) {
                let url = dict[lyr];
                url = url.split('${subdomain}').join(i);
                res.push(url)
            }
            return res;
        },

        initMap() {
            //mapboxgl.accessToken = 'pk.eyJ1IjoibW9ob25nIiwiYSI6ImNrNGFsdjY5ZzA1NW4zbG14b2JoMnA5c3IifQ.1qVWFsyHW2wKThTgQg08SA';
            const BEIJING_COORDINATE = [116.39123296750768, 39.907180309385694];
            const style = {
                version: 8,
                name: "tianditu",
                //sprite: "mapbox://sprites/mapbox/streets-v8",
                //glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
                sources: {
                    // 天地图电子标记
                    tianditu_cav: {
                        type: 'raster',
                        tiles: [
                            'https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4',
                            'https://t1.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4',
                        ],
                        tileSize: 256
                    },
                    // 天地图电子底图
                    tianditu_vec: {
                        type: 'raster',
                        tiles: [
                            'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4',
                            'https://t1.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4',
                        ],
                        tileSize: 256
                    },
                    // 天地图影像图
                    tianditu_img: {
                        type: 'raster',
                        tiles: [
                            'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4'
                        ],
                        tileSize: 256
                    },
                    tianditu_cia: {
                        type: 'raster',
                        tiles: [
                            'https://t1.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4'
                        ],
                        tileSize: 256
                    }
                },
                layers: [
                    {
                        id: "tianditu_img",
                        type: "raster",
                        source: "tianditu_img",
                        minzoom: 0,
                        maxzoom: 22,
                        layout: {
                            "visibility": "none"
                        }
                    },
                    {
                        id: "tianditu_vec",
                        type: "raster",
                        source: "tianditu_vec",
                        minzoom: 0,
                        maxzoom: 22
                    },
                    {
                        id: "tianditu_cav",
                        type: "raster",
                        source: "tianditu_cav",
                        minzoom: 0,
                        maxzoom: 22
                    },
                    {
                        id: 'tianditu_cia',
                        type: 'raster',
                        source: 'tianditu_cia',
                        minzoom: 0,
                        maxzoom: 22
                    }
                ]
            }
            const map = new mapboxgl.Map({
                container: 'map',
                style: style,
                //center: [116.40355, 39.91737],
                zoom: 8,
                center: [-74.5447, 40.6892]
            });
            map.on('load', () => {
                map.addSource('wms-source', {
                    'type': 'raster',
                    'tiles': [
                        ///地址填写geoserver图层预览的时候  网络请求中的地址
                        ///然后把把bbbox换一下  src坐标换一下，貌似mapbox只支持3857坐标系
                        ///srs=EPSG:3857
                        ///BBOX={bbox-epsg-3857}
                        'http://192.168.10.10:8080/geoserver/ne/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&format=image/png&TRANSPARENT=true&STYLES&LAYERS=ne%3Acountries&exceptions=application%2Fvnd.ogc.se_inimage&srs=EPSG:3857&WIDTH=768&HEIGHT=370&BBOX={bbox-epsg-3857}',
                    ],
                    'tileSize': 256
                });
                map.addLayer({
                    'id': 'wms-layer',
                    'type': 'raster',
                    'source': 'wms-source',
                    'paint': {
                        'raster-opacity': 1
                    }
                },
                    //'aeroway-line'
                );

            });


        }
    },
    mounted() {
        this.initMap()
    }
}
</script>

<style lang="less">
.mapbox-maps {
    width: 100%;
    height: calc(100vh - 50px);
    position: relative;

    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;

        .mapboxgl-canvas {
            outline: none;
        }

        // 隐藏mapbox商标
        .mapboxgl-ctrl-logo {
            display: none;
        }
    }
}
</style>


















<!-- <template>
  <div class="map_box">
      <div ref="map" class="map" id="map"></div>
  </div>
</template>

<script>
import maxboxMap from './futureMap.js'

export default {
  components: {},
  data() {
      return {
          map: null,
      }
  },
  computed: {},
  methods: {
      handleInitMap() {
          // 后期想传入一些值 比如areaCode 之类的 自动定位至改城市的中心

          let map = new maxboxMap({
              element: 'map'
          })
      },
  },
  watch: {},

  mounted() {
      this.handleInitMap()
  },
}
</script> -->