OpenLayers：海量图形渲染之矢量切片

Carlos_sam2025-04-02 10:05

最近由于在工作中涉及到了海量图形渲染的问题，因此我开始研究相关的解决方案。在咨询了许多朋友之后发现矢量切片似乎是行业内最常用的一种解决方案，于是我便开始研究它该如何使用。

一、什么是矢量切片

矢量切片按照我的理解就是用栅格切片的方式把矢量数据也切成金字塔，只不过切割的不是栅格图片，而是矢量数据的描述性文件。

矢量切片的特点

因此矢量切片它就兼具矢量数据与栅格数据的优点，比如说：

  • 矢量瓦片相比于栅格图片更加灵活，可以直接访问矢量要素，因为矢量数据是以要素为单位的，而栅格数据它就是一个图片那就难以直接访问到具体的要素了。
  • 可直接在客户端获取请求指定地物的信息，无须再次请求服务器。因为空间数据和属性数据一起被请求到客户端了，无需再次请求了。
  • 样式可改变和定制。因为我们拿到的只是矢量数据，因此就可以在客户端自由的给它设置样式。
  • 相比于原始矢量数据，矢量瓦片更小巧，进行了重新编码并切分，在被请求时可以只返回请求区域和相应级别的数据。这个优点也就是我想使用它的理由，我期望矢量切片可以帮助我解决海量图形渲染的问题。
  • 数据更新快，甚至可以说是实时的，当数据库中的空间数据变化后，再次请求的数据是更新后的数据。

二、发布矢量切片服务

如何发布矢量瓦片服务，具体要看你使用的是什么WebGIS服务器，不同的WebGIS服务器操作的步骤可能都不一样，需要专门去查阅相关资料。我在实验的过程中是使用GeoServer来发布矢量切片的。

GeoServer中发布矢量切片

1.下载Vector Tiles 插件

GeoServer中无法直接实现矢量切片，需要下载对应的插件。

插件在官网中就可以下载（Download - GeoServer），但是注意要到自己所安装的对应geoserver版本的下载页面中去下载插件，如果下载了其它版本下的插件，可能会在启动geoserver时导致报错。

由于我安装的是2.21.5版本的geoserver，因此就进入这个版本的下载页面。

然后下滑到下面的 Extensions 部分就可以找到对应的插件。

2.安装Vector Tiles插件

将下载的插件解压之后得到如下的这些文件，复制其中的.jar文件（jar包）。

将复制好的文件放到geoserver的 WEB-INF/lib目录下，这个目录中都是各种.jar文件，比较好辨认。

3.检查Vector Tiles插件是否安装成功

安装插件成功后重新启动GeoServer，然后打开GeoServer的图层页面

然后随便选择一个矢量图层

然后进入Tile Caching页面

滚动页面到 "Tile Image Formats" 部分，除了标准的GIF/PNG/JPEG格式之外，如果你好看到以下的内容就表示插件安装成功了。

4.发布矢量切片

发布矢量切片的过程也很简单，首先将自己准备的数据创建为一个矢量图层（具体的步骤我就不多说了）。

这里我就随便选择了一个GeoServer中的美国人口的矢量面图

点击进入"图层编辑"页面，然后再进入"Tile Caching"选项卡

滚动页面到 "Tile Image Formats" 部分，勾选application/json;type=geojson、application/json;type=topojson和application/vnd.mapbox-vector-tile这几个选项（注意：这三个选项对应了三种不同格式的矢量切片数据，我们每勾选一种就会GeoServer就会制作发布一种对应格式的矢量切片）

最后点击保存，一个带有矢量切片的图层就准备好了。

三、OpenLayers中加载矢量切片

1.加载TMS服务的矢量切片

网上绝大多数的文章中都是加载的TMS服务的矢量切片，这种加载方式看起来还是比较简单的，但是我在实际使用的时候却发现"困难重重"实际上用起来比较麻烦。

获取TMS服务地址

首先第一步我们要搞清楚我们所发布的矢量瓦片的TMS服务的url地址是什么。可以打开Goeserver去查看。

点击左上角的logo进入首页

在首页点击TMS的链接

进入的这个页面中就记录了目前我的这台GeoServer服务器上发布的所有TMS服务的url。

找到之前设置了矢量切片的图层的链接（例如我下面的这个美国人口的图层）

这其中以geojson、topojson和pbf结尾的url就是矢量切片的url。

然后就可以拿到一个类似于http://localhost:8080/geoserver/gwc/service/tms/1.0.0/topp%3Astates@EPSG%3A4326@geojson这样的url。这个url由几个部分组成：

  1. http://localhost:8080/geoserver/gwc/service/tms/1.0.0 这部分在同一个GeoServer服务器上是固定的。
  2. /topp%3Astates 这部分表示图层名，其中的%3A是冒号的URL编码形式，所以我这里的图层就叫做topp:states
  3. @EPSG%3A4326 这部分表示投影，我这使用的是 EPSG:4326
  4. @geojson 这部分表示数据的格式

一个完整的TMS的url还不止上面的这些，它应该还要包括切片的具体信息，例如：http://localhost:8080/geoserver/gwc/service/tms/1.0.0/topp%3Astates@EPSG%3A4326@geojson/3/2/1.geojson

后面的/3/2/1分别代表切片的层级、列号和行号。

加载TMS矢量切片的方式

OpenLayers中加载矢量切片都需要使用VectorTile 图层 + VectorTile数据源的方式来实现。

创建VectorTile 图层时可以通过style属性给请求到的矢量瓦片数据设置样式。

创建VectorTile数据源时则主要是要设置三个属性：

  1. url，即矢量瓦片服务的地址，由于OpenLayers中不支持直接请求TMS服务，所以需要通过请求XYZ服务的方式请求TMS，因此url要写成"http://localhost:8080/geoserver/gwc/service/tms/1.0.0/BeiJiang%3Abj@EPSG%3A4326@geojson/{z}/{x}/{-y}.geojson"的形式，也就是用占位符{z}、{x}、{y}来表示切片的层级、列号和行号。但是这里有一点特殊的地方在于使用的是{-y}，之所以这样写是因为XYZ瓦片的y坐标从顶部开始向下递增，TMS瓦片的y坐标从底部开始向上递增，也就是说他们的y轴方向相反，所以url中要写成{-y}进行转换。
  2. format，这个属性是用来将矢量数据转换为Feature的，如果矢量切片的数据类型是geojson就使用GeoJSON转换器，如果矢量切片的数据类型是pbf就使用MVT转换器（这些转换器都是OpenLayers封装好的的都在ol/format目录下面）。
  3. tileGrid，这个属性应该用来定义切片规则的，具体怎么定义的我也搞不懂。这里由于我们使用的是加载XYZ服务的方式，所以可以直接使用OpenLayers内置的createXYZ函数来直接创建适合XYZ服务的tileGrid。但是在使用createXYZ函数时特别要注意，其中的extent属性默认为 EPSG:3857 投影的范围，如果你像我一样使用的是其它的投影（例如 EPSG:4326）,那就必需要手动将这个属性设置为你所使用的投影的范围，否则请求的url将会404（不要问我是怎么知道的😭）
JavaScript 复制代码 
import { VectorTile as VectorTileLayer } from "ol/layer";
import { VectorTile as VectorTileSource } from "ol/source";
import { Style, Stroke, Circle as CircleStyle } from "ol/style";
import { GeoJSON} from "ol/format";
import { createXYZ } from "ol/tilegrid";

// 加载矢量切片
const riverVectorTileLayer = new VectorTileLayer({
  source: new VectorTileSource({
    url: "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/BeiJiang%3Abj@EPSG%3A4326@geojson/{z}/{x}/{-y}.geojson",
    format: new GeoJSON(),
    tileGrid: new createXYZ({
      extent: getProjection("EPSG:4326").getExtent(),
      maxZoom: 18,
    }),
  }),
  style: function (feature) {
    const style = new Style({
      stroke: new Stroke({
        color: "blue",
        width: 1,
      }),
    });
    return style;
  },
});
map.addLayer(riverVectorTileLayer);

但是我使用上面的这套代码进行加载却失败了，请求到的数据都是空的，这个就很奇怪，我看到很多的博客中都是这么写的，他们都能加载出来，我却加载不出来 ╭(╯^╰)╮。

之后，我历经了千辛万苦终于找到了原因出在哪里，我发现只要将层级z减一就能够请求到正确的矢量切片数据，这就说明XYZ的层级跟TMS的层级好像是不匹配的，有可能XYZ切片的层级是从1开始计数的，而TMS切片的层级是从0开始计数的。

想要将z减一，就需要使用tileUrlFunction属性，这个属性接收一个函数，然后XYZ切片的坐标就会作为参数传入到函数中，之后就可以根据XYZ切片的坐标来换算出TMS切片的坐标。

要换算的地方有两个，一是将z减一这个比较简单，二是要将y进行转换（因为它们的y轴是相反的）。

Bash 复制代码 
# 进行y轴转换的公式
y_tms = 最大行号 - y_xyz
# 因为
最大行号 = 总行数 - 1
# 所以
y_tms = 总行数 - 1 - y_xyz
# 又因为
总行数 = 2 ^ z_tms  # 2的z次方
z_tms = z_xyz - 1
# 所以最终的公式为
y_tms = (2 ^ (z_xyz - 1)) - 1  - y_xyz
JavaScript 复制代码 
import { VectorTile as VectorTileLayer } from "ol/layer";
import { VectorTile as VectorTileSource } from "ol/source";
import { Style, Stroke, Circle as CircleStyle } from "ol/style";
import { GeoJSON} from "ol/format";
import { createXYZ } from "ol/tilegrid";

// 加载矢量切片
const riverVectorTileLayer = new VectorTileLayer({
  source: new VectorTileSource({
    tileUrlFunction: function (tileCoord) {
      const [z, x, y] = tileCoord;
      const url =
        "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/BeiJiang%3Abj@EPSG%3A4326@geojson/" +
        (z - 1) +
        "/" +
        x +
        "/" +
        (Math.pow(2, z - 1) - 1 - y) +
        ".geojson";
      return url;
    },
    format: new GeoJSON(),
    tileGrid: new createXYZ({
      extent: getProjection("EPSG:4326").getExtent(),
      maxZoom: 18,
    }),
  }),
  style: function (feature) {
    const style = new Style({
      stroke: new Stroke({
        color: "blue",
        width: 1,
      }),
    });
    return style;
  },
});
map.addLayer(riverVectorTileLayer);

通过上面的方式我最终才将我自己的矢量切片加载出来了

2.加载WMTS服务的矢量切片

之后我又看到了另一种加载方式，通过WMTS进行加载。WMTS加载起来那就比TMS要复杂很多了，但是其实是有一条"捷径"的。

在GeoServer中，进入切片图层页面。

选择一个带有矢量切片的矢量图层，在预览的下拉菜单中选择带有geojson、topojson或pbf的选项就可以预览矢量切片

然后F12打开调试工具查看页面的源代码，在demo文件夹中就可以找到通过WMTS加载矢量切片的代码，直接照抄就可以了。

JavaScript 复制代码 
// 通过WMTS加载矢量切片
function addRiver_vectorTileWMTS() {
  const baseUrl = "http://localhost:8080/geoserver/gwc/service/wmts";
  const layerName = "BeiJiang:bj";
  const style = "";
  const gridsetName = "EPSG:4326";
  const format = "application/json;type=geojson";
  const resolutions = [
    0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625,
    0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625,
    6.866455078125e-4, 3.4332275390625e-4, 1.71661376953125e-4,
    8.58306884765625e-5, 4.291534423828125e-5, 2.1457672119140625e-5,
    1.0728836059570312e-5, 5.364418029785156e-6, 2.682209014892578e-6,
    1.341104507446289e-6, 6.705522537231445e-7, 3.3527612686157227e-7,
  ];
  const params = {
    REQUEST: "GetTile",
    SERVICE: "WMTS",
    VERSION: "1.0.0",
    LAYER: layerName,
    STYLE: style,
    TILEMATRIX: gridsetName + ":{z}",
    TILEMATRIXSET: gridsetName,
    FORMAT: format,
    TILECOL: "{x}",
    TILEROW: "{y}",
  };

  let url = baseUrl + "?";
  for (var param in params) {
    url = url + param + "=" + params[param] + "&";
  }
  url = url.slice(0, -1);

  riverVectorTileLayer = new VectorTileLayer({
    source: new VectorTileSource({
      url,
      format: new GeoJSON(),
      projection: "EPSG:4326",
      tileGrid: new WMTSTileGrid({
        extent: [-180, -90, 180, 90],
        resolutions: resolutions,
        matrixIds: [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "20",
          "21",
        ],
      }),
    }),
    style: function (feature) {
      const style = new Style({
        stroke: new Stroke({
          color: "blue",
          width: 1,
        }),
      });
      return style;
    },
  });
  map.addLayer(riverVectorTileLayer);
}

参考资料

  1. 矢量切片(Vector tile)_a vectortile source can only be rendered if it has-CSDN博客
  2. Openlayer加载geoserver发布的矢量切片_openlayers 加载geoserver xyz-CSDN博客
  3. QGIS加载Geoserver发布的矢量瓦片服务 - 槑孒 - 博客园
  4. 10openlayers加载矢量瓦片图层-CSDN博客
  5. GeoServer官方教程：矢量切片
  6. OpenLayers教程十：多源数据加载之瓦片地图原理二
  7. 【webgis】地图切片|矢量地图切片|栅格地图切片-CSDN博客
相关推荐
姑苏洛言2 分钟前
基于微信小程序实现幸运大转盘页面
前端
前端极客探险家4 分钟前
如何实现一个支持拖拽排序的组件：React 和 Vue 版
前端·vue.js·react.js·排序算法
yanyu-yaya8 分钟前
devextreme-react/scheduler 简单学习
前端·学习·react.js
limit for me13 分钟前
react使用eventBus在不同模块间进行通信
前端·react.js
__不想说话__40 分钟前
面试官问我React组件和state的关系，我指了指路口的红绿灯…
前端·javascript·react.js
一个小潘桃鸭43 分钟前
需求：对表格操作列中的操作进行局部刷新
前端
番茄比较犟44 分钟前
Combine知识点switchToLatest
前端
北京_宏哥44 分钟前
🔥《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理
前端·面试·charles
Process1 小时前
前端图片技术深度解析：格式选择、渲染原理与性能优化
前端·面试·性能优化
大松鼠君1 小时前
轿车3D展示
前端·webgl·three.js
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程05苍穹外卖面试总结06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07循环神经网络RNN（含LSTM，GRU）小综述08RAG 实践- Ollama+RagFlow 部署本地知识库09如何本地部署AI智能体平台，带你手搓一个AI Agent10Android下HWC以及drm_hwcomposer普法(上)