VUE3+Cesium搭建:如何去除左下角Cesium的版权Logo

在使用Cesium构建三维地理信息平台时,如果需要去除官方Logo,可以通过修改CSS或JavaScript实现。对于Cesium的基本版本,可直接修改widgets.css或在JS中设置display为none。而在新版、与Vue深度集成的Cesium,需编辑Cesium.js,将display属性从inline改为none。
摘要由CSDN通过智能技术生成

使用VUE3+Cesium快速搭建三维地理信息平台,如果在不影响项目开展或者研究学习的情况下,还是建议保留官方logo和链接的,去掉人家的Logo多少有些不太厚道,但Cesium必竟是开源平台,且有些使用环境必须要去除Logo的。
针对Cesium老板本,可以使用以下方法实现:
1、找到widgets.css文件,修改style标签中的cesium-widget-credits,如下:

.cesium-widget-credits{ 
 display:none!important; 
visibility:hide!important; 
} 

2、或者在JS文件中运态设定该Logo标签为**“none”**,如下:

viewer._cesiumWidget._creditContainer.style.display = "none";

针对与VUE契合较深且较新的Cesium版本,通过1中的方法已无效,需打开Cesium.js文件,修改其中代码,将display由inline改为none即可去除Cesium的Logo,如下:

element: {
    get: function () {
      if (!defined(this._element)) {
        const html = DOMPurify.sanitize(this._html);

        const div = document.createElement("div");
        div._creditId = this._id;
        div.style.display = "none"; **//将inline改为none**
        div.innerHTML = html;

        const links = div.querySelectorAll("a");
        for (let i = 0; i < links.length; i++) {
          links[i].setAttribute("target", "_blank");
        }

        this._element = div;
      }
      return this._element;
    },
  },
Vue 3 和 Cesium 结合可以用来构建交互式的3D地图应用,Cesium是一个强大的WebGL库,专门用于渲染卫星图像、地形和其他地理信息。在 Vue 3 中集成 Cesium,你可以按照以下步骤操作: 1. **安装依赖**:首先,你需要通过npm或yarn安装`@cesium/cesium`库,以及可能需要的Vue CLI插件,如`vue-cesium`或`vue3-cesium`。 ```bash npm install @cesium/cesium vue-cesium (或其他推荐的Vue组件) ``` 2. **创建组件**:在Vue组件中,你会创建一个Cesium视口(viewport)或者其他Cesium元素,然后将`Cesium Viewer`初始化。 ```vue <template> <div> <cesium-viewer :url="cesiumUrl" :options="viewerOptions"></cesium-viewer> </div> </template> <script> import { defineComponent, ref } from 'vue'; import CesiumViewer from '@cesium/cesium/Cesium/Widgets/ViewerWidget'; export default defineComponent({ props: { cesiumUrl: String, viewerOptions: Object, }, setup(props) { const viewer = ref(null); const initializeCesium = async () => { if (!viewer.value) { viewer.value = new CesiumViewer('cesiumContainer', props.viewerOptions); } }; onMounted(() => { initializeCesium(); }); onUnmounted(() => { viewer.value.destroyForCurrentView(); }); return { viewer }; }, }); </script> ``` 3. **配置选项**:`viewerOptions`应该包含地形数据提供商等必要的配置,如你在问题中提到的`new Cesium.CesiumTerrainProvider()`。 4. **管理数据和事件**:你可以通过`ref`来存储状态,监听Cesium的事件(如鼠标交互或加载完成)。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

睡着的小蚊子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值