cesium_nxmap/src/views/CesiumScene.vue

<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>
var Cesium = require("cesium/Cesium");
var widgets = require("cesium/Widgets/widgets.css");
import wtTree from "../../public/static/fj";
export default {
  name: "cesiumPage",
  data() {
    return {
      publicPath: process.env.BASE_URL,
      url: "http://localhost:8888/tiles",
      // url: "http://localhost:8889",
      initPosition: [106.0231304, 37.73323706, 0],
      viewer: null,
    };
  },
  mounted() {
    this.viewer = new Cesium.Viewer("cesiumContainer", {
      animation: false, //是否显示动画控件
      shouldAnimate: true,
      homeButton: false, //是否显示Home按钮
      fullscreenButton: false, //是否显示全屏按钮
      baseLayerPicker: false, //是否显示图层选择控件
      geocoder: false, //是否显示地名查找控件http://localhost:8080/#/cesiumScene
      timeline: false, //是否显示时间线控件
      sceneModePicker: false, //是否显示投影方式控件
      navigationHelpButton: false, //是否显示帮助信息控件
      infoBox: false, //是否显示点击要素之后显示的信息
      requestRenderMode: true, //启用请求渲染模式
      scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
      sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
      fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
      imageryProvider: new Cesium.TileMapServiceImageryProvider({
        url: this.url,
        fileExtension: "jpg",
        maximumLevel: 13,
      }),
      baseLayerPicker: false,
    });
  
 // 雨雪天气添加
    var scene = this.viewer.scene;
    // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createSnowStage())
    // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
    scene.skyAtmosphere.hueShift = -0.8;
    scene.skyAtmosphere.saturationShift = -0.7;
    scene.skyAtmosphere.brightnessShift = -0.33;
    scene.fog.density = 0.001;
    scene.fog.minimumBrightness = 0.8;

    //jeojson 加载宁夏地图
    Cesium.Math.setRandomNumberSeed(0);
    var promise = this.viewer.dataSources.add(
      Cesium.GeoJsonDataSource.load(
        `${this.publicPath}static/mapgeoJsonnx.json`,
        {
          stroke: Cesium.Color.RAD,
          fill: Cesium.Color.TRANSPARENT,
          strokeWidth: 3,
          markerSymbol: "?",
        }
      )
    );

    this.viewer._cesiumWidget._creditContainer.style.display = "none";
 
    var position = Cesium.Cartesian3.fromDegrees(117.48, 30.67, 0);
  },
  methods: {
    addFengjiModel(position) {
      var hpRoll = new Cesium.HeadingPitchRoll(0.0, 0.0, 0.0);
      var origin = Cesium.Cartesian3.fromDegrees(106.0231304, 37.73323706, 0);
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(
        position,
        hpRoll
      );
      var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
        origin,
        hpRoll
      );
      var model = this.viewer.scene.primitives.add(
        Cesium.Model.fromGltf({
          url: `${this.publicPath}static/WT01.glb`,
          modelMatrix: modelMatrix,
          minimumPixelSize: 150,
          // 模型最大刻度
          maximumSize: 150,
          //设置模型最大放大大小
          maximumScale: 200,
          scale: 0.05,
          runAnimations: true, //是否运行模型中的动画效果
        })
      );
    },
  },
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
}
</style>