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-tianditulayerType="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>