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

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

1 需求

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

2 分析

栅格切片使用ol-webgl-tile-layer 矢量切片使用ol-vector-tile-layer（默认支持webgl）

4 实现

<template>
  <ol-map
    :loadTilesWhileAnimating="true"
    :loadTilesWhileInteracting="true"
    style="width: 100%; height: 100%"
    ref="mapRef"
  >
    <ol-view ref="view" :center="center" :zoom="zoom" :projection="projection" />
    <ol-webgl-tile-layer>
      <ol-source-tianditu
        layerType="img"
        :projection="projection"
        :tk="key"
        :hidpi="true"
        ref="sourceRef"
      ></ol-source-tianditu>
    </ol-webgl-tile-layer>
    <ol-webgl-tile-layer>
      <ol-source-tianditu
        :isLabel="true"
        layerType="img"
        :projection="projection"
        :tk="key"
        :hidpi="true"
      ></ol-source-tianditu>
    </ol-webgl-tile-layer>
    <ol-vector-tile-layer :opacity="0.5">
      <ol-source-vector-tile :url="url" :format="mvtFormat">
      </ol-source-vector-tile>
    </ol-vector-tile-layer>
  </ol-map>
</template>

<script setup lang="ts">
import { fromLonLat } from 'ol/proj';

const center = ref(fromLonLat([121, 31]));
const projection = ref('EPSG:3857');
const zoom = ref(5);
const mapRef = ref();
const key = '替换为天地图key';
const sourceRef = ref(null);
const format = inject("ol-format");
const mvtFormat = new format.MVT();
const url = ref(
  "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf",
);
</script>
<style scoped lang="scss"></style>