基于 Vue3、Typescrip、Cesium 的组件库。
基于 pnpm workspace、vite、glup、rollup 脚手架，依赖 Vue3、Cesium 开发的 CBB 公共库——vue3-use-cesium 有以下特点/功能：
- 可支持 Cesium 库的按需加载
- 基于 vue3 传送组件，实现多页面复用单个 Cesium 实例，防止频繁切换地图导致的卡顿，非首次地图无感加载
- 支持封装 hook，使用简单
- 支持地形、事件管理、图层管理、图层弹窗等
- 支持地图工具（主页、底图图层、放大缩小、二三维切换等）、地图状态信息（鼠标位置、相机信息）
- 支持标绘功能，绘制点线面、贴地/贴模型绘制等等，结果可输出 geojson
- 支持测量功能，坐标测量(椭球/地形/模型)、距离测量(椭球/地形/模型/贴地/贴模型) 、面积测量(椭球/地形/模型/贴地/贴模型) 、高度差测量(地形/模型) 、三角测量(地形/模型)
- 支持点聚合
- 支持场景书签
- 支持常用 Entity、Primitive 材质，如光电扫描球、颜色扫描球、雷达扫描、扩散圆、渐变墙、闪烁线等等
- 支持热力图
关于 Cesium 版本兼容性，已在 1.105、1.119 版本进行验证。
- 安装
yarn add vue3-use-cesium # npm i vue3-use-cesium --save- 使用
- 引入组件和样式
在 App.vue 中使用组件，示例如下：
<template>
<router-view></router-view>
<z-map-base />
</template>
<script setup lang="ts">
import { ZMapBase } from "vue3-use-cesium";
</script>在 main.js 引入样式：
import "vue3-use-cesium/style";- 在路由拦截中加载初始化并加载 Cesium.js
import { initMap } from "vue3-use-cesium";
// 路由拦截
router.beforeEach(async (to, from, next) => {
// ...
// 如果页面包含地图则加载Cesium.js
if (to.meta.hasMap) {
await initMap([`/CesiumV1.105/Cesium.js`, `/CesiumV1.105/Widgets/widgets.css`], {
imagery: "gd-img"
});
}
// ...
next();
});- 定义 hooks（可选）
import { onBeforeUnmount, onMounted } from "vue";
import { setToTarget, setVisible, clearMapElements, clearMapEvents, getViewer } from "vue3-use-cesium";
/**
* 基础地图使用
* @param selector div的id / body
* @param mapCreated 成功回调(返回Viewer)
*/
export const useBaseMap = (selector: string, mapCreated?: (viewer: any) => void) => {
onMounted(() => {
setToTarget(selector);
setVisible(true);
if (mapCreated) {
mapCreated(getViewer());
}
});
onBeforeUnmount(() => {
clearMapElements();
clearMapEvents();
setVisible(false);
setToTarget("body");
});
};- 页面使用
<template>
<!-- 注意：HTML注释得去掉，可能是Vue传送组件的bug？？ -->
<!-- 只有一个顶层div -->
<div class="bbox">
<!-- 地图容器不能是顶层div -->
<div id="my-map">
<!-- 地图弹窗... -->
</div>
<!-- 地图面板等... -->
</div>
</template>
<script setup lang="ts">
import { useBaseMap } from "@/hooks/useCesium";
// 地图初始化
useBaseMap("#my-map", viewer => {
console.log(viewer);
});
</script>