由于單位這邊有個項目是基于openlayers地圖引擎框架實現webgis地圖可視化功能，但是要調用第三方的arcgis矢量瓦片服務以及適配樣式，在這個背景下，基于openlayers+vue實現適配arcgis矢量瓦片服務以及樣式效果，適合學習openlayers與前端框架結合webgis開發可視化項目。

備注：由于地圖服務數據保密性以及局域網性質，源碼里面的矢量瓦片服務地址都是訪問不到的，真正運用要自行替換修改自己實際的矢量瓦片服務地址。

demo源碼運行環境以及配置

運行環境：依賴Node安裝環境，demo本地Node版本:推薦v18+。

運行工具：vscode或者其他工具。

配置方式：下載demo源碼，vscode打開，然后順序執行以下命令：
（1）下載demo環境依賴包命令：npm install
（2）啟動demo命令：npm run dev
（3）打包demo命令： npm run build

技術棧

Vue 3.3.9

Vite 5.0.4

ol 10.6.1

示例效果

核心源碼

<template><div id="map" class="map-container"></div>
</template>
<script setup>
import { onMounted } from 'vue';
import 'ol/ol.css';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import MVT from 'ol/format/MVT.js';
import VectorTileSource from 'ol/source/VectorTile.js';
import WebGLTileLayer from 'ol/layer/WebGLTile.js';
import Source from 'ol/source/ImageTile.js';
import VectorTileLayer from 'ol/layer/VectorTile.js';
import { fromLonLat } from 'ol/proj';
const accessToken = 'a1ae7c4c6e7c525adda2aeeb9928a7fa54e425d46c4f2338f93df06307652331';
const parcelsStyle = {……} // 由于樣式過長，具體見完整的源碼demo
onMounted(() => {const parcelsSource = new VectorTileSource({format: new MVT(),// url: `https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer/tile/{z}/{y}/{x}.pbf`,url:'https://xxx.xxx.com.cn/api/energy-geo-services/proxy/esri.proxy?https://xxx.xxx.com.cn/server/rest/services/Hosted/ChuLiJiSuanZhanChang/VectorTileServer/tile/{z}/{y}/{x}.pbf?accessToken=' +accessToken, // 這里arcgis矢量瓦片服務URL需要具體替換});const parcelsLayer = new VectorTileLayer({source: parcelsSource});new Map({layers: [new WebGLTileLayer({source: new Source({url:'https://ibasemaps-api.arcgis.com/arcgis/rest/services/' + 'World_Imagery/MapServer/tile/{z}/{y}/{x}?token=AAPKca495ea263b64e44b61eaaecdbddebfcwEQjC8k8-6XGMrrXyCie6xzybboRl4REq-TwDQTm8Wz-8sL6REARz1wcm14Kq9ny',}),}),parcelsLayer],target: 'map',view: new View({// center: fromLonLat([-118.4877, 34.0227]),// zoom: 14,center: fromLonLat([113.47, 23.47]), // 關鍵轉換zoom: 7,}),});applyStyle(parcelsLayer, parcelsStyle, {updateSource: false})
})
</script>