vue3控制cesium中entity的显示和隐藏

疆~

已于 2023-01-02 20:34:35 修改

阅读量2.5k

点赞数 1

分类专栏： Cesium 文章标签： javascript vue.js 前端

于 2022-11-27 23:37:39 首次发布

本文链接：https://blog.csdn.net/qq_40323256/article/details/128072046

版权

Cesium 专栏收录该内容

29 篇文章 67 订阅

订阅专栏

这篇博客展示了如何利用Cesium JavaScript库在3D地图上动态控制点位的显示与隐藏。通过设置经纬度坐标、颜色、像素大小等属性，创建了一个绿色的点位，并提供了一个按钮来切换点位的可见状态。Cesium的API文档可以在cesium.xin/cesium/cn/Documentation1.72/index.html查阅。

摘要由CSDN通过智能技术生成

cesium中文api：Index - Cesium Documentationhttp://cesium.xin/cesium/cn/Documentation1.72/index.html

效果图：

实现代码：

<template>
    <div style="height: 100vh;width: 100vw;">
        <div style="position: absolute;z-index:10">
            <el-button @click="changeShow">{{state.point.point.show?'隐藏':'显示'}}</el-button>
        </div>
        <div id="cesiumContainer"></div>
    </div>
</template>
  
<script setup>
import * as Cesium from 'cesium';
import { onMounted, reactive } from 'vue';
const state = reactive({
    point: {
        id: "mypoint",
        position: Cesium.Cartesian3.fromDegrees(-75.0, 30.0), //经纬度转世界坐标
        point: {
            show: true,
            color: Cesium.Color.GREEN,
            pixelSize: 20,
            outlineColor: Cesium.Color.YELLOW,
            outlineWidth: 3,
        }
    }
})
const changeShow = () => {
    viewer.entities.getById('mypoint').show = !viewer.entities.getById('mypoint').show
    state.point.point.show = !state.point.point.show
}
onMounted(() => {

    const viewer = new Cesium.Viewer("cesiumContainer", { infoBox: false });
    window.viewer = viewer;//挂载到window上

    viewer.entities.add(state.point)

})
</script>