openlayers WebGL加载地图（栅格切片、矢量切片）

本篇介绍一下使用openlayers WebGL方式加载地图（栅格切片、矢量切片）

1 需求

• WebGL方式加载地图（栅格切片、矢量切片）

2 分析

栅格切片使用WebGLTile创建图层
矢量切片使用VectorTile创建图层（它默认支持WebGL，所以不需要额外配置WebGL相关的参数，如果浏览器不支持WebGL，OpenLayers将回退到使用Canvas渲染）

4 实现

<template>
  <div id="map" class="map"></div>
</template>

<script setup lang="ts">
import { Map, View } from 'ol';
import { MVT } from 'ol/format';
import {
  WebGLTile as WebGLTileLayer,
  VectorTile as VectorTileLayer,
  Tile as TileLayer
} from 'ol/layer';
import { fromLonLat, get } from 'ol/proj';
import { XYZ,VectorTile as VectorTileSource } from 'ol/source';

const projection = get('EPSG:3857');

const layerTypeMap = {
  vector: ['vec', 'cva'], // [矢量底图, 矢量注记]
  image: ['img', 'cia'], // [影像底图, 影像注记]
  terrain: ['ter', 'cta'] // [地形晕渲, 地形注记]
};

const map = shallowRef();

onMounted(() => {
  initMap('image');
});

const initMap = (layerType = 'image') => {
  const key = '替换为天地图key';

  // c: 经纬度 w: 墨卡托
  const matrixSet = 'w';
  map.value = new Map({
    target: 'map',
    layers: [
      // 底图
      new WebGLTileLayer({
        source: new XYZ({
          url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap[layerType][0]}_${matrixSet}&tk=${key}&x={x}&y={y}&l={z}`,
          projection
        })
      }),
      // 注记
      new WebGLTileLayer({
        source: new XYZ({
          url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap[layerType][1]}_${matrixSet}&tk=${key}&x={x}&y={y}&l={z}`,
          projection
        })
      }),
      new VectorTileLayer({
        opacity:0.5,
        source: new VectorTileSource({
          projection,
          format: new MVT(),
          url: 'https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf'
        })
      })
    ],
    view: new View({
      center: fromLonLat([116.406393, 39.909006]),
      projection: projection,
      zoom: 5,
      maxZoom: 17,
      minZoom: 1
    })
  });
};
</script>
<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
}
</style>

5 栅格切片和矢量切片

5.1 栅格切片

• 定义：栅格切片是预渲染的图像，通常是PNG、JPEG或WebP格式，每个切片都是一个固定大小的图像（如256x256像素）。
• 存储与传输：每个切片独立存储，根据地图的缩放级别（zoom level）和位置，客户端请求并缓存所需的切片。传输的是完整的图像数据，即使只有一小部分数据改变，也需要重新下载整个切片。
• 渲染：渲染速度快，因为客户端只需显示预渲染的图像。但是，如果地图需要动态样式更改，则效率较低，因为需要重新请求和渲染整个切片。

5.2 矢量切片

• 定义：矢量切片存储的是矢量数据，如点、线、多边形等，而不是预渲染的图像。最常见的格式是Mapbox Vector Tile (.mvt或.pbf)，它是一种高效压缩的二进制格式。（矢量切片就是将矢量数据以金字塔的组织方式，切割成一个一个描述性文件）
• 存储与传输：传输的是矢量数据，因此只有发生变化的数据才会被发送，数据量通常小于栅格切片。矢量数据在客户端被解析和渲染，这意味着可以根据需要动态调整样式和细节。
• 渲染：矢量切片需要在客户端进行实时渲染，这可能比显示预渲染的栅格切片慢，尤其是在处理大量数据时。但是，它允许动态样式更改和交互，例如根据数据属性调整样式
• 矢量切片格式：

1. GeoJSON
2. TopoJSON
3. MapBox Vector Tile（MVT）