基于 OpenLayers 和 ol-cesium 的 Vue 3 地图组件库，提供 2D 和 3D 地图可视化功能。 特性 🗺️ 同时支持 2D (OpenLayers) 和 3D (ol-cesium) 地图视图 🚀 基于 Vue 3 构建，提供高效响应式地图组件 🎛️ 丰富的 API 接口，支持自定义地图控件和交互 🌍 支持多种地图投影和图层类型 🌄 3D 地形和建筑物渲染 📦 轻量级设计，按需加载 安装 bash npm install ol-cesium-vue-components

或者

yarn add ol-cesium-vue-components 快速开始 完整引入 javascript import { createApp } from 'vue' import App from './App.vue' import OlCesiumVueComponents from 'ol-cesium-vue-components' import 'ol-cesium-vue-components/dist/style.css'

const app = createApp(App) app.use(OlCesiumVueComponents) app.mount('#app') 按需引入 javascript import { createApp } from 'vue' import App from './App.vue' import { OlMap, OlCesiumMap } from 'ol-cesium-vue-components' import 'ol-cesium-vue-components/dist/style.css'

const app = createApp(App) app.component('ol-map', OlMap) app.component('ol-cesium-map', OlCesiumMap) app.mount('#app') 在模板中使用 vue

<!-- 3D地图 -->
<ol-cesium-map 
  ref="olCesiumMapRef"
  :center="[116.3972, 39.9075]" 
  :zoom="10" 
  :terrain="true"
  height="400px"
/>

组件 API OlMap 组件属性 属性名 类型 默认值 说明 center Array [0, 0] 地图中心点坐标 [x, y] zoom Number 2 地图缩放级别 projection String 'EPSG:3857' 地图投影方式 baseLayer String/Object 'OSM' 底图图层类型 height String '400px' 地图容器高度 width String '100%' 地图容器宽度 controls Array 标准控件 地图控件列表 interactions Array 标准交互 地图交互方式 OlCesiumMap 额外属性 属性名 类型 默认值 说明 terrain Boolean false 是否启用地形 globeOptions Object {} Cesium 地球配置选项 skyAtmosphere Boolean true 是否显示大气效果 baseLayer3D String 'OSM' 3D 模式下的底图 事件 事件名 参数 说明 mapReady map 地图初始化完成时触发 click event 地图点击时触发 dblclick event 地图双击时触发 pointermove event 鼠标移动时触发 change:zoom zoom 缩放级别变化时触发 change:center center 地图中心点变化时触发 方法 通过组件引用可以调用以下方法：

javascript // 获取OpenLayers地图实例 const map = mapRef.value.getMap()

// 获取OlCesium实例(仅OlCesiumMap组件有) const ol3d = mapRef.value.getOlCesium()

// 切换3D/2D视图(仅OlCesiumMap组件有) mapRef.value.toggle3D(true)

// 添加要素 mapRef.value.addFeature(feature)

// 添加图层 mapRef.value.addLayer(layer)

// 移除图层 mapRef.value.removeLayer(layer)

// 设置视图中心 mapRef.value.setCenter(ol.proj.fromLonLat([116.3972, 39.9075]))

// 设置缩放级别 mapRef.value.setZoom(12)

// 飞至指定位置(仅3D模式有效) mapRef.value.flyTo(ol.proj.fromLonLat([116.3972, 39.9075]), 14) 示例 查看完整示例代码：examples 开发与贡献 克隆项目 bash git clone https://github.com/yourusername/ol-cesium-vue-components.git cd ol-cesium-vue-components npm install

开发模式 bash npm run dev

构建库 bash npm run build

提交 PR 前请确保通过测试和代码检查 许可证 本项目采用 MIT License 许可证。 鸣谢 OpenLayers - 强大的 2D 地图库 ol-cesium - OpenLayers 的 3D 扩展 Vue.js - 渐进式 JavaScript 框架 联系我们 如果你有任何问题或建议，请在GitHub Issues中提出。 注意事项 使用 Cesium 3D 地图时，需要在项目中配置 Cesium 资源路径：

javascript // main.js 或入口文件中 import * as Cesium from 'cesium'

// 设置Cesium资源路径 window.Cesium = Cesium Cesium.Ion.defaultAccessToken = '你的Cesium访问令牌' Cesium.buildModuleUrl = function(path) { return 'https://cdn.jsdelivr.net/npm/[email protected]/Build/Cesium/' + path }

你可以在Cesium 官网注册获取免费的访问令牌。