cesium-draw-ts v1.2.4

基于 vue3 + Element-plus 封装的 cesium 绘制赋值界面和方法

功能列表

1. 提供 UI 组件进行基础图形绘制，支持实时修改参数；暴露绘制参数到外部；
2. 支持调用内部方法触发绘制，无需引入 UI 组件；
3. 内部提供了一些其他的绘制和测量方法，如坐标查询，空间距离，贴地距离和面积量算等，具体查看绘制方法解析；

使用如下

安装 cesium-draw-ts 包

npm i cesium-draw-ts

安装 element-plus

npm i element-plus

引入 element-plus 的相关组件

import "element-plus/theme-chalk/index.css";
import { ElButton, ElColorPicker, ElForm, ElFormItem, ElImage, ElInput, ElInputNumber, ElOption, ElScrollbar, ElSelect, ElSwitch } from "element-plus";

app.use(ElButton).use(ElForm).use(ElInput).use(ElImage).use(ElScrollbar).use(ElInputNumber).use(ElSwitch).use(ElColorPicker).use(ElFormItem).use(ElSelect).use(ElOption);

引入 UI 组件辅助绘制方式

以绘制折线为例,执行以下代码就可以在你的 cesium 地图上开始绘制你的线条了

<script setup lang="ts">
import "/node_modules/cesium-draw-ts/dist/style.css";
import { DrawModel } from "cesium-draw-ts";

const show = ref(false);
const viewer = new Viewer("viewerContainer", {}); // 这只是一个示例，具体的viewer传入项目的viewer即可
const drawRef = ref();
function showData() {
    console.warn(drawRef.value.drawStore);
}
</script>

<template>
    <div id="viewerContainer" class="cesium-full-screen" />

    <ElButton type="primary" size="large" class="absolute z-100 top-10 left-10" @click="showData"> 点击查看数据 </ElButton>
    <DrawModel v-if="cesiumStore.show" ref="drawRef" :viewer="cesiumStore.viewer" class="absolute cesium-draw-model" />
</template>

<style lang="less" scoped>
.cesium-draw-model {
    right: 0;
    top: 40px;
}
</style>

直接使用方法触发绘制

<script setup lang="ts">
import { DrawFunc, MouseTooltip } from "cesium-draw-ts";

const drawGraph = ref();
drawGraph.value = new DrawFunc.DrawGraphLine(viewer.value, {});
drawGraph.value.startDraw();
</script>

<template>
    <MouseTooltip />
</template>

方法使用说明

所有绘制方法

所有绘制方法

这些就是一些测量方法了，无配置

options 参数说明

绘制方法的内部执行方法

只有三个方法需要传入参数，使用如下：

reEnterModify(stagingData: DrawStagingData)
drawOldData(stagingData: DrawStagingData)
updateConfig(config: DrawConfigIF)

// 绘制属性面板可配置属性
export interface DrawConfigIF {
    name: string; // 名称
    description: string; // 描述
    masthead: boolean; // 标头，是否展示绘制图形的name

    lineType: string; // 线型
    lineWidth: number; // 线宽
    lineColor: string; // 线条颜色,rgba形式

    outlineType: string; // 边框线型
    outlineColor: string; // 边框颜色
    outlineWidth: number; // 边框线宽

    radiusLineType: string; // 半径线型
    radiusLineColor: string; // 半径线条颜色
    radiusLineWidth: number; // 半径线宽

    fillColor: string; // 填充颜色,rgba形式

    fill: boolean;
    outline: boolean;
    extrudedHeight: number;
    radius: number;
    line: boolean;
}

export interface SaveDataIF {
    timeStampId?: number;
    custom?: Array<number[]>;
    radius?: number;
    positions: Array<DrawCartesian3>;
    locations?: Array<number[]>;
}

// 暂存的绘制数据
export interface DrawStagingData {
    saveData: SaveDataIF;
    config?: DrawConfigIF;
}

进入编辑和删除

编辑和删除通过暴露的方法就可以实现，根据个人情况开发，可以参考下面的写法

/**
 * let layerId = 'xxx' //你自己设定的layerId
 * let viewer = new Viewer() // viewer 是你的 cesium 上的 viewer 应用
 * let drawGraph = new DrawGraphLine(viewer,{})  // drawGraph 是你的绘制 class
 */
// 给绘制的图形绑定点击事件
function bindGloveEvent() {
    handler = new ScreenSpaceEventHandler(viewer.value?.scene.canvas);
    handler.setInputAction((movement: any) => {
        const pick = viewer.value?.scene.pick(movement.position);
        if (defined(pick)) {
            const obj = pick?.id;
            if (!obj || !obj.layerId || flag.value === OPERATE_STATUS.NONE) return;
            if (flag.value === OPERATE_STATUS.EDIT) enterDrawEditing(obj.timeStampId, obj.drawType);
            else if (flag.value === OPERATE_STATUS.DELETE) clearEntityById(obj.timeStampId, true);
        }
    }, ScreenSpaceEventType.LEFT_CLICK);
}
function clearEntityById(timeStampId: number, clearDrawedShape = false) {
    const entityList = viewer.value?.entities.values;
    if (!entityList || entityList.length < 1) return;

    for (let i = 0; i < entityList.length; i++) {
        const entity: DrawEntity = entityList[i];
        if (entity.layerId === drawConfig.layerId && entity.timeStampId === timeStampId) {
            viewer.value?.entities.remove(entity);
            i--;
        }
    }
    if (clearDrawedShape) delete drawedShape.value[timeStampId];
}
function enterDrawEditing(timeStampId: number, drawType: string) {
    // 先移除entity
    clearEntityById(timeStampId);
    drawGraph.value?.reEnterModify(drawedShape.value[timeStampId]);
}

参考实现页面

我写了一个 Vue 项目，可以参考内部的引用和实现方式