Package Exports

vmap-cesium
vmap-cesium/style

Readme

vmap-cesium

介绍
特性
安装
快速开始
- 引入组件库
- 基础地图组件使用
核心组件
- VMap
图层组件
- VMapTdt
- VMapWms
- VMapArcgis
- VMapTile
- VMapSupermap
- VMapVector
工具组件
分析组件
- VMapPmAnalysis
地图配置
API参考
- CesiumInstance
示例
注意事项
浏览器兼容性
许可证
贡献
联系我们

介绍

vmap-cesium 是一个基于 Vue 3 和 Cesium 的地图可视化组件库，同时融合了vue-cesium的组件，提供了丰富的地图功能和组件，方便开发者快速构建高性能的三维地理信息系统应用。

特性

🎯 基于 Vue 3 Composition API 构建
🌍 集成 Cesium 强大的三维地图渲染能力
🗺️ 支持多种地图图层类型（WMS、WMTS、ArcGIS、GeoJSON 等）
🛠️ 提供丰富的地图工具组件（测量、位置拾取、绘制等）
📊 内置空间分析功能（如剖面分析）
🎨 支持自定义样式和主题
🚀 高性能的地图渲染和数据处理
🔧 完整的类型支持（TypeScript）

安装

# 使用 npm
npm install vmap-cesium

# 使用 yarn
yarn add vmap-cesium

# 使用 pnpm
pnpm add vmap-cesium

快速开始

CDN模式引入Cesium静态资源

在使用组件库前，您需要通过CDN方式引入Cesium静态资源：

<script src="https://cesium.com/downloads/cesiumjs/releases/1.132/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.132/Build/Cesium/Widgets/widgets.css">

引入组件库

import { createApp } from 'vue'
import App from './App.vue'
import VMapCesium from 'vmap-cesium'
import 'vmap-cesium/dist/index.css'

// 引入 Element Plus（组件库依赖）
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import locale from 'element-plus/es/locale/lang/zh-cn'

const app = createApp(App)
app.use(ElementPlus, { locale })
app.use(VMapCesium)
app.mount('#app')

基础地图组件使用

<template>
  <div class="map-container">
    <VMap :map-config="mapConfig" usePlugin="true" @ready="handleMapReady">
      <!-- 天地图图层 -->
      <VMapTdt map-style="img" :visible="true" :opacity="1"></VMapTdt>
      
      <!-- WMS图层 -->
      <VMapWms 
        :url="wmsUrl" 
        :visible="true" 
        :request-params="{ layers: 'nurc:Img_Sample' }" 
        :opacity="0.8" 
      />
      
      <!-- 矢量数据 -->
      <VMapVector 
        :features="geojsonData" 
        :style="vectorStyle" 
        :visible="true" 
      />
      
      <!-- 地图工具 -->
      <VMapPositionPick position="top-right" :offset="[20, 210]"></VMapPositionPick>
      <VMapDraw position="top-right" :offset="[20, 150]"></VMapDraw>
      <VMapLocation position="top-right" :offset="[20, 120]"></VMapLocation>
      <VMapBasemap position="top-right" :offset="[20, 90]"></VMapBasemap>
      
      <!-- 分析工具 -->
      <VMapPmAnalysis position="top-right" :offset="[20, 60]" :samples="10"></VMapPmAnalysis>
    </VMap>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { VMap ,VMapTdt,VMapWms,VMapVector,VMapPositionPick,VMapDraw,VMapLocation,VMapBasemap,VMapPmAnalysis} from 'vmap-cesium'

// 地图配置
const mapConfig = {
  prj: "EPSG:4326",
  vcConfig: {
    cesiumPath: '/public/Cesium/Cesium.js',
    accessToken: 'your-cesium-access-token',
    tdtToken: 'your-tdt-token'
  },
  defaultView: {
    camera: {
      lon: 108.84,
      lat: 35.15,
      height: 9500000,
      heading: 0,
      pitch: -89.74,
      roll: 0
    }
  }
}

// WMS服务地址
const wmsUrl = ref('http://ip/geoserver/nurc/wms')

// GeoJSON数据
const geojsonData = ref([/* GeoJSON格式的矢量数据 */])

// 矢量样式
const vectorStyle = ref({
  fill: true,
  fillColor: 'rgba(255, 0, 0, 0.5)',
  stroke: true,
  strokeColor: 'rgba(0, 0, 255, 1)',
  strokeWidth: 2
})

// 地图加载完成回调
const handleMapReady = (cesiumInstance) => {
  console.log('地图加载完成', cesiumInstance)
  // 可以在这里进行地图相关操作
}
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh;
}
</style>

核心组件

VMap

地图主容器组件，是所有其他地图组件的父组件。

属性

mapConfig: 地图配置对象，包含投影、视图、图层等配置
usePlugin: 是否使用VueCesium插件，默认为true

事件

ready: 地图加载完成时触发，返回cesiumInstance实例
mouse-click: 鼠标点击地图时触发
mouse-move: 鼠标移动地图时触发

图层组件

VMapTdt

天地图图层组件

属性

mapStyle: 天地图样式，可选 'img'(影像图), 'vec'(矢量图), 'ter'(地形图)，默认为 'img'
visible: 是否可见，默认为 true
opacity: 透明度，范围 0-1，默认为 1

VMapWms

WMS服务图层组件

属性

url: WMS服务地址，必填
requestParams: WMS请求参数，如 { layers: '图层名称' }
visible: 是否可见，默认为 true
opacity: 透明度，范围 0-1，默认为 1

VMapArcgis

ArcGIS服务图层组件

属性

mapProvider: 地图提供者类型，可选 'tile' 等
url: ArcGIS服务地址，必填
requestParams: 请求参数，如 { layer: '图层名称', tilematrixset: '坐标系' }
visible: 是否可见，默认为 true
opacity: 透明度，范围 0-1，默认为 1
minZoom: 最小缩放级别
maxZoom: 最大缩放级别

VMapTile

瓦片地图图层组件（支持WMTS、GeoServer WMTS等）

属性

mapProvider: 地图提供者类型，可选 'wmts', 'geoserverwmts' 等
url: 瓦片服务地址，必填
requestParams: 请求参数，如 { layer: '图层名称', tilematrixset: '坐标系' }
customParams: 自定义参数，如 { k: '密钥' }
visible: 是否可见，默认为 true
opacity: 透明度，范围 0-1，默认为 1

VMapSupermap

SuperMap服务图层组件

属性

mapProvider: 地图提供者类型，可选 'wmts' 等
url: SuperMap服务地址，必填
requestParams: 请求参数，如 { layer: '图层名称', tilematrixset: '坐标系' }
customParams: 自定义参数
visible: 是否可见，默认为 true
opacity: 透明度，范围 0-1，默认为 1
minZoom: 最小缩放级别
maxZoom: 最大缩放级别

VMapVector

矢量数据图层组件

属性

sourceId: 数据源ID
features: GeoJSON格式的矢量数据，必填
style: 矢量样式配置
visible: 是否可见，默认为 true
opacity: 透明度，范围 0-1，默认为 1

工具组件

VMapPositionPick

坐标拾取和定位工具

属性

position: 工具位置，可选 'top-right', 'top-left', 'bottom-right', 'bottom-left'，默认为 'top-right'
offset: 位置偏移量，格式为 [x, y]，默认为 [0, 0]

功能

坐标拾取：点击地图获取经纬度和高度信息
坐标定位：输入经纬度和高度，将地图视角定位到指定位置

VMapDraw

地图绘制工具

功能

支持绘制点、线、面等几何图形
提供清空绘制内容的功能

VMapLocation

定位工具

属性

position: 工具位置，可选 'top-right', 'top-left', 'bottom-right', 'bottom-left'，默认为 'top-right'
offset: 位置偏移量，格式为 [x, y]，默认为 [0, 0]

功能

将地图视角定位到用户当前位置或指定位置

VMapBasemap

底图切换工具

属性

position: 工具位置，可选 'top-right', 'top-left', 'bottom-right', 'bottom-left'，默认为 'top-right'
offset: 位置偏移量，格式为 [x, y]，默认为 [0, 0]

功能

在多个预设底图之间进行切换
底图配置来自地图配置对象中的 baseLayers 数组

VMapBar

工具栏组件（待实现）

VMapRoll

旋转工具组件（待实现）

分析组件

VMapPmAnalysis

剖面分析工具

属性

position: 工具位置，可选 'top-right', 'top-left', 'bottom-right', 'bottom-left'，默认为 'top-right'
offset: 位置偏移量，格式为 [x, y]，默认为 [0, 0]
samples: 采样点数量，默认为 10

功能

绘制剖面线，分析地形高程
生成高程剖面图（基于ECharts）
显示剖面线起点和终点经纬度信息
支持导出分析结果为图片

地图配置

地图配置对象包含了地图的各种参数设置，下面是一个完整的配置示例：

const mapConfig = {
  // 投影坐标系
  prj: "EPSG:4326",
  
  // Cesium相关配置
  vcConfig: {
    // Cesium库文件路径
    cesiumPath: '/public/Cesium/Cesium.js',
    // Cesium访问令牌
    accessToken: 'your-cesium-access-token',
    // 天地图Token
    tdtToken: 'your-tdt-token'
  },
  
  // 默认视图设置
  defaultView: {
    camera: {
      lon: 108.84,  // 经度
      lat: 35.15,   // 纬度
      height: 9500000,  // 高度
      heading: 0,   // 朝向角
      pitch: -89.74,  // 俯仰角
      roll: 0      // 翻滚角
    },
    zoom: 4,       // 默认缩放级别
    minZoom: 0,    // 最小缩放级别
    maxZoom: 18    // 最大缩放级别
  },
  
  // 默认底图层ID
  defaultBaseLayerId: "1",
  
  // 地形设置
  terrainProvider: {
    enabled: false, // 是否开启地形
    requestVertexNormals: false, // 是否开启顶点法线
    requestWaterMask: false // 是否开启水面遮罩
  },
  
  // 底图层配置
  baseLayers: [
    // 影像底图配置
    {
      id: "1",
      label: "影像",
      type: "tdt",
      children: [
        {
          id: "TDT_IMG",
          zIndex: 0,
          visible: true,
          type: "tdt",
          alpha: 1
        },
        {
          id: "TDT_IMG_LABEL",
          zIndex: 1,
          visible: true,
          type: "tdt",
          alpha: 1
        }
      ]
    },
    // 矢量底图配置
    {
      id: "2",
      label: "矢量",
      type: "tdt",
      children: [
        // 矢量底图图层配置...
      ]
    }
  ]
}

API参考

CesiumInstance

地图加载完成后返回的Cesium实例对象，提供了丰富的地图操作方法：

获取viewer实例对象

CesiumInstance.viewer: Cesium的Viewer实例对象，提供了地图的各种操作方法。

地图控制方法

setViewExtent(extent): 设置地图视野
flyToView(view): 平滑飞行到指定视野
getExtent(): 获取当前地图范围
getLonLatByPosition(position): 根据屏幕坐标获取经纬度

图层管理方法

addLayer(layerConfig): 添加图层
removeLayer(layerId): 移除图层
setLayerVisible(layerId, visible): 设置图层可见性
setLayerOpacity(layerId, opacity): 设置图层透明度
removeAllLayers(): 移除所有图层
loadBaseLayer(layers): 加载底图图层

事件管理方法

registerMouseClick(callback): 注册鼠标点击事件
registerMouseMove(callback): 注册鼠标移动事件
releaseMouseClick(): 释放鼠标点击事件
releaseMouseMove(): 释放鼠标移动事件

注意事项

使用前请确保已正确配置Cesium和天地图的访问令牌
组件需要在支持WebGL的浏览器中运行
处理大量数据时，请注意性能优化
如需自定义组件样式，请使用深度选择器 :deep()
部分组件（如VMapBar、VMapRoll）正在开发中，功能可能不完整

浏览器兼容性

浏览器	支持版本
Chrome	最新2个稳定版本
Firefox	最新2个稳定版本
Safari	最新2个稳定版本
Edge	最新2个稳定版本

许可证

MIT

贡献

欢迎提交Issue和Pull Request来帮助改进这个项目。

联系我们

如有任何问题或建议，请通过以下方式联系我们：

Email:
GitHub:

感谢使用 VMap-cesium！希望这个组件能够帮助您快速构建出功能强大的地图应用。

vmap-cesium

Package Exports

Readme

vmap-cesium

目录

介绍

特性

安装

快速开始

CDN模式引入Cesium静态资源

引入组件库

基础地图组件使用

核心组件

VMap

属性

事件

图层组件

VMapTdt

属性

VMapWms

属性

VMapArcgis

属性

VMapTile

属性

VMapSupermap

属性

VMapVector

属性

工具组件

VMapPositionPick

属性

功能

VMapDraw

功能

VMapLocation

属性

功能

VMapBasemap

属性

功能

VMapBar

VMapRoll

分析组件

VMapPmAnalysis

属性

功能

地图配置

API参考

CesiumInstance

获取viewer实例对象

地图控制方法

图层管理方法

事件管理方法

注意事项

浏览器兼容性

许可证

贡献

联系我们