GeoServer发布矢量瓦片

m0_50299172

已于 2024-08-16 20:31:19 修改

阅读量2.4k

点赞数 41

CC 4.0 BY-SA版权

文章标签： javascript web

于 2024-08-15 22:15:08 首次发布

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

GeoServer安装

安装包下载地址

Java环境安装，geoserver2.25 需要依赖java11或java17环境

如果已经配置过java11或者java17可跳过此步骤，后续安装geoserver时会自动读取JAVA_HOME变量。

如果没有安装过则解压jdk-11.0.24_windows-x64_bin.zip并配置JAVA_HOME等环境变量。

如果已经配置过java8环境则直接解压jdk-11.0.24_windows-x64_bin.zip后续安装geoserver 手动设置

java11目录即可。
geoserver安装

双击GeoServer-2.25.3-winsetup.exe

选择java11环境目录

设置用户名密码

设置端口号

安装完成后访问geoserver首页

瓦片服务发布

输入安装时设置的用户名密码登录geoserver
创建工作空间
创建存储仓库

创建存储仓库

新建数据源，此处使用PostGIS

输入数据源连接信息
发布图层

选择要发布的数据

设置范围信息
预览wms服务

矢量瓦片发布

解压geoserver-2.25-vectortiles-plugin.zip到C:\Program Files\GeoServer\webapps\geoserver\WEB-INF\lib目录
以管理员权限运行C:\Program Files\GeoServer\bin目录下的stopService.bat和startService.bat脚本重启geoserver，发布服务界面图形格式出现如下结果证明插件安装成功,勾选application/vnd.mapbox-vector-tile选项即可发布矢量瓦片服务

在这里插入图片描述

矢量瓦片预览

在这里插入图片描述

MapBox加载矢量瓦片

geoserver配置跨域访问

拷贝jetty-http-9.4.52.v20230823.jar,jetty-servlets-9.4.52.v20230823.jar,jetty-util-9.4.52.v20230823.jar到C:\Program Files\GeoServer\webapps\geoserver\WEB-INF\lib目录

修改C:/Program Files/GeoServer/webapps/geoserver/WEB-INF/web.xml配置文件,取消下图两处注释

重启geoserver
前端加载

加载矢量瓦片样式文件可以maputnik进行配置,具体操作参考maputnik配置geoserver矢量瓦片样式

<!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';
    var mapStyle = {
  "version": 8,
  "name": "Empty Style",
  "metadata": {"maputnik:renderer": "mlgljs"},
  "sources": {
    "xinxiao": {
      "type": "vector",
      "tiles": [
          // 参照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}"
      ],
      "scheme": "xyz",
      "minzoom": 0,
      "maxzoom": 24
    }
  },
  "sprite": "",
  "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
  "layers": [
    {
      "id": "1",
      "type": "fill",
      "source": "xinxiao",
      "source-layer": "110100",//参照实际数据填写
      "layout": {"visibility": "visible"},
      "paint": {
        "fill-color": "rgba(72, 24, 229, 1)",
        "fill-antialias": true
      }
    }
  ],
  "id": "0f6lhej"
}

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

</body>

</html>

在这里插入图片描述