maputnik配置geoserver矢量瓦片样式

m0_50299172

于 2024-08-16 20:30:00 发布

阅读量1.8k

点赞数 25

文章标签： web

本文链接：https://blog.csdn.net/m0_50299172/article/details/141268987

版权

使用geoserver发布矢量瓦片服务

具体步骤参考GeoServer发布矢量瓦片

maputnik本地化部署

maputnik代码仓库

运行npm install安装依赖后运行npm start启动服务

访问maputnik站点

maputnik配图模板

maputnik提供了一些配图模板以供浏览参考
在这里插入图片描述

maputnik样式规范及常见制图效果配置方法参考maputnik样式规范及常见制图效果配置

配置geoserver矢量瓦片样式

添加datasource。此处SourceType选择Vector(XYZ URLs)，设置好SourceID后续添加图层会用到，矢量瓦片服务地址设置为geoserver发布的服务地址即可http://localhost:8080/geoserver/xinxiao/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=xinxiao:110100&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}
添加图层。source设置为上一步添加的SourceID,Source Layer设置为geoserver发布服务的图层名称。
修改填充色进行配图
添加Symbol类型图层配置文本标注
配置name字段作为文本标注。此处使用maputnik配置后显示的都是拼音，但是在mapbox中加载是正常的，有知道原因的小伙伴希望不吝赐教

在这里插入图片描述

MapBox加载浏览

导出maputnik样式
MapBox加载预览

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title>加载第三方矢量切片</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.1.0/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.1.0/mapbox-gl.css" rel="stylesheet" />

  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id='map'></div>
  <script>
    mapboxgl.accessToken = 'your accessToken';
      //替换为maputnik导出的样式即可
    var mapStyle = {
  "version": 8,
  "name": "Empty Style",
  "metadata": {"maputnik:renderer": "mlgljs"},
  "sources": {
    "xinxiao": {
      "type": "vector",
      "tiles": [
        "http://localhost:8080/geoserver/xinxiao/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=xinxiao:110100&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}"
      ],
      "minzoom": 0,
      "maxzoom": 14
    }
  },
  "sprite": "",
  "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
  "layers": [
    {
      "id": "110100",
      "type": "fill",
      "source": "xinxiao",
      "source-layer": "110100",
      "paint": {"fill-color": "rgba(228, 14, 14, 1)"}
    },
    {
      "id": "110100-Label",
      "type": "symbol",
      "source": "xinxiao",
      "source-layer": "110100",
      "layout": {
        "text-field": "{name}",
        "text-font": ["Noto Sans Regular"],
        "text-size": 16,
        "visibility": "visible",
        "text-allow-overlap": false,
        "symbol-avoid-edges": true
      },
      "paint": {
        "text-color": "hsl(0, 0%, 0%)",
        "text-halo-color": "hsla(0, 0%, 100%, 0.75)",
        "text-halo-width": 2
      }
    }
  ],
  "id": "xom5oid"
}

    var map = new mapboxgl.Map({
      container: 'map',
      style: mapStyle,
      zoom: 14,
      center: [116.08, 40.54]
    });
  </script>

</body>

</html>

在这里插入图片描述