aerovision/README.md

基于OpenLayers和olCesium的气象地图组件库

基于 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
<template>
  <div>
    <!-- 2D地图 -->
    <ol-map 
      :center="[116.3972, 39.9075]" 
      :zoom="10" 
      height="400px"
      @mapReady="handleMapReady"
      @click="handleMapClick"
    />
    
    <!-- 3D地图 -->
    <ol-cesium-map 
      ref="olCesiumMapRef"
      :center="[116.3972, 39.9075]" 
      :zoom="10" 
      :terrain="true"
      height="400px"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const olCesiumMapRef = ref(null)

const handleMapReady = (map) => {
  console.log('地图已加载:', map)
}

const handleMapClick = (event) => {
  console.log('地图点击坐标:', event.coordinate)
}

onMounted(() => {
  // 获取地图实例
  const map = olCesiumMapRef.value.getMap()
  console.log('获取地图实例:', map)
  
  // 获取OlCesium实例
  const ol3d = olCesiumMapRef.value.getOlCesium()
  console.log('获取OlCesium实例:', ol3d)
})
</script>
组件 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/cesium@1.105.0/Build/Cesium/' + path
}



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