Vue3x_Cesium_Template

Demo

📍 Address

vite/cesium package.json

"cesium": "1.111.0",
"@cesium/engine": "6.1.0",
"@cesium/widgets": "4.3.0",
"vite-plugin-cesium": "1.2.22"

vite.config.js

import cesium from 'vite-plugin-cesium'
plugins:[
  cesium()
]

webpack/cesium 自行百度

Render Component cesium-container.vue 整个项目仅需要一个map以及mapview实体，通过provide/inject传递，所以把握好放在什么地方(特殊情况业务除外)

<CesiumContainer :config="config" :layers="layers">
    <component :is="Component" />
</CesiumContainer>

Render Func

useCesiumSetup

// 初始化构建Cesium实体
// 通过Provide提供Cesium实体

useCesium

// 通过inject注入Cesium实体，在任何setup中都可以使用
const { mapview } = useCesium()

useResetCamera

// 整合定位功能，通过传参改变定位视角或默认到初始视角
const roam = useResetCamera()
roam()

roam({
  position: [116.416411, 38.849242, 409882],
  pitch: -70,
  heading: 0
})

useCesiumEvent

// 构建Cesium事件,setup中使用，组件卸载自动卸载事件
// 点击 - 可选
// 鼠标移入 - 可选
// 鼠��移出 - 可选
useCesiumEvent({
  click: handlerClick,
  mouseOver: handlerOver,
  mouseOut: setupFloatHide,
})

useLayerSetup

// 实体初始化挂载的图层
// 目前仅支持ArcGIS图层
[
  {
    type: 'arcgis',
    url: BJ_AREA_SERVICE
  }
]

usePrimitiveLayer

// 几何图形图层
// 目前 点、线、面 图层控制都是基于此方法构建
// 可携带额外数据 id:{}
// _guid 唯一标识

usePoint

// 单点位、多点位渲染
// 支持 - 图标、纯色
// 具体查看 ExamplePoint.vue

usePolyline

// 线段渲染
// 支持 - 图片、纯色
// 具体查看 ExampleLine.vue

usePolygonGrid

// 面渲染
// 具体查看 ExampleZones.vue / ExampleGeojson.vue

useImagesLayer

// 图片渲染
// 具体查看 ExampleImages.vue

useMask

// 遮罩层渲染
// 简述:通过在地球上绘制三个面，只在指定的一个面上绘制空洞，形成遮罩层
// 具体查看 ExampleMask.vue

useModel

// 模型渲染
// 简述:通过 路径 或 Id(上传到cesium.ion) 加载模型，update3dtilesMaxtrix方法调整模型位置以及旋转角度
// 具体查看 ExampleModel.vue / ExampleTilesetModel.vue

useDrawRiver

// 水体渲染
// 简述:创建多边形，通过Object.defineProperty监听多边形距离地面高度、水体高度，setInterval调整多边形高度以及距离地面高度
// 具体查看 ExampleWaterUpraise.vue

useCesiumWeather

// 天气渲染
// 简述:通过传入天气类型参数，初始化生成天气实例，实例中带有显示/隐藏、更新天气配置等方法，并且天气类中增加watch监听，可实时更新天气配置，特殊业务需求可直接调用biz/Cesium/entity文件夹下的天气类
// 具体查看 ExampleWeather.vue

ExampleRoam.vue

官方示例

// 漫游场景
// 简述: 官方示例繁衍出来的漫游效果，对数据进行了分离，路线、物体、图层可控
// 具体查看 ExampleRoam.vue

useCuttingMap