十九、openlayers官方示例Custom Canvas Tiles解析——自定义调试图层显示瓦片的索引信息（包括缩放级别、x 和 y 坐标）

官网demo地址：

Custom Canvas Tiles 

这个例子加载了MVT格式的矢量数据，并且用TileDebug显示了对应的切片网格。

什么是MVT？

MVT (Mapbox Vector Tile) 格式是一种用于存储地理数据的格式，特别适合用于在客户端渲染矢量地图。MVT 文件包含矢量数据的分块（tiles），这些块可以快速传输和渲染。

MVT和GeoServer数据源的区别

• GeoServer:

  • 通常提供 WFS (Web Feature Service) 或 WMS (Web Map Service) 数据。
  • 返回的 feature 通常是 GeoJSON 格式，包含丰富的属性信息和几何数据。
  • 数据交换: 适用于不同系统和平台之间的数据交换，因其简单明了的格式易于解析和生成。
  • 数据存储: 适用于存储和版本控制，因为文本格式便于比较和管理。
  • 简单应用: 适用于简单的 web 地图应用和静态地图展示，不需要高性能的传输和渲染。

• Mapbox Vector Tiles (MVT):

  • 使用矢量瓦片（Vector Tiles）传输地理数据，通常使用 Protocol Buffers 格式。
  • 返回的 feature 经过压缩和简化，以便快速渲染。

  • MVT:

    • Web 地图: 适用于需要高效传输和客户端渲染的交互式 web 地图应用，如 Mapbox GL JS 和 OpenLayers。
    • 大规模数据: 适合处理大规模地理数据集，因为其分块设计允许渐进式加载和渲染。
    • 性能优化: 由于其高效的压缩和二进制格式，适合带宽受限的环境。

在网络请求里看一下MVT格式的数据源

可以看到是一个文件流，具体也看不出什么。

然后，随便找一个请求复制一下网址，到浏览器新标签中打开，就可以下载当前的切片。

https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/3/3/5.pbf

使用QGIS打开看一下，就可以看到刚才加载的地块。

接下里来看TileDebug，它是一个伪矢量源，主要就显示每个贴图的坐标。它可以自定义一些属性，template模板中的内容可以修改。

const debugLayer = new TileLayer({
      source: new TileDebug({
        template: "z:{z} x:{x} y:{-y}",
        projection: vtLayer.getSource().getProjection(),
        tileGrid: vtLayer.getSource().getTileGrid(),
        zDirection: 1,
      }),
    });

完整代码：

<template>
  <div class="box">
    <h1>CustomCanvasTiles</h1>
    <div id="map"></div>
  </div>
</template>

<script>
import MVT from "ol/format/MVT.js";
import Map from "ol/Map.js";
import TileDebug from "ol/source/TileDebug.js";
import TileLayer from "ol/layer/Tile.js";
import VectorTileLayer from "ol/layer/VectorTile.js";
import VectorTileSource from "ol/source/VectorTile.js";
import View from "ol/View.js";
import { Fill, Stroke, Style, Text } from "ol/style.js";
export default {
  name: "",
  components: {},
  data() {
    return {
      map: null,
    };
  },
  computed: {},
  created() {},
  mounted() {
    const style = new Style({
      fill: new Fill({
        color: "rgba(255, 255, 255, 0.6)",
      }),
      stroke: new Stroke({
        color: "#319FD3",
        width: 1,
      }),
      text: new Text({
        font: "12px Calibri,sans-serif",
        fill: new Fill({
          color: "#000",
        }),
        stroke: new Stroke({
          color: "#fff",
          width: 3,
        }),
      }),
    });

    const vtLayer = new VectorTileLayer({
      declutter: true,
      source: new VectorTileSource({
        maxZoom: 15,
        format: new MVT(),
        url:
          "https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/" +
          "ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf",
      }),
      style: function (feature) {
        style.getText().setText(feature.get("name"));
        return style;
      },
    });

    const debugLayer = new TileLayer({
      source: new TileDebug({
        template: "z:{z} x:{x} y:{-y}",
        projection: vtLayer.getSource().getProjection(),
        tileGrid: vtLayer.getSource().getTileGrid(),
        zDirection: 1,
      }),
    });

    const map = new Map({
      layers: [vtLayer, debugLayer],
      target: "map",
      view: new View({
        center: [0, 6000000],
        zoom: 4,
      }),
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 500px;
}
.box {
  height: 100%;
}
</style>