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

貌似加载有点慢啊!!

1 这是底图

2 这是加载geoserver中的地图效果

3源码

3.1 geoserver中的网络请求

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:countries&exceptions=application/vnd.ogc.se_inimage&srs=EPSG:3857&WIDTH=768&HEIGHT=370&BBOX=-8296780.798186172,5087648.60266133,-8218509.281222152,5165920.119625352

///地址填写geoserver图层预览的时候 网络请求中的地址

///然后把把bbbox换一下 src坐标换一下,貌似mapbox只支持3857坐标系

///srs=EPSG:3857

///BBOX={bbox-epsg-3857}

复制代码
<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> -->
相关推荐
等猪的风10 分钟前
openwrt作旁路由时的几个常见问题 openwrt作为旁路由配置zerotier 图文讲解
运维·服务器·网络
互联网搬砖老肖14 分钟前
运维打铁:域名详解及常见问题解决
运维·github
千码君201627 分钟前
什么是数据链路层的CRC检测以及为什么要放到帧尾?
服务器·网络·网络协议·以太网·奇偶校验·crc检测·以太网帧
Qiuner33 分钟前
软件设计师速通其一:计算机内部数据表示
服务器·数据库·信号处理
LaughingZhu1 小时前
PH热榜 | 2025-04-24
运维·经验分享·搜索引擎·产品运营·jenkins
刘某的Cloud1 小时前
openstack迁移虚机rbd报错,删除异常rbd
linux·运维·openstack·nova·rbd
啊吧怪不啊吧1 小时前
Linux权限概念讲解
linux·运维·服务器
文牧之2 小时前
PostgreSQL oracle_fdw 扩展解析
运维·数据库·postgresql
努力努力再努力wz2 小时前
【Linux实践系列】:进程间通信:万字详解命名管道实现通信
android·linux·运维·服务器·c++·c
Zfox_2 小时前
【Shell 脚本入门】轻松上手的实战指南
linux·服务器·运维开发·shell脚本