当前位置：首页 > news >正文

vue+openlayers示例：适配arcgis矢量瓦片服务以及样式(附源码下载)

news 2025/8/21 9:16:04

由于单位这边有个项目是基于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>