geoServer发布矢量图层， leaflet 或mapbox加载

原创已于 2025-11-05 11:36:44 修改 · 186 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-11-03 18:45:34 首次发布

1.发布

geoServer添加储存仓库，注意文件名不要用中文命名。
geoServer发布图层，纬度/经度边框不用根据数据计算边界，应使用根据srs计算边框。（因为web地图查找瓦片是根据srs边界计算x和y值的）
geoServer发布图层，Tile Caching 选择application/vnd.mapbox-vector-tile。
geoServer发布图层，Tile Caching -> Available gridsets中添加EPSG:900913，此为墨卡托投影，web加载时应使用此srs。（因为web默认使用此坐标系，若不，则可能出现瓦片xyz值不一致的情况）

2.查看

查看发布的url

在切片图层中预览，f12查看图层url。
在GeoServer服务中查看WMTS,或TMS，或WMS,等等，进入可查看所有图层url。

3.加载

3.1 leaflet 加载

      var mvtLayer = L.vectorGrid
            .protobuf(
              "http://localhost:8080/geoserver/ne/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=ne:gxsf&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}",
              {
                // tms: true,
                protocol: "wmts",
                layer: "ne:gxsf",
                format: "application/vnd.mapbox-vector-tile",
                tilematrixSet: "EPSG:900913",
                vectorTileLayerStyles: {
                  "ne:gxsf": function (properties, zoom) {
                    return {
                      weight: 1,
                      opacity: 1,
                      color: "#3388ff",
                      fillOpacity: 0.5,
                      fillColor: "#3388ff",
                    };
                  },
                },
                interactive: true,
                attribution: "Your GeoServer MVT Layer",
              }

3.2 mapbox加载

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mapbox加载</title>
</head>

<body>
    <!-- Mapbox GL -->
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>


    <!-- Styles -->
    <style>
        #mapContainer {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        .maps-PSzhi {
            position: relative !important;
            top: 0;
            left: 0;
            z-index: 1000 !important;
        }
    </style>

    <!-- The container for the map -->
    <div id="mapContainer"></div>

    <script>
        // Initialize the Mapbox GL JS map inside the mapContainer element.
        // More configuration options for Mapbox GL JS can be found at https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters
        // Do not set the style parameter. It will be overwritten by the meteoblue Maps Plugin.


        let token =
            "your-token";

  const mapboxMap = new mapboxgl.Map({
            accessToken: token,
            container: 'mapContainer', // 地图容器 ID
            style: 'mapbox://styles/mapbox/streets-v11', // 使用默认样式
            center: [120, 30], // 初始中心点（经度，纬度）
            zoom: 5 // 初始缩放级别
        });

        mapboxMap.on('load', function () {
            mapboxMap.addSource("geoserver-source", {
                type: "vector",
                "format": "pbf",
                scheme: "tms",
                maxzoom: 12,
                minzoom: 0,
                tiles: ["http://localhost:8080/geoserver/gwc/service/tms/1.0.0/ne:gxsf@EPSG:900913@pbf/{z}/{x}/{y}.pbf"]
            });
            mapboxMap.addSource("geoserver-source1", {
                type: "vector",
                "format": "pbf",
                scheme: "tms",
                maxzoom: 12,
                minzoom: 0,
                tiles: ["http://localhost:8080/geoserver/gwc/service/tms/1.0.0/ne:airwaylabel@EPSG:900913@pbf/{z}/{x}/{y}.pbf"]
            });

            // 添加图层
            mapboxMap.addLayer({
                id: "gxsf",
                type: "fill",
                source: "geoserver-source",
                "source-layer": "gxsf", // 数据集中的图层名称
                paint: {
                    "fill-color": "#0080ff",
                    "fill-opacity": 0.5,
                },
            });

            mapboxMap.addLayer({
                id: 'efb-airways-label',
                type: 'symbol',
                // source: 'airways-label',
                source: "geoserver-source1",
                "source-layer": "airwaylabel",
                minzoom: 7,
                layout: {
                    "text-rotate": ['get', 'fixed_heading'],
                    "text-field": ['get', 'ident'],
                    "text-font": [
                        "Open Sans Bold"
                    ],
                    "text-letter-spacing": 0.05,
                    "text-offset": [
                        0,
                        0.75
                    ],
                    "text-size": {
                        "base": 1,
                        "stops": [
                            [
                                8,
                                14
                            ],
                            [
                                12,
                                16
                            ]
                        ]
                    },

                    // "line-cap": "round",
                    // "line-join": "round",
                    "visibility": "visible",
                },
                "metadata": {
                    "group": "Airspace Labels - Controlled"
                },
                paint: {
                    "text-color": "#fff",
                    // "text-halo-color": "#de3b6c",
                    // "text-halo-color": "#163864",
                    "text-halo-color": "#ag0f7e",
                    "text-halo-width": 2,
                },
                filter: [
                    "!=", ['get', 'type'],
                    'L'
                ]
            })
        })


    </script>
</body>

</html>

3.3 leaflet 集成mapbox 并使mapbox底图为透明

底图透明原理为添加自定义样式，自定义样式为透明。

import 'leaflet';//"leaflet": "^1.8.0",
import 'leaflet/dist/leaflet.css';
import "mapbox-gl/dist/mapbox-gl.js"; //"mapbox-gl": "^1.5.1",
import "mapbox-gl/dist/mapbox-gl.css";

import "mapbox-gl-leaflet";//    "mapbox-gl-leaflet": "^0.0.16",


       let token =
            "token ";

          const blankStyle = {
            version: 8,
            name: "BlankMap",
            sources: {},
            layers: [
              {
                id: "background",
                type: "background",
                paint: {
                  "background-color":
                    "rgba(255, 255, 255, 0)" /* 背景颜色-透明 */,
                },
              },
            ],
          };
          var gl = L.mapboxGL({
            accessToken: token,
            style: blankStyle,
            zoom: 8, // starting zoom
          }).addTo(map);

          //添加矢量瓦片源
          const mapboxMap = gl.getMapboxMap();
          console.log(mapboxMap);
          mapboxMap.on("load", () => {
            mapboxMap.addSource("geoserver-source", {
              type: "vector",
              type: "vector",
              format: "pbf",
              maxzoom: 12,
              minzoom: 0,
              // scheme: "tms",
              // tiles: [
              //   "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/ne:gxsf@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
              // ],
              tiles: [
                "http://localhost:8080/geoserver/ne/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=ne:gxsf&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}",
              ],
            });

            // 添加图层
            mapboxMap.addLayer({
              id: "gxsf",
              type: "fill",
              source: "geoserver-source",
              "source-layer": "gxsf", // 数据集中的图层名称
              paint: {
                "fill-color": "#0080ff",
                "fill-opacity": 0.5,
              },
            });
          });

3.3 ol加载

geoserver中有示例。

4.题外话

4.1 手动切片

qgis手动切片
geoserver缓存切片，需配合geoserver使用。（单独使用不好用）

4.1.1 qgis矢量切片

工具箱 -->矢量瓦片

4.1.2qgis栅格切片

需先改样式

图层属性-->符号化-->改样式与线条

工具箱 -->栅格瓦片

4.2 xyz瓦片加载

          // 添加xyz瓦片图层到Leaflet地图
          const xyzLayer = L.tileLayer('http://127.0.0.1:5500/{z}/{x}/{y}.png', {
            minZoom:5,
            maxZoom: 18,//展示的最大级别
            // maxNativeZoom: 12,  //控制最大级别是否请求展示。若达到12级图层无最新瓦片，则不再请求，并将12级展示在地图上不消失。
          });
          xyzLayer.addTo(map);