cesium-navigator-custom v1.0.1

修改内容

解除了cesium-navigation组件的默认容器（因为它是挂到Viewer的cesiumWidget对应的DOM容器上的，如果想要修改位置，就比较麻烦）。

自定义容器的使用方式

自定义Vue组件，修改容器样式.

<template>
  <div ref="container" class="navigator-wrapper"></div>
</template>
<script>
import * as Cesium from 'cesium'
import CesiumNavigation from './CesiumNavigation.js'
import './style.css'

var navigation = null;

export default {
  name: "map-navigator",
  props: {
    options: {
      type: Object,
      required: false,
      default: () => {
        return {
          // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
          defaultResetView: Cesium.Rectangle.fromDegrees(80, 22, 130, 50),
          // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
          enableCompass: true,
          // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
          enableZoomControls: true,
          // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
          enableDistanceLegend: false,
          // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
          enableCompassOuterRing: true,
          //修改重置视图的tooltip
          resetTooltip: "重置视图",
          //修改放大按钮的tooltip
          zoomInTooltip: "放大",
          //修改缩小按钮的tooltip
          zoomOutTooltip: "缩小"
        }
      }
    }
  },
  data() {
    return {}
  },
  mounted() {
    console.log("create...", this.$refs.container)
  },
  methods: {
    create(/*options, */viewer = window.viewer) {
      console.log("create...", this.$refs.container)
      navigation = new CesiumNavigation(viewer, {
        container: this.$refs.container,
        ...this.$props.options
      });
    }
  },
  destroy() {
    console.log("destroy...")
    if (Cesium.defined(navigation)) {
      navigation.destroy()
    }
  }
}
</script>


<style lang="scss" scoped>
.navigator-wrapper {
  position: relative;
  width: 90px;
  height: 200px;
  // background-color: rgba(255, 255, 255, 0.8);
  z-index: 1;
  box-sizing: border-box;
  pointer-events: all;
}

:deep(.compass) {
  top: 15px !important;
}

/* 样式修改 */
:deep(.navigation-controls) {
  background: rgba(8, 44, 76, 0.8) !important;
  border-radius: 4px !important;
  border: 1px solid #79F3FF !important;
  top: 105px !important;
}

:deep(.navigation-control) {
  border-bottom: 1px solid #79F3FF !important;
}

// 文本颜色修改
:deep(.navigation-control-icon-zoom-in),
:deep(.navigation-control-icon-zoom-out) {
  color: #B0E8FF;
}

// svg颜色修改
:deep(.cesium-svgPath-svg) {
  stroke: #79F3FF !important;
}
</style>

在父组件中通过ref引用调用create方法即可。

<template>
  <div id="cesiumContainer" style="width:100%;height:100%"></div>
  <MapNavigator ref="navigator" :options="options" class="widget-container" />
</template>
<script>
import * as Cesium from 'cesium'
import MapNavigator from './components/map-navigator/index.vue'
export default {
  name: "app",
  components: {
    MapNavigator,
  },
  data() {
    return {
      //navigator组件options配置项
      options: {
        // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
        defaultResetView: Cesium.Rectangle.fromDegrees(80, 22, 130, 50),
        // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
        enableCompass: true,
        // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
        enableZoomControls: true,
        // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
        enableDistanceLegend: false,
        // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
        enableCompassOuterRing: true,
        //修改重置视图的tooltip
        resetTooltip: "重置视图",
        //修改放大按钮的tooltip
        zoomInTooltip: "放大",
        //修改缩小按钮的tooltip
        zoomOutTooltip: "缩小"
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      Cesium.Ion.defaultAccessToken = "YOUR_TOKEN";
      const viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, // 是否显示动画控件
        shouldAnimate: true, //是否自动显示动画（下方时间轴是不是在走着）
        homeButton: false, // 是否显示Home按钮
        fullscreenButton: false, // 是否显示全屏按钮
        baseLayerPicker: false, // 是否显示图层选择控件
        geocoder: false, // 是否显示地名查找控件
        timeline: true, // 是否显示时间线控件-[为路径漫游等和时间相关的动画提供支持]
        sceneModePicker: false, // 是否显示投影方式控件
        navigationHelpButton: false, // 是否显示帮助信息控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
        selectionIndicator: false, //选中指示框
        navigationInstructionsInitiallyVisible: false, //帮助按钮
        contextOptions: {
          requestWebgl2: true,
          webgl: {
            alpha: false,
            preserveDrawingBuffer: true,
          },
        },
        // requestRenderMode:true,
        msaaSamples: 4,
      });
      viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏授权信息
      viewer.scene.globe.enableLighting = false; //是否使用地球光照
      viewer.scene.globe.depthTestAgainstTerrain = true; // 深度检测
      viewer.scene.light = new Cesium.DirectionalLight({
        direction: new Cesium.Cartesian3(1.0, -1.0, -1.0), //光照从北向南
      });
      viewer.timeline.container.style.display = "none"; //隐藏timeline组件
      viewer.targetFrameRate = 60; // 目标帧数
       //初始化navigation组件
      this.$refs.navigator.create(viewer);
    }
  },
  beforeUnmount() {
    this.$refs.navigator.destroy()
    viewer.destroy()
  }
}

</script>

<style scoped>
body,
html {
  width: 100vw;
  height: 100vh;
}

.widget-container {
  position: absolute;
  left: 0%;
  top: 0;
}
</style>