cesium地图初始化、消除

1.初始化地图

  const initCesium = () => {

    viewer.value = new Cesium.Viewer("cesiumContainer", {

      homeButton: false, //主页按钮

      baseLayerPicker: false, //是否显示图层选择控件

      navigationHelpButton: false, //帮助信息按钮

      geocoder: false, //是否显示地名查找控件

      infoBox: false, //是否显示点击要素之后显示的信息

      fullscreenButton: false, //是否显示全屏按钮

      timeline: false, //是否显示时间线控件

      animation: false, //是否显示动画控件

      sceneModePicker: false, //是否显示投影方式控件

      selectionIndicator: true, // 点击有绿框

      shouldAnimate: false, //允许动画

      navigationInstructionsInitiallyVisible: false,

      sceneMode: 3, //初始场景模式 1 1D模式 1 1D循环模式 3 3D模式  Cesium.SceneMode

      scene3DOnly: true, //每个几何实例将只能以3D渲染以节省GPU内存

    });

    viewer.value.scene.globe.depthTestAgainstTerrain = false; //关闭深度检测

    viewer.value.scene.debugShowFramesPerSecond = true; //显示刷新率和帧率

    // viewer.value.scene.screenSpaceCameraController.enableRotate = false //禁止地图拖拽

    viewer.value._cesiumWidget._creditContainer.style.display = "none"; //去除掉 版权信息

    viewer.value.camera.setView({

      destination: Cesium.Cartesian3.fromDegrees(114, 16, 1000000),

    });

    handler.value = new Cesium.ScreenSpaceEventHandler(

      viewer.value.scene.canvas

    );

    // viewer.value.scene.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({

    //   url: '/map/{z}/{x}/{reverseY}.png',

    // }))

  }

2.消除地图

  const cancelCesium = () => {

    if (Cesium.defined(viewer.value)) {

      viewer.value.entities.removeAll();

      viewer.value.imageryLayers.removeAll();

      viewer.value.dataSources.removeAll();

      // viewer.scene.primitives.removeAll();

      // 获取webgl上下文

      let gl = viewer.value.scene.context._originalGLContext;

      gl.canvas.width = 1;

      gl.canvas.height = 1;

      viewer.value.destroy(); // 销毁Viewer实例

      gl.getExtension("WEBGL_lose_context").loseContext();

      gl = null;

      viewer.value = null;

      var cesiumContainer = document.getElementById("cesiumContainer");

      if (cesiumContainer) {

        cesiumContainer.remove(); // 移除与地图相关的DOM元素

      }

    }

  }

欢迎补充,一起进步。

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值