1111

.history/src/views/monitor_20201022105327.vue

@@ -0,0 +1,29 @@
+<template>
+      <el-container style="height: 100vh" direction="vertical">
+            <el-header></el-header>         <el-main>
+                  
+      <div style="width: 100%; height: 85vh">
+                        
+        <div class="content">我想让这块区域上下左右都居中</div>
+
+                    
+      </div>
+
+              </el-main
+    >
+            <el-footer style="height: 50px">
+                  <!-- <footVue></footVue> -->
+              </el-footer
+    >
+        </el-container
+  >
+</template>
+
+<style>
+.content {
+  width: 60vw;
+  min-width: 900px;
+  height: 520px;
+  background: rgb(95, 95, 95);
+}
+</style>

.history/src/views/monitor_20201022112318.vue

@@ -0,0 +1,119 @@
+
+<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>
+

.history/src/views/monitor_20201022113224.vue

@@ -0,0 +1,88 @@
+
+<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");
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      publicPath: process.env.BASE_URL,
+      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.ArcGisMapServerImageryProvider({
+        url:
+          "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
+        baseLayerPicker: false,
+      }),
+    });
+  },
+  methods: {
+    addRain() {
+      // 雨雪天气添加
+      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;
+    },
+    geoJSON() {
+      //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: "?",
+          }
+        )
+      );
+    },
+  },
+};
+</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>
+

.history/src/views/monitor_20201022115808.vue

@@ -0,0 +1,182 @@
+
+<template>
+  <div id="container" class="box">
+    <div id="cesiumContainer"></div>
+    <div class="menu">
+      <el-dropdown @command="handleCommand">
+        <span class="el-dropdown-link">
+          下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="a">天气开关</el-dropdown-item>
+          <el-dropdown-item command="b">地图中文标记</el-dropdown-item>
+          <el-dropdown-item command="c">回到初始位置</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+<script>
+var Cesium = require("cesium/Cesium");
+var widgets = require("cesium/Widgets/widgets.css");
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      publicPath: process.env.BASE_URL,
+      initPosition: [106.0231304, 37.73323706, 0],
+      viewer: null,
+    };
+  },
+  mounted() {
+    var 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.ArcGisMapServerImageryProvider({
+        url:
+          "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
+        baseLayerPicker: false,
+      }),
+    });
+    viewer.scene.camera.setView({
+      // 初始化相机经纬度
+      destination: new Cesium.Cartesian3.fromDegrees(
+        106.0231304,
+        37.73323706,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+    this.viewer = viewer;
+  },
+  methods: {
+    addRain() {
+      // 雨雪天气添加
+      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;
+    },
+    geoJSON() {
+      //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: "?",
+          }
+        )
+      );
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 2000.0),
+      });
+    },
+    handleCommand(command) {
+      switch (command) {
+        case a:
+          this.addRain();
+          break;
+        case b:
+          this.geoJSON();
+          break;
+        default:
+          this.flyto();
+          break;
+      }
+    },
+    //初始化weosocket
+    initWebSocket() {
+      if (typeof WebSocket === "undefined") {
+        alert("您的浏览器不支持WebSocket");
+        return false;
+      }
+      const wsuri = "ws://10.155.32.4:8010/shbracelet";
+
+      this.websock = new WebSocket(wsuri);
+      this.websock.onopen = this.websocketonopen;
+      this.websock.onmessage = this.websocketonmessage;
+      this.websock.onerror = this.websocketonerror;
+      this.websock.onclose = this.websocketclose;
+    },
+    //连接成功
+    websocketonopen() {
+      console.log("WebSocket连接成功");
+      // 添加心跳检测，每30秒发一次数据，防止连接断开（这跟服务器的设置有关，如果服务器没有设置每隔多长时间不发消息断开，可以不进行心跳设置）
+      let self = this;
+      this.timer = setInterval(() => {
+        try {
+          self.websock.send("test");
+          console.log("发送消息");
+        } catch (err) {
+          console.log("断开了：" + err);
+          self.connection();
+        }
+      }, 30000);
+    },
+    //接收后端返回的数据，可以根据需要进行处理
+    websocketonmessage(e) {
+      var vm = this;
+      let res = JSON.parse(e.data);
+      console.log(res);
+    },
+    //连接建立失败重连
+    websocketonerror(e) {
+      console.log(`连接失败的信息：`, e);
+      this.initWebSocket(); // 连接失败后尝试重新连接
+    },
+    //关闭连接
+    websocketclose(e) {
+      console.log("断开连接", e);
+    },
+  },
+};
+</script>
+ 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style  lang="scss" scoped>
+html,
+body,
+#cesiumContainer {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+.box {
+  height: 100%;
+  .menu {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+</style>
+

.history/src/views/monitor_20201022115846.vue

@@ -0,0 +1,182 @@
+
+<template>
+  <div id="container" class="box">
+    <div id="cesiumContainer"></div>
+    <div class="menu">
+      <el-dropdown @command="handleCommand">
+        <span class="el-dropdown-link">
+          下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="a">天气开关</el-dropdown-item>
+          <el-dropdown-item command="b">地图中文标记</el-dropdown-item>
+          <el-dropdown-item command="c">回到初始位置</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+<script>
+var Cesium = require("cesium/Cesium");
+var widgets = require("cesium/Widgets/widgets.css");
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      publicPath: process.env.BASE_URL,
+      initPosition: [106.0231304, 37.73323706, 0],
+      viewer: null,
+    };
+  },
+  mounted() {
+    var 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.ArcGisMapServerImageryProvider({
+        url:
+          "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
+        baseLayerPicker: false,
+      }),
+    });
+    viewer.scene.camera.setView({
+      // 初始化相机经纬度
+      destination: new Cesium.Cartesian3.fromDegrees(
+        106.0231304,
+        37.73323706,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+    this.viewer = viewer;
+  },
+  methods: {
+    addRain() {
+      // 雨雪天气添加
+      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;
+    },
+    geoJSON() {
+      //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: "?",
+          }
+        )
+      );
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 2000.0),
+      });
+    },
+    handleCommand(command) {
+      switch (command) {
+        case 'a':
+          this.addRain();
+          break;
+        case 'b':
+          this.geoJSON();
+          break;
+        default:
+          this.flyto();
+          break;
+      }
+    },
+    //初始化weosocket
+    initWebSocket() {
+      if (typeof WebSocket === "undefined") {
+        alert("您的浏览器不支持WebSocket");
+        return false;
+      }
+      const wsuri = "ws://10.155.32.4:8010/shbracelet";
+
+      this.websock = new WebSocket(wsuri);
+      this.websock.onopen = this.websocketonopen;
+      this.websock.onmessage = this.websocketonmessage;
+      this.websock.onerror = this.websocketonerror;
+      this.websock.onclose = this.websocketclose;
+    },
+    //连接成功
+    websocketonopen() {
+      console.log("WebSocket连接成功");
+      // 添加心跳检测，每30秒发一次数据，防止连接断开（这跟服务器的设置有关，如果服务器没有设置每隔多长时间不发消息断开，可以不进行心跳设置）
+      let self = this;
+      this.timer = setInterval(() => {
+        try {
+          self.websock.send("test");
+          console.log("发送消息");
+        } catch (err) {
+          console.log("断开了：" + err);
+          self.connection();
+        }
+      }, 30000);
+    },
+    //接收后端返回的数据，可以根据需要进行处理
+    websocketonmessage(e) {
+      var vm = this;
+      let res = JSON.parse(e.data);
+      console.log(res);
+    },
+    //连接建立失败重连
+    websocketonerror(e) {
+      console.log(`连接失败的信息：`, e);
+      this.initWebSocket(); // 连接失败后尝试重新连接
+    },
+    //关闭连接
+    websocketclose(e) {
+      console.log("断开连接", e);
+    },
+  },
+};
+</script>
+ 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style  lang="scss" scoped>
+html,
+body,
+#cesiumContainer {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+.box {
+  height: 100%;
+  .menu {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+</style>
+

.history/src/views/monitor_20201022141116.vue

@@ -0,0 +1,195 @@
+
+<template>
+  <div id="container" class="box">
+    <div id="cesiumContainer"></div>
+    <div class="menu">
+      <el-dropdown @command="handleCommand">
+        <span class="el-dropdown-link">
+          下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="a">天气开关</el-dropdown-item>
+          <el-dropdown-item command="b">地图中文标记</el-dropdown-item>
+          <el-dropdown-item command="c">回到初始位置</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+<script>
+var Cesium = require("cesium/Cesium");
+var widgets = require("cesium/Widgets/widgets.css");
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      publicPath: process.env.BASE_URL,
+      initPosition: [106.0231304, 37.73323706, 0],
+      viewer: null,
+    };
+  },
+  mounted() {
+    var 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.ArcGisMapServerImageryProvider({
+        url:
+          "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
+        baseLayerPicker: false,
+      }),
+    });
+    viewer.scene.camera.setView({
+      // 初始化相机经纬度
+      destination: new Cesium.Cartesian3.fromDegrees(
+        106.0231304,
+        37.73323706,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+    this.viewer = viewer;
+  },
+  methods: {
+    addRain() {
+      // 雨雪天气添加
+      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;
+    },
+    geoJSON() {
+      //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: "?",
+          }
+        )
+      );
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(106.0231304,
+        37.73323706,
+        2000),
+        duration:5, // 设置飞行持续时间，默认会根据距离来计算
+        complete: function () {
+            // 到达位置后执行的回调函数
+            console.log('到达目的地');
+        },
+        cancle: function () {
+            // 如果取消飞行则会调用此函数
+            console.log('飞行取消')
+        },
+        pitchAdjustHeight: -90, // 如果摄像机飞越高于该值，则调整俯仰俯仰的俯仰角度，并将地球保持在视口中。
+        maximumHeight:5000, // 相机最大飞行高度
+      });
+    },
+    handleCommand(command) {
+      switch (command) {
+        case 'a':
+          this.addRain();
+          break;
+        case 'b':
+          this.geoJSON();
+          break;
+        default:
+          this.flyto();
+          break;
+      }
+    },
+    //初始化weosocket
+    initWebSocket() {
+      if (typeof WebSocket === "undefined") {
+        alert("您的浏览器不支持WebSocket");
+        return false;
+      }
+      const wsuri = "ws://10.155.32.4:8010/shbracelet";
+
+      this.websock = new WebSocket(wsuri);
+      this.websock.onopen = this.websocketonopen;
+      this.websock.onmessage = this.websocketonmessage;
+      this.websock.onerror = this.websocketonerror;
+      this.websock.onclose = this.websocketclose;
+    },
+    //连接成功
+    websocketonopen() {
+      console.log("WebSocket连接成功");
+      // 添加心跳检测，每30秒发一次数据，防止连接断开（这跟服务器的设置有关，如果服务器没有设置每隔多长时间不发消息断开，可以不进行心跳设置）
+      let self = this;
+      this.timer = setInterval(() => {
+        try {
+          self.websock.send("test");
+          console.log("发送消息");
+        } catch (err) {
+          console.log("断开了：" + err);
+          self.connection();
+        }
+      }, 30000);
+    },
+    //接收后端返回的数据，可以根据需要进行处理
+    websocketonmessage(e) {
+      var vm = this;
+      let res = JSON.parse(e.data);
+      console.log(res);
+    },
+    //连接建立失败重连
+    websocketonerror(e) {
+      console.log(`连接失败的信息：`, e);
+      this.initWebSocket(); // 连接失败后尝试重新连接
+    },
+    //关闭连接
+    websocketclose(e) {
+      console.log("断开连接", e);
+    },
+  },
+};
+</script>
+ 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style  lang="scss" scoped>
+html,
+body,
+#cesiumContainer {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+.box {
+  height: 100%;
+  .menu {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+</style>
+

.history/src/views/monitor_20201022141117.vue

@@ -0,0 +1,195 @@
+
+<template>
+  <div id="container" class="box">
+    <div id="cesiumContainer"></div>
+    <div class="menu">
+      <el-dropdown @command="handleCommand">
+        <span class="el-dropdown-link">
+          下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="a">天气开关</el-dropdown-item>
+          <el-dropdown-item command="b">地图中文标记</el-dropdown-item>
+          <el-dropdown-item command="c">回到初始位置</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+<script>
+var Cesium = require("cesium/Cesium");
+var widgets = require("cesium/Widgets/widgets.css");
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      publicPath: process.env.BASE_URL,
+      initPosition: [106.0231304, 37.73323706, 0],
+      viewer: null,
+    };
+  },
+  mounted() {
+    var 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.ArcGisMapServerImageryProvider({
+        url:
+          "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
+        baseLayerPicker: false,
+      }),
+    });
+    viewer.scene.camera.setView({
+      // 初始化相机经纬度
+      destination: new Cesium.Cartesian3.fromDegrees(
+        106.0231304,
+        37.73323706,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+    this.viewer = viewer;
+  },
+  methods: {
+    addRain() {
+      // 雨雪天气添加
+      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;
+    },
+    geoJSON() {
+      //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: "?",
+          }
+        )
+      );
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(106.0231304,
+        37.73323706,
+        2000),
+        //duration:5, // 设置飞行持续时间，默认会根据距离来计算
+        complete: function () {
+            // 到达位置后执行的回调函数
+            console.log('到达目的地');
+        },
+        cancle: function () {
+            // 如果取消飞行则会调用此函数
+            console.log('飞行取消')
+        },
+        pitchAdjustHeight: -90, // 如果摄像机飞越高于该值，则调整俯仰俯仰的俯仰角度，并将地球保持在视口中。
+        maximumHeight:5000, // 相机最大飞行高度
+      });
+    },
+    handleCommand(command) {
+      switch (command) {
+        case 'a':
+          this.addRain();
+          break;
+        case 'b':
+          this.geoJSON();
+          break;
+        default:
+          this.flyto();
+          break;
+      }
+    },
+    //初始化weosocket
+    initWebSocket() {
+      if (typeof WebSocket === "undefined") {
+        alert("您的浏览器不支持WebSocket");
+        return false;
+      }
+      const wsuri = "ws://10.155.32.4:8010/shbracelet";
+
+      this.websock = new WebSocket(wsuri);
+      this.websock.onopen = this.websocketonopen;
+      this.websock.onmessage = this.websocketonmessage;
+      this.websock.onerror = this.websocketonerror;
+      this.websock.onclose = this.websocketclose;
+    },
+    //连接成功
+    websocketonopen() {
+      console.log("WebSocket连接成功");
+      // 添加心跳检测，每30秒发一次数据，防止连接断开（这跟服务器的设置有关，如果服务器没有设置每隔多长时间不发消息断开，可以不进行心跳设置）
+      let self = this;
+      this.timer = setInterval(() => {
+        try {
+          self.websock.send("test");
+          console.log("发送消息");
+        } catch (err) {
+          console.log("断开了：" + err);
+          self.connection();
+        }
+      }, 30000);
+    },
+    //接收后端返回的数据，可以根据需要进行处理
+    websocketonmessage(e) {
+      var vm = this;
+      let res = JSON.parse(e.data);
+      console.log(res);
+    },
+    //连接建立失败重连
+    websocketonerror(e) {
+      console.log(`连接失败的信息：`, e);
+      this.initWebSocket(); // 连接失败后尝试重新连接
+    },
+    //关闭连接
+    websocketclose(e) {
+      console.log("断开连接", e);
+    },
+  },
+};
+</script>
+ 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style  lang="scss" scoped>
+html,
+body,
+#cesiumContainer {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+.box {
+  height: 100%;
+  .menu {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+</style>
+

package.json

@@ -8,6 +8,12 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "dayjs": "^1.8.36",
+    "echarts": "^4.8.0",
+    "echarts-gl": "^1.1.1",
+    "element-ui": "^2.4.5",
+    "three-css2drender": "^1.0.0",
+    "three-obj-mtl-loader": "^1.0.3",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0"
   },
@@ -15,8 +21,10 @@
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
+    "node-sass": "^4.9.2",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
+    "vue-cli-plugin-element": "~1.0.1",
     "vue-template-compiler": "^2.6.11"
   },
   "browserslist": [

public/static/CiecleScan.js

@@ -0,0 +1,197 @@
+var Cesium = require("cesium/Cesium");
+export default{
+    addCircleWave(viewer,msgarr,color) {
+    viewer.entities.add({
+        id:msgarr.userid+'',
+        name: msgarr.username,
+        position: Cesium.Cartesian3.fromDegrees(Number(msgarr.lng + Math.random()*0.01),msgarr.lat, 0 ),
+        ellipse: {
+          height: 0,
+          semiMinorAxis: 15,
+          semiMajorAxis: 15,
+          material: new Cesium.CircleWaveMaterialProperty({
+            duration: 2e3,
+            gradient: 0,
+            color: color,
+            count: 3
+          })
+        },
+        point: {
+            pixelSize: 10,
+            color: Cesium.Color.YELLOW,
+          },
+        label: {
+            text: msgarr.username,
+            font: "14pt monospace",
+            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+            outlineWidth: 2,
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            pixelOffset: new Cesium.Cartesian2(0, -9),
+          },
+      });
+    }
+}
+export class CircleWaveMaterialProperty {
+    constructor(options) {
+        options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT);
+
+        this._definitionChanged = new Cesium.Event();
+
+        this._color = undefined;
+
+        this._colorSubscription = undefined;
+
+        this.color = options.color;
+
+        this.duration = Cesium.defaultValue(options.duration, 1e3);
+
+        this.count = Cesium.defaultValue(options.count, 2);
+
+        if (this.count <= 0) this.count = 1;
+
+        this.gradient = Cesium.defaultValue(options.gradient, 0.1);
+
+        if (this.gradient < 0) this.gradient = 0;
+
+        else if (this.gradient > 1) this.gradient = 1;
+
+        this._time = performance.now();
+
+    }
+
+}
+
+Object.defineProperties(CircleWaveMaterialProperty.prototype, {
+    isConstant: {
+        get: function() {
+            return false;
+
+        }
+
+    },
+
+    definitionChanged: {
+        get: function() {
+            return this._definitionChanged;
+
+        }
+
+    },
+
+    color: Cesium.createPropertyDescriptor('color')
+
+});
+
+CircleWaveMaterialProperty.prototype.getType = function(time) {
+    return Cesium.Material.CircleWaveMaterialType;
+
+}
+
+CircleWaveMaterialProperty.prototype.getValue = function(time, result) {
+    if (!Cesium.defined(result)) {
+        result = {};
+
+    }
+
+    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
+
+    result.time = (performance.now() - this._time) / this.duration;
+
+    result.count = this.count;
+
+    result.gradient = 1 + 10 * (1 - this.gradient);
+
+    return result;
+
+}
+
+CircleWaveMaterialProperty.prototype.equals = function(other) {
+    return this === other ||
+
+        (other instanceof CircleWaveMaterialProperty &&
+
+            Cesium.Property.equals(this._color, other._color))
+
+}
+
+Cesium.Material.CircleWaveMaterialType = 'CircleWaveMaterial';
+
+Cesium.Material.PolylineTrailSource = 
+                                    //     `czm_material czm_getMaterial(czm_materialInput materialInput)\n
+                                    //     {\n
+                                    //         czm_material material = czm_getDefaultMaterial(materialInput);\n
+                                    //         material.diffuse = 1.5 * color.rgb;\n
+                                    //         vec2 st = materialInput.st;\n
+                                    //         vec3 str = materialInput.str;\n
+                                    //         float dis = distance(st, vec2(0.5, 0.5));\n
+                                    //         float per = fract(time);\n
+                                    //         if (abs(str.z) > 0.001) {\n
+                                    //             discard;\n
+                                    //         }\n
+                                    //         if (dis > 0.5) { \n
+                                    //             discard; \n
+                                    //         } else { \n
+                                    //             float perDis = 0.5 / count;\n
+                                    //             float disNum; \n                       
+                                    //             float bl = .0; \n                       
+                                    //             for (int i = 0; i <= 999; i++) { \n                           
+                                    //                 if (float(i) <= count) { \n                              
+                                    //                   disNum = perDis *float(i) - dis + per / count; \n                             
+                                    //                     if (disNum > 0.0) { \n                                 
+                                    //                         if (disNum < perDis) { \n                                     
+                                    //                             bl = 1.0 - disNum / perDis;\n
+                                    //                         }\n                                
+                                    //                       else if(disNum - perDis < perDis) { \n                                       
+                                    //                                 bl = 1.0 - abs(1.0 - disNum / perDis); \n
+                                    //                         } \n                                 
+                                    //                         material.alpha = pow(bl, gradient); \n
+                                    //                     } \n
+                                    //                 } \n
+                                    //             } \n
+                                    //         } \n
+                                    //     return material; \n
+                                    // } \n`;
+    "czm_material czm_getMaterial(czm_materialInput materialInput)\n" +
+    "{\n" +
+    "czm_material material = czm_getDefaultMaterial(materialInput);\n" +
+    "material.diffuse = 1.5 * color.rgb;\n" +
+    "vec2 st = materialInput.st;\n" +
+    "float dis = distance(st, vec2(0.5, 0.5));\n" +
+    "float per = fract(time);\n" +
+    "if(dis > per * 0.5){\n" +
+    "material.alpha = 0.0;\n"+                     
+    "discard;\n" +
+    "}else {\n" +
+    "material.alpha = color.a  * dis / per / 1.0;\n" +
+    "}\n" +
+    "return material;\n" +
+    "}";
+
+Cesium.Material._materialCache.addMaterial(Cesium.Material.CircleWaveMaterialType, {
+    fabric: {
+        type: Cesium.Material.CircleWaveMaterialType,
+
+        uniforms: {
+            color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
+
+            time: 1,
+
+            count: 1,
+
+            gradient: 0.1
+
+        },
+
+        source: Cesium.Material.PolylineTrailSource
+
+    },
+
+    translucent: function(material) {
+        return !0;
+
+    }
+
+});
+
+Cesium.CircleWaveMaterialProperty = CircleWaveMaterialProperty;
+

public/static/chinaGeoJson

@@ -0,0 +1 @@
+Subproject commit 2b7c6a420a7cd3bb98200a4932b4d91e525addeb

public/static/common.js

@@ -0,0 +1,5 @@
+import dayjs from 'dayjs'
+export function parseDate2Str(date, format) {
+    format = format || "YYYY-MM-DD HH:mm:ss";
+    return dayjs(date).format(format);
+  }

public/static/config.js

@@ -0,0 +1,107 @@
+ const URL_CONFIG = {
+    TDT_IMG : 'https://[subdomain].tianditu.com/img_w/wmts',//天地图影像
+    TDT_LABEL : 'https://[subdomain].tianditu.com/cia_w/wmts',//天地图文字注记
+    BINGMAP : '//dev.virtualearth.net',//bing map影像
+    STK : 'https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path',//STK 地形
+    ZF_IMG : 'http://www.supermapol.com/realspace/services/3D-dxyx_ios2/rest/realspace/datas/MosaicResult_2@IMAGE_1',
+    ZF_TERRAIN : 'http://www.supermapol.com/realspace/services/3D-dxyx_ios2/rest/realspace/datas/DatasetDEM_1@sichuanTer',
+    ZF_IMG2 : 'http://www.supermapol.com/realspace/services/3D-ZF_normal/rest/realspace/datas/image',//珠峰影像SCI
+    ZF_TERRAIN2 : 'http://www.supermapol.com/realspace/services/3D-ZF_normal/rest/realspace/datas/srtm_54_07@zhufeng',//珠峰地形SCT
+    SiChuan_TERRAIN : 'http://www.supermapol.com/realspace/services/3D-dixingyingxiang/rest/realspace/datas/DatasetDEM', // 四川地形
+    SiChuan_IMG : 'http://www.supermapol.com/realspace/services/3D-dixingyingxiang/rest/realspace/datas/MosaicResult', // 四川影像
+    TENSE_IMG0 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe-2/rest/realspace/datas/rs0300@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
+    TENSE_IMG1 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe-2/rest/realspace/datas/rs0310@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
+    TENSE_IMG2 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe-2/rest/realspace/datas/rs0330@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
+    TENSE_IMG3 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe-2/rest/realspace/datas/rs0340@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
+    TENSE_IMG4 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe-2/rest/realspace/datas/rs0350@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
+    TENSE_IMG5 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe-2/rest/realspace/datas/rs0400@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
+    TENSE_IMG6 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe-2/rest/realspace/datas/rs0410@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
+    TENSE_IMG7 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe-2/rest/realspace/datas/rs0420@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
+    TENSE_IMG8 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe-2/rest/realspace/datas/rs0430@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
+    TENSE_IMG9 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe-2/rest/realspace/datas/rs0440@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
+    TENSE_IMG10 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe-2/rest/realspace/datas/rs0450@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
+    SUPERMAP_IMG_WGS : 'http://www.supermapol.com/realspace/services/map-World/rest/maps/World_Google',//经纬度投影地图TILE IMGERY（中国区域）
+    SUPERMAP_IMG_MEC : 'http://www.supermapol.com/realspace/services/map-China400/rest/maps/China400',//墨卡托投影地图TILE IMGERY（全球）
+    SCP_JINJIANG : 'http://www.supermapol.com/realspace/services/3D-jinjiang/rest/realspace/datas/jinjiang/config',// 晋江倾斜SCP
+    SCENE_JINJIANG: 'http://www.supermapol.com/realspace/services/3D-jinjiang/rest/realspace', // 晋江倾斜 场景
+    SCP_SUOFEIYA : 'http://www.supermapol.com/realspace/services/3D-suofeiya_church/rest/realspace/datas/Config/config', // 索菲亚大教堂倾斜数据
+    SCENE_SUOFEIYA: 'http://www.supermapol.com/realspace/services/3D-suofeiya_church/rest/realspace', // 索菲亚大教堂倾斜数据场景
+    SCP_SRSB : 'http://www.supermapol.com/realspace/services/3D-srsb/rest/realspace/datas/srsb/config',//萨尔茨堡SCP
+    SCENE_SRSB: 'http://www.supermapol.com/realspace/services/3D-srsb/rest/realspace', // 萨尔茨堡场景
+    SCP_SRSB_WATER : 'http://www.supermapol.com/realspace/services/3D-srsb/rest/realspace/datas/%E6%B0%B4%E9%9D%A2@vector/config',//萨尔茨堡水面SCP
+    SCP_NIAOCHAO : 'http://www.supermapol.com/realspace/services/3D-niaocao_water/rest/realspace/datas/%E9%B8%9F%E5%B7%A2%E4%BA%94%E6%9C%9F/config',//鸟巢SCP
+    SCENE_NIAOCHAO: 'http://www.supermapol.com/realspace/services/3D-OlympicGreen20200416/rest/realspace', // 鸟巢 场景
+    SCP_NIAOCHAO_WATER : 'http://www.supermapol.com/realspace/services/3D-Olympic/rest/realspace/datas/NewDataset@water-caijian/config',//鸟巢水面SCP
+    SCP_CBD_TREE : 'http://www.supermapol.com/realspace/services/3D-WebGLCBD/rest/realspace/datas/Tree@%E6%96%B0CBD/config',//CBD 树SCP
+    SCP_CBD_ROAD:'http://www.supermapol.com/realspace/services/3D-CBDCache20200416/rest/realspace/datas/Ground_Daolu@CBD/config',//CBD的道路网
+    SCP_CBD_BRIDGE:'http://www.supermapol.com/realspace/services/3D-CBDCache20200416/rest/realspace/datas/Ground_qiao@CBD/config',
+    //SCP_CBD_GROUND1 : 'http://www.supermapol.com/realspace/services/3D-WebGLCBD/rest/realspace/datas/Ground_1@%E6%96%B0CBD/config',//CBD 地面1 SCP
+    SCP_CBD_GROUND1 : 'http://www.supermapol.com/realspace/services/3D-CBDCache20200416/rest/realspace/datas/Ground_1@CBD/config',//新CBD 地面1 SCP
+    SCP_CBD_GROUND2 : 'http://www.supermapol.com/realspace/services/3D-WebGLCBD/rest/realspace/datas/Ground_2@%E6%96%B0CBD/config',//CBD 地面2 SCP
+    //SCP_CBD_BUILD : 'http://www.supermapol.com/realspace/services/3D-WebGLCBD/rest/realspace/datas/Building@%E6%96%B0CBD/config',//CBD 建筑物 SCP  
+    SCP_CBD_BUILD : 'http://www.supermapol.com/realspace/services/3D-CBD/rest/realspace/datas/Building@CBD/config',//CBD 建筑物 SCP
+    SCP_CBD_TREE: 'http://www.supermapol.com/realspace/services/3D-CBDCache20200416/rest/realspace/datas/Tree@CBD/config',//CBD的书
+    SCP_CBD_LAKE : 'http://www.supermapol.com/realspace/services/3D-CBDCache20200416/rest/realspace/datas/Lake@CBD/config',
+    SCP_BIM : 'https://www.supermapol.com/realspace/services/3D-S3MData/rest/realspace/datas/T8H_NoLod/config',//BIM scp
+    SCENE_BIMBUILDING: 'http://www.supermapol.com/realspace/services/3D-BIMbuilding/rest/realspace', // BIM 场景
+    SCENE_WIREFRAME:'http://www.supermapol.com/realspace/services/3D-wireFrame/rest/realspace',//BIM wireFrame场景
+    SCP_VECTOR_POLYGON : 'http://www.supermapol.com/realspace/services/3D-China/rest/realspace/datas/%E4%B8%93%E9%A2%98%E5%9B%BE/config',//矢量 面 SCP
+    SCP_VECTOR_LINE : 'http://www.supermapol.com/realspace/services/3D-China/rest/realspace/datas/Line/config',// 矢量 线 SCP
+    SCP_VECTOR_TEXT : 'http://www.supermapol.com/realspace/services/3D-China/rest/realspace/datas/text/config',//矢量 文字 SCP
+    SCP_POINTCLOUD : 'http://www.supermapol.com/realspace/services/3D-cloud/rest/realspace/datas/POINTCLOUD23/config', //点云 SCP
+    SCENE_POINTCLOUD: 'http://www.supermapol.com/realspace/services/3D-cloud/rest/realspace',
+    SCP_SGNS : 'http://www.supermapol.com/realspace/services/3D-SGNS/rest/realspace/datas/siguniang/config',//四姑娘山 SCP
+    SCENE_SGNS: 'http://www.supermapol.com/realspace/services/3D-SGNS/rest/realspace', // 四姑娘山 场景
+	SCENE_RECT: 'http://www.supermapol.com/realspace/services/3D-Text01/rest/realspace', // 框选 场景
+    SCP_OLYMPIC_TREE : 'http://www.supermapol.com/realspace/services/3D-WebGLOlympicGreen/rest/realspace/datas/Tree@OlympicGreen/config',//奥林匹克公园 树 SCP
+    SCP_OLYMPIC_BUILD : 'http://www.supermapol.com/realspace/services/3D-WebGLOlympicGreen/rest/realspace/datas/Building@OlympicGreen/config',//奥林匹克公园 建筑物 SCP
+    SCP_OLYMPIC_BILLBOARD : 'http://www.supermapol.com/realspace/services/3D-WebGLOlympicGreen/rest/realspace/datas/BillBoard@OlympicGreen/config',//奥林匹克公园 人物 SCP
+    SCP_OLYMPIC_GROUND : 'http://www.supermapol.com/realspace/services/3D-WebGLOlympicGreen/rest/realspace/datas/Ground@OlympicGreen/config',//奥林匹克公园 地面 SCP
+    SCP_OLYMPIC_WATER : 'http://www.supermapol.com/realspace/services/3D-WebGLOlympicGreen/rest/realspace/datas/Waters@OlympicGreen/config',//奥林匹克公园 水面 SCP
+    SCENE_OLYMPIC: 'http://www.supermapol.com/realspace/services/3D-Olympic/rest/realspace',
+    SCENE_OLYMPIC_GREEN: 'http://www.supermapol.com/realspace/services/3D-SampleCodeForFan20200420/rest/realspace',
+    SCP_XGPARK : 'http://www.supermapol.com/realspace/services/3D-yanmofenxi/rest/realspace/datas/sci_park/config',// 香港科技园 SCP
+    SCENE_XGPARK: 'http://www.supermapol.com/realspace/services/3D-yanmofenxi/rest/realspace', // 香港科技园 场景
+    SCP_PIPELINE : 'https://www.supermapol.com/realspace/services/3D-pipeline_s3m/rest/realspace/datas/NetWork@Pipe3D/config', //管线 SCP 失效
+    SCP_HISTOGRAM1 : 'http://www.supermapol.com/realspace/services/3D-Histogram/rest/realspace/datas/Point2D_3000_5000/config', //
+    SCP_HISTOGRAM2 : 'http://www.supermapol.com/realspace/services/3D-Histogram/rest/realspace/datas/Point2D_10000_max/config', //
+    SCP_HISTOGRAM3 : 'http://www.supermapol.com/realspace/services/3D-Histogram/rest/realspace/datas/Point2D_min_1000/config', //
+    SCP_HISTOGRAM4 : 'http://www.supermapol.com/realspace/services/3D-Histogram/rest/realspace/datas/Point2D_5000_10000/config',//
+    SCP_HISTOGRAM5 : 'http://www.supermapol.com/realspace/services/3D-Histogram/rest/realspace/datas/Point2D_1000_3000/config', //
+    SCENE_HISTOGRAM: 'http://www.supermapol.com/realspace/services/3D-Histogram/rest/realspace',
+    SCENE_CBD : 'http://www.supermapol.com/realspace/services/3D-CBDCache20200416/rest/realspace', // CBD场景
+	SCENE_WebGLCBD : 'http://www.supermapol.com/realspace/services/3D-CBDCache20200416/rest/realspace',   // 新CBD场景
+    SCP_FCFH_QX: 'http://www.supermapol.com/realspace/services/3D-FCFH_Shangdong/rest/realspace/datas/config/config', //分层分户倾斜摄影图层
+    SCP_FCFH_VECTOR_EXTRUDE: 'http://www.supermapol.com/realspace/services/3D-individualHouse/rest/realspace/datas/%E4%B8%93%E9%A2%98%E6%88%B7%E5%9E%8B%E9%9D%A2_%E6%8B%89%E4%BC%B8/config', // 分层分户侧面拉伸数据
+    SCP_FCFH_DATA: 'http://www.supermapol.com/realspace/services/data-FCFH_Shangdong/rest/data', //分层分户数据服务
+    SCP_WORLD_COUNTRY_VECTOR: 'http://www.supermapol.com/realspace/services/3D-Countries-World2/rest/realspace/datas/Countries_1@World/config', // 全球国家边界线的矢量                
+    SCP_WORLD_COUNTRY_VECTOR2: ' http://www.supermapol.com/realspace/services/3D-ShiJieGuoJiaBianJie/rest/realspace',  // 全球国家边界线的矢量2
+    SCENE_POLYLINEGROW_BUINDINGS: 'http://www.supermapol.com/realspace/services/3D-buildings1122/rest/realspace', // 光晕效果线数据,
+    SCENE_TISHUJU: 'http://www.supermapol.com/realspace/services/3D-tishuju/rest/realspace', // 体数据场景
+    BING_MAP_KEY: 'AraGkBfghounWbX8rAcEEL8VXISh5M7tbxnlGxKocM134GmIr-yr48WBJvfaRaCg',
+    SCENE_GTC_UINSIDE:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%86%85%E9%83%A8%E7%BB%93%E6%9E%84@%E5%AE%A4%E5%86%85/config',//u型BIM室内
+	SCENE_GTC_UOUTSIDE:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%A4%96%E9%83%A8%E7%BB%93%E6%9E%84@%E5%AE%A4%E5%86%85/config',//u型BIM室外
+	SCENE_GTC_UWINDOW:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/U%E5%9E%8B%E5%BB%BA%E7%AD%91%E7%AA%97@%E5%AE%A4%E5%86%85/config',//u型BIM窗
+	SCENE_GTC_WALL9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%90%88%E5%B9%B6%E5%89%8D%E5%A2%99@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//九号楼合并前墙
+	SCENE_GTC_WINDOW9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%90%88%E5%B9%B6%E5%89%8D%E7%AA%97@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//九号楼合并前窗
+	SCENE_GTC_WINDOW9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%90%88%E5%B9%B6%E5%89%8D%E7%BB%93%E6%9E%84%E5%9F%BA%E7%A1%80@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//九号楼合并前结构
+	SCENE_GTC_WINDOW9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%90%88%E5%B9%B6%E5%89%8D%E9%97%A8@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//九号楼合并前门
+	SCENE_GTC_WINDOW9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%90%88%E5%B9%B6%E5%89%8D%E6%A5%BC%E6%9D%BF@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//九号楼合并前楼板
+	SCENE_GTC_FLOOR9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E6%8B%89%E4%BD%8E%E6%A5%BC%E5%B1%82@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//九号楼楼层
+	SCENE_GTC_LWINDOW9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E6%8B%89%E4%BD%8E%E7%AA%97@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//九号楼拉低窗
+	SCENE_GTC_LWALL9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E6%8B%89%E4%BD%8E%E5%A2%99@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//九号楼拉低墙
+	SCENE_GTC_LB9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E6%8B%89%E4%BD%8E%E6%A5%BC%E6%9D%BF@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//九号楼拉低楼板
+	SCENE_GTC_UNIT9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%90%88%E5%B9%B6%E5%90%8E@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//合并九号楼
+	SCENE_GTC_BUILDIBG:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/building_udb@building/config',//building_udb@building
+	SCENE_GTC_HILL:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%B1%B1/config',//山
+	SCENE_GTC_GROUND:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%9C%B0%E9%9D%A2/config',//地面
+	SCENE_MODELUPDATE:'http://www.supermapol.com/realspace/services/3D-MoXingGengXin/rest/realspace',//建筑分析区白模数据
+    SCENE_CLIP:'http://www.supermapol.com/realspace/services/3D-clip_fengbian/rest/realspace',//裁剪封边数据
+    TOKEN_TIANDITU: '4a00a1dc5387b8ed8adba3374bd87e5e', // 天地图token
+    SCENE_FEATUREVALUE:'http://www.supermapol.com/realspace/services/3D-featureValue_building9/rest/realspace/datas/%E4%B9%9D%E5%8F%B7@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//带特征值的九号楼缓存
+    SCENE_OLYMPIC_NIGHT:'http://www.supermapol.com/realspace/services/3D-OlympicGreenNight/rest/realspace',//鸟巢夜景
+	SCENE_CHONGQING_TX:'http://www.supermapol.com/realspace/services/3D-CQmodel_wireframe_2000/rest/realspace',//重庆白模，特效用
+	SCENE_VOLUME_NEAREST:'http://www.supermapol.com/realspace/services/3D-compare/rest/realspace',//临近采样模式白模数据
+    SCENE_SICHUAN: 'http://www.supermapol.com/realspace/services/3D-dixingyingxiang/rest/realspace'
+	};
+export default URL_CONFIG

public/static/fj.js

@@ -0,0 +1,410 @@
+var wtTree =
+[
+{
+    "id": "NSS_FDC", "name": "牛首山", "lng": 106.0231304, "lat": 37.73323706, "wts":
+    [{ "id": "NG01", "lng": 106.0231304, "lat": 37.73323706, "alt": "0" },
+    { "id": "NG02", "lng": 106.0249329, "lat": 37.73863338, "alt": "0" },
+    { "id": "NG03", "lng": 106.0214138, "lat": 37.74399538, "alt": "0" },
+    { "id": "NG04", "lng": 106.0251689, "lat": 37.74608238, "alt": "0" },
+    { "id": "NG05", "lng": 106.0223579, "lat": 37.74820326, "alt": "0" },
+    { "id": "NG06", "lng": 106.0289025, "lat": 37.750867, "alt": "0" },
+    { "id": "NG07", "lng": 106.0328722, "lat": 37.75317436, "alt": "0" },
+    { "id": "NG08", "lng": 106.0372066, "lat": 37.75110452, "alt": "0" },
+    { "id": "NG09", "lng": 106.04182, "lat": 37.75003565, "alt": "0" },
+    { "id": "NG10", "lng": 106.0283446, "lat": 37.75456553, "alt": "0" },
+    { "id": "NG11", "lng": 106.031456, "lat": 37.75699153, "alt": "0" },
+    { "id": "NG12", "lng": 106.0190535, "lat": 37.73510376, "alt": "0" },
+    { "id": "NG13", "lng": 106.0168433, "lat": 37.73832794, "alt": "0" },
+    { "id": "NG14", "lng": 106.0159206, "lat": 37.74394448, "alt": "0" },
+    { "id": "NG15", "lng": 106.0165429, "lat": 37.74962846, "alt": "0" },
+    { "id": "NG16", "lng": 106.0229802, "lat": 37.75476911, "alt": "0" },
+    { "id": "NG17", "lng": 106.0236454, "lat": 37.75856923, "alt": "0" },
+    { "id": "NG18", "lng": 106.0295248, "lat": 37.76184329, "alt": "0" },
+    { "id": "NG19", "lng": 106.026628, "lat": 37.76457438, "alt": "0" },
+    { "id": "NG20", "lng": 106.0323787, "lat": 37.76574482, "alt": "0" },
+    { "id": "NG21", "lng": 106.0368419, "lat": 37.76644029, "alt": "0" },
+    { "id": "NG22", "lng": 106.0352325, "lat": 37.76998539, "alt": "0" },
+    { "id": "NG23", "lng": 106.0304046, "lat": 37.77046031, "alt": "0" },
+    { "id": "NG24", "lng": 106.0138178, "lat": 37.73627466, "alt": "0" },
+    { "id": "NG25", "lng": 106.0120368, "lat": 37.74048298, "alt": "0" },
+    { "id": "NG26", "lng": 106.0106635, "lat": 37.74401235, "alt": "0" },
+    { "id": "NG27", "lng": 106.0098052, "lat": 37.74850866, "alt": "0" },
+    { "id": "NG28", "lng": 106.0118222, "lat": 37.75208855, "alt": "0" },
+    { "id": "NG29", "lng": 106.0084963, "lat": 37.75534593, "alt": "0" },
+    { "id": "NG30", "lng": 106.0140967, "lat": 37.7552611, "alt": "0" },
+    { "id": "NG31", "lng": 106.0183024, "lat": 37.75746654, "alt": "0" },
+    { "id": "NG32", "lng": 106.0184956, "lat": 37.76191114, "alt": "0" },
+    { "id": "NG33", "lng": 106.0219288, "lat": 37.76421816, "alt": "0" },
+    { "id": "NG34", "lng": 106.0052347, "lat": 37.75222428, "alt": "0" },
+    { "id": "NG35", "lng": 106.0035396, "lat": 37.75519324, "alt": "0" },
+    { "id": "NG36", "lng": 106.0031533, "lat": 37.75839959, "alt": "0" },
+    { "id": "NG37", "lng": 106.0074878, "lat": 37.76002815, "alt": "0" },
+    { "id": "NG38", "lng": 106.0128522, "lat": 37.76087635, "alt": "0" },
+    { "id": "NG39", "lng": 106.0088396, "lat": 37.7640146, "alt": "0" },
+    { "id": "NG40", "lng": 106.0035396, "lat": 37.76377712, "alt": "0" },
+    { "id": "NG41", "lng": 106.0178089, "lat": 37.76569393, "alt": "0" },
+    { "id": "NG42", "lng": 106.0186028, "lat": 37.77034158, "alt": "0" },
+    { "id": "NG43", "lng": 106.0163713, "lat": 37.73182852, "alt": "0" },
+    { "id": "NG44", "lng": 106.0049343, "lat": 37.74847473, "alt": "0" },
+    { "id": "NG45", "lng": 106.025877, "lat": 37.76910337, "alt": "0" },
+    { "id": "NG46", "lng": 106.0230017, "lat": 37.77208862, "alt": "0" },
+    { "id": "NG47", "lng": 106.0224652, "lat": 37.77833011, "alt": "0" },
+    { "id": "NG48", "lng": 106.0262203, "lat": 37.78075533, "alt": "0" },
+    { "id": "NG49", "lng": 106.0300612, "lat": 37.78256995, "alt": "0" },
+    { "id": "NG50", "lng": 106.0240102, "lat": 37.78399448, "alt": "0" },
+    { "id": "NG51", "lng": 106.0277653, "lat": 37.78562249, "alt": "0" },
+    { "id": "NG52", "lng": 106.0358548, "lat": 37.79120152, "alt": "0" },
+    { "id": "NG53", "lng": 106.0301042, "lat": 37.78904796, "alt": "0" },
+    { "id": "NG54", "lng": 106.0329795, "lat": 37.78597861, "alt": "0" },
+    { "id": "NG55", "lng": 106.0356617, "lat": 37.78299392, "alt": "0" },
+    { "id": "NG56", "lng": 106.0195041, "lat": 37.77531119, "alt": "0" },
+    { "id": "NG57", "lng": 106.0235167, "lat": 37.79483021, "alt": "0" },
+    { "id": "NG58", "lng": 106.0251474, "lat": 37.79908606, "alt": "0" },
+    { "id": "NG59", "lng": 106.0296535, "lat": 37.80127324, "alt": "0" },
+    { "id": "NG60", "lng": 106.0350823, "lat": 37.80379943, "alt": "0" },
+    { "id": "NG61", "lng": 106.0305977, "lat": 37.80386724, "alt": "0" },
+    { "id": "NG62", "lng": 106.0254693, "lat": 37.80356207, "alt": "0" },
+    { "id": "NG63", "lng": 106.0209846, "lat": 37.80507097, "alt": "0" },
+    { "id": "NG64", "lng": 106.0189247, "lat": 37.80127324, "alt": "0" },
+    { "id": "NG65", "lng": 106.0166931, "lat": 37.80451149, "alt": "0" },
+    { "id": "NG66", "lng": 106.0193539, "lat": 37.80890241, "alt": "0" },
+    { "id": "NG67", "lng": 106.0238385, "lat": 37.81029253, "alt": "0" },
+    { "id": "NG68", "lng": 106.0149336, "lat": 37.78699609, "alt": "0" },
+    { "id": "NG69", "lng": 106.0181522, "lat": 37.78953973, "alt": "0" },
+    { "id": "NG70", "lng": 106.0233235, "lat": 37.78926841, "alt": "0" },
+    { "id": "NG71", "lng": 106.0174012, "lat": 37.79462674, "alt": "0" },
+    { "id": "NG72", "lng": 106.0204268, "lat": 37.79761095, "alt": "0" },
+    { "id": "NG73", "lng": 106.0157919, "lat": 37.79835699, "alt": "0" },
+    { "id": "NG74", "lng": 106.012187, "lat": 37.80125628, "alt": "0" },
+    { "id": "NG75", "lng": 106.0118651, "lat": 37.8059017, "alt": "0" },
+    { "id": "NG76", "lng": 106.0058784, "lat": 37.80495229, "alt": "0" },
+    { "id": "NG77", "lng": 106.0062003, "lat": 37.80849554, "alt": "0" },
+    { "id": "NG78", "lng": 106.0110068, "lat": 37.81085196, "alt": "0" },
+    { "id": "NG79", "lng": 106.0220146, "lat": 37.81429322, "alt": "0" },
+    { "id": "NG80", "lng": 106.0223794, "lat": 37.72958837, "alt": "0" },
+    { "id": "NG81", "lng": 106.0263276, "lat": 37.72707662, "alt": "0" },
+    { "id": "NG82", "lng": 106.0267997, "lat": 37.72327488, "alt": "0" },
+    { "id": "NG83", "lng": 106.0307479, "lat": 37.72181523, "alt": "0" },
+    { "id": "NG84", "lng": 106.0274005, "lat": 37.71957479, "alt": "0" },
+    { "id": "NG85", "lng": 106.0365844, "lat": 37.70429721, "alt": "0" },
+    { "id": "NG86", "lng": 106.0376787, "lat": 37.70039244, "alt": "0" },
+    { "id": "NG87", "lng": 106.041348, "lat": 37.69660631, "alt": "0" },
+    { "id": "NG88", "lng": 106.0426569, "lat": 37.69073148, "alt": "0" },
+    { "id": "NG89", "lng": 106.0451245, "lat": 37.69414437, "alt": "0" },
+    { "id": "NG90", "lng": 106.0334516, "lat": 37.72498908, "alt": "0" },
+    { "id": "NG91", "lng": 106.0363698, "lat": 37.72206982, "alt": "0" },
+    { "id": "NG92", "lng": 106.0370135, "lat": 37.71814901, "alt": "0" },
+    { "id": "NG93", "lng": 106.0389447, "lat": 37.71443169, "alt": "0" },
+    { "id": "NG94", "lng": 106.0484719, "lat": 37.71127436, "alt": "0" },
+    { "id": "NG95", "lng": 106.0272288, "lat": 37.73099696, "alt": "0" },
+    { "id": "NG96", "lng": 106.0308337, "lat": 37.72807794, "alt": "0" },
+    { "id": "NG97", "lng": 106.0375071, "lat": 37.72670324, "alt": "0" },
+    { "id": "NG98", "lng": 106.0407472, "lat": 37.7234446, "alt": "0" },
+    { "id": "NG99", "lng": 106.0439014, "lat": 37.71889585, "alt": "0" }
+    ]
+},
+{
+    "id": "QS_FDC", "name": "青山", "lng": 107.217636108398, "lat": 37.5534917819943, "wts":
+    [
+    { "id": "QG01", "lng": 107.217636108398, "lat": 37.5534917819943, "alt": "1620" },
+    { "id": "QG02", "lng": 107.231798171997, "lat": 37.5528113263644, "alt": "1631" },
+    { "id": "QG03", "lng": 107.236969470978, "lat": 37.5531430492601, "alt": "1620" },
+    { "id": "QG04", "lng": 107.230060100555, "lat": 37.5577912673456, "alt": "1638" },
+    { "id": "QG05", "lng": 107.224591076374, "lat": 37.5590223799266, "alt": "1629" },
+    { "id": "QG06", "lng": 107.224127054214, "lat": 37.5460702271695, "alt": "1643" },
+    { "id": "QG07", "lng": 107.232570648193, "lat": 37.540800261985, "alt": "1653" },
+    { "id": "QG08", "lng": 107.232785224915, "lat": 37.5394391127873, "alt": "1654" },
+    { "id": "QG09", "lng": 107.235864400864, "lat": 37.5409959251395, "alt": "1621" },
+    { "id": "QG10", "lng": 107.235864400864, "lat": 37.533288110023, "alt": "1659" },
+    { "id": "QG11", "lng": 107.233192920685, "lat": 37.5303868385901, "alt": "1655" },
+    { "id": "QG12", "lng": 107.209181785583, "lat": 37.5484073523692, "alt": "1624" },
+    { "id": "QG13", "lng": 107.205193340778, "lat": 37.5397134714219, "alt": "1645" },
+    { "id": "QG14", "lng": 107.208774089813, "lat": 37.5290765499824, "alt": "1654" },
+    { "id": "QG15", "lng": 107.215468883514, "lat": 37.5266601132254, "alt": "1661" },
+    { "id": "QG16", "lng": 107.219025492668, "lat": 37.5420125145689, "alt": "1653" },
+    { "id": "QG17", "lng": 107.218194007874, "lat": 37.5337560464588, "alt": "1650" },
+    { "id": "QG18", "lng": 107.223858833313, "lat": 37.5354405933172, "alt": "1665" },
+    { "id": "QG19", "lng": 107.227699756622, "lat": 37.5289404147812, "alt": "1659" },
+    { "id": "QG20", "lng": 107.237141132355, "lat": 37.5237415658803, "alt": "1600" },
+    { "id": "QG21", "lng": 107.225081920624, "lat": 37.5251795816112, "alt": "1660" },
+    { "id": "QG22", "lng": 107.21836566925, "lat": 37.5229502199563, "alt": "1658" },
+    { "id": "QG23", "lng": 107.201065421104, "lat": 37.5422209349572, "alt": "1625" },
+    { "id": "QG24", "lng": 107.201489210129, "lat": 37.5326159780052, "alt": "1648" },
+    { "id": "QG25", "lng": 107.205587625504, "lat": 37.5232650575122, "alt": "1664" },
+    { "id": "QG26", "lng": 107.211112976074, "lat": 37.5201932073065, "alt": "1664" },
+    { "id": "QG27", "lng": 107.209621667862, "lat": 37.5160574973166, "alt": "1674" },
+    { "id": "QG28", "lng": 107.205834388733, "lat": 37.5123811182352, "alt": "1663" },
+    { "id": "QG29", "lng": 107.203409671783, "lat": 37.5168574261816, "alt": "1670" },
+    { "id": "QG30", "lng": 107.198731899261, "lat": 37.5207207916834, "alt": "1659" },
+    { "id": "QG31", "lng": 107.199257612228, "lat": 37.508976902057, "alt": "1675" },
+    { "id": "QG32", "lng": 107.203677892685, "lat": 37.5070449403205, "alt": "1675" },
+    { "id": "QG33", "lng": 107.207164764404, "lat": 37.5046958798405, "alt": "1664" },
+    { "id": "QG34", "lng": 107.191742062569, "lat": 37.5510399861667, "alt": "1668" },
+    { "id": "QG35", "lng": 107.197715342045, "lat": 37.5495386732784, "alt": "1654" },
+    { "id": "QG36", "lng": 107.186712920666, "lat": 37.542729223053, "alt": "1623" },
+    { "id": "QG37", "lng": 107.19198346138, "lat": 37.5386734554438, "alt": "1667" },
+    { "id": "QG38", "lng": 107.18975186348, "lat": 37.5317992018309, "alt": "1670" },
+    { "id": "QG39", "lng": 107.194333076477, "lat": 37.5262006410413, "alt": "1659" },
+    { "id": "QG40", "lng": 107.190524339676, "lat": 37.5248307164361, "alt": "1650" },
+    { "id": "QG41", "lng": 107.193850278854, "lat": 37.5174190732396, "alt": "1647" },
+    { "id": "QG42", "lng": 107.194257974625, "lat": 37.5101939271718, "alt": "1643" },
+    { "id": "QG43", "lng": 107.192884683609, "lat": 37.5060406408998, "alt": "1677" },
+    { "id": "QG44", "lng": 107.187992334366, "lat": 37.5092492450648, "alt": "1655" },
+    { "id": "QG45", "lng": 107.163863182068, "lat": 37.5293998700896, "alt": "1665" },
+    { "id": "QG46", "lng": 107.164839506149, "lat": 37.5234862939188, "alt": "1633" },
+    { "id": "QG47", "lng": 107.169742584229, "lat": 37.5172829167653, "alt": "1643" },
+    { "id": "QG48", "lng": 107.176394462585, "lat": 37.520057055894, "alt": "1634" },
+    { "id": "QG49", "lng": 107.171856164932, "lat": 37.514849077877, "alt": "1658" },
+    { "id": "QG50", "lng": 107.168154716492, "lat": 37.5123811182352, "alt": "1660" },
+    { "id": "QG51", "lng": 107.17866897583, "lat": 37.5083981698663, "alt": "1677" },
+    { "id": "QG52", "lng": 107.175278663635, "lat": 37.5056065751042, "alt": "1670" },
+    { "id": "QG53", "lng": 107.179956436157, "lat": 37.5064917262093, "alt": "1644" },
+    { "id": "QG54", "lng": 107.182434797287, "lat": 37.5108066875511, "alt": "1656" },
+    { "id": "QG55", "lng": 107.185535430908, "lat": 37.5054533748091, "alt": "1658" },
+    { "id": "QG56", "lng": 107.195867300034, "lat": 37.5567855247009, "alt": "1659" },
+    { "id": "QG57", "lng": 107.187415659428, "lat": 37.5552779484629, "alt": "1634" },
+    { "id": "QG58", "lng": 107.187415659428, "lat": 37.5552779484629, "alt": "1644" },
+    { "id": "QG59", "lng": 107.17248916626, "lat": 37.5599366645357, "alt": "1645" },
+    { "id": "QG60", "lng": 107.168728709221, "lat": 37.5571682613454, "alt": "1667" },
+    { "id": "QG61", "lng": 107.16448277235, "lat": 37.5539532124332, "alt": "1662" },
+    { "id": "QG62", "lng": 107.165713906288, "lat": 37.5494004489002, "alt": "1641" },
+    { "id": "QG63", "lng": 107.171477973461, "lat": 37.5439818513075, "alt": "1646" },
+    { "id": "QG64", "lng": 107.177338600159, "lat": 37.5468443149692, "alt": "1638" },
+    { "id": "QG65", "lng": 107.165193557739, "lat": 37.5421656398089, "alt": "1635" },
+    { "id": "QG66", "lng": 107.168530225754, "lat": 37.5352193923647, "alt": "1640" }
+    ]
+},
+{
+	"id": "SBQ_FDC", "name": "石板泉", "lng": 106.4515667, "lat": 37.60171667, "wts":
+	[
+	{ "id": "SG01", "lng": 106.4515667, "lat": 37.60171667, "alt": "0" },
+    { "id": "SG02", "lng": 106.4368167, "lat": 37.6033, "alt": "0" },
+    { "id": "SG03", "lng": 106.4341333, "lat": 37.60171667, "alt": "0" },
+    { "id": "SG04", "lng": 106.4250833, "lat": 37.60041667, "alt": "0" },
+    { "id": "SG05", "lng": 106.4375, "lat": 37.5879, "alt": "0" },
+    { "id": "SG06", "lng": 106.4398167, "lat": 37.5854, "alt": "0" },
+    { "id": "SG07", "lng": 106.4510667, "lat": 37.57506667, "alt": "0" },
+    { "id": "SG08", "lng": 106.4539333, "lat": 37.57455, "alt": "0" },
+    { "id": "SG09", "lng": 106.4591, "lat": 37.57405, "alt": "0" },
+    { "id": "SG10", "lng": 106.4753, "lat": 37.57543333, "alt": "0" },
+    { "id": "SG11", "lng": 106.48525, "lat": 37.57398333, "alt": "0" },
+    { "id": "SG12", "lng": 106.4558833, "lat": 37.59241667, "alt": "0" },
+    { "id": "SG13", "lng": 106.4520667, "lat": 37.59083333, "alt": "0" },
+    { "id": "SG14", "lng": 106.4503333, "lat": 37.5869, "alt": "0" },
+    { "id": "SG15", "lng": 106.4539, "lat": 37.58436667, "alt": "0" },
+    { "id": "SG16", "lng": 106.4588333, "lat": 37.58393333, "alt": "0" },
+    { "id": "SG17", "lng": 106.4689667, "lat": 37.58508333, "alt": "0" },
+    { "id": "SG18", "lng": 106.4557667, "lat": 37.58851667, "alt": "0" },
+    { "id": "SG19", "lng": 106.4691, "lat": 37.58788333, "alt": "0" },
+    { "id": "SG20", "lng": 106.4727167, "lat": 37.5859, "alt": "0" },
+    { "id": "SG21", "lng": 106.4853833, "lat": 37.58373333, "alt": "0" },
+    { "id": "SG22", "lng": 106.501, "lat": 37.57553333, "alt": "0" },
+    { "id": "SG23", "lng": 106.4698833, "lat": 37.6003, "alt": "0" },
+    { "id": "SG24", "lng": 106.4722333, "lat": 37.59011667, "alt": "0" },
+    { "id": "SG25", "lng": 106.4838333, "lat": 37.59091667, "alt": "0" },
+    { "id": "SG26", "lng": 106.4861333, "lat": 37.58858333, "alt": "0" },
+    { "id": "SG27", "lng": 106.4880333, "lat": 37.58626667, "alt": "0" },
+    { "id": "SG28", "lng": 106.4897833, "lat": 37.58736667, "alt": "0" },
+    { "id": "SG29", "lng": 106.5011667, "lat": 37.58518333, "alt": "0" },
+    { "id": "SG30", "lng": 106.5076667, "lat": 37.58378333, "alt": "0" },
+    { "id": "SG31", "lng": 106.5184167, "lat": 37.5862, "alt": "0" },
+    { "id": "SG32", "lng": 106.5253667, "lat": 37.58713333, "alt": "0" },
+    { "id": "SG33", "lng": 106.5342833, "lat": 37.58786667, "alt": "0" },
+    { "id": "SG34", "lng": 106.4565333, "lat": 37.63861667, "alt": "0" },
+    { "id": "SG35", "lng": 106.4537167, "lat": 37.63945, "alt": "0" },
+    { "id": "SG36", "lng": 106.4505667, "lat": 37.64101667, "alt": "0" },
+    { "id": "SG37", "lng": 106.4369333, "lat": 37.64116667, "alt": "0" },
+    { "id": "SG38", "lng": 106.43425, "lat": 37.65011667, "alt": "0" },
+    { "id": "SG39", "lng": 106.43735, "lat": 37.654, "alt": "0" },
+    { "id": "SG40", "lng": 106.4381333, "lat": 37.65733333, "alt": "0" },
+    { "id": "SG41", "lng": 106.4344, "lat": 37.65973333, "alt": "0" },
+    { "id": "SG42", "lng": 106.4393167, "lat": 37.66668333, "alt": "0" },
+    { "id": "SG43", "lng": 106.4433167, "lat": 37.667, "alt": "0" },
+    { "id": "SG44", "lng": 106.45585, "lat": 37.65986667, "alt": "0" },
+    { "id": "SG45", "lng": 106.4680167, "lat": 37.63951667, "alt": "0" },
+    { "id": "SG46", "lng": 106.4685, "lat": 37.65056667, "alt": "0" },
+    { "id": "SG47", "lng": 106.4562167, "lat": 37.6501, "alt": "0" },
+    { "id": "SG48", "lng": 106.43795, "lat": 37.65021667, "alt": "0" },
+    { "id": "SG49", "lng": 106.4415833, "lat": 37.65116667, "alt": "0" },
+    { "id": "SG50", "lng": 106.4413667, "lat": 37.65436667, "alt": "0" },
+    { "id": "SG51", "lng": 106.4417667, "lat": 37.65761667, "alt": "0" },
+    { "id": "SG52", "lng": 106.4568333, "lat": 37.65378333, "alt": "0" },
+    { "id": "SG53", "lng": 106.47095, "lat": 37.65178333, "alt": "0" },
+    { "id": "SG54", "lng": 106.4699833, "lat": 37.65555, "alt": "0" },
+    { "id": "SG55", "lng": 106.4736333, "lat": 37.66703333, "alt": "0" },
+    { "id": "SG56", "lng": 106.4756167, "lat": 37.63865, "alt": "0" },
+    { "id": "SG57", "lng": 106.4847167, "lat": 37.64136667, "alt": "0" },
+    { "id": "SG58", "lng": 106.4739833, "lat": 37.64246667, "alt": "0" },
+    { "id": "SG59", "lng": 106.4729333, "lat": 37.65466667, "alt": "0" },
+    { "id": "SG60", "lng": 106.4751667, "lat": 37.6567, "alt": "0" },
+    { "id": "SG61", "lng": 106.48745, "lat": 37.65055, "alt": "0" },
+    { "id": "SG62", "lng": 106.4874333, "lat": 37.65305, "alt": "0" },
+    { "id": "SG63", "lng": 106.4893333, "lat": 37.65453333, "alt": "0" },
+    { "id": "SG64", "lng": 106.48695, "lat": 37.65755, "alt": "0" },
+    { "id": "SG65", "lng": 106.4923667, "lat": 37.64303333, "alt": "0" },
+    { "id": "SG66", "lng": 106.4925333, "lat": 37.6522, "alt": "0" },
+    { "id": "SG67", "lng": 106.4372667, "lat": 37.60863333, "alt": "0" },
+    { "id": "SG68", "lng": 106.4358333, "lat": 37.62263333, "alt": "0" },
+    { "id": "SG69", "lng": 106.4697, "lat": 37.62076667, "alt": "0" },
+    { "id": "SG70", "lng": 106.4594167, "lat": 37.6087, "alt": "0" },
+    { "id": "SG71", "lng": 106.4585833, "lat": 37.60526667, "alt": "0" },
+    { "id": "SG72", "lng": 106.4248667, "lat": 37.617, "alt": "0" },
+    { "id": "SG73", "lng": 106.48565, "lat": 37.63513333, "alt": "0" },
+    { "id": "SG74", "lng": 106.4233833, "lat": 37.63723333, "alt": "0" },
+    { "id": "SG75", "lng": 106.4683667, "lat": 37.63515, "alt": "0" },
+    { "id": "SG76", "lng": 106.4348333, "lat": 37.61908333, "alt": "0" },
+    { "id": "SG77", "lng": 106.4395333, "lat": 37.62545, "alt": "0" },
+    { "id": "SG78", "lng": 106.4423, "lat": 37.62185, "alt": "0" },
+    { "id": "SG79", "lng": 106.4758667, "lat": 37.63501667, "alt": "0" },
+    { "id": "SG80", "lng": 106.451, "lat": 37.60971667, "alt": "0" },
+    { "id": "SG81", "lng": 106.4543167, "lat": 37.60706667, "alt": "0" },
+    { "id": "SG82", "lng": 106.4505, "lat": 37.62356667, "alt": "0" },
+    { "id": "SG83", "lng": 106.4544833, "lat": 37.61888333, "alt": "0" },
+    { "id": "SG84", "lng": 106.4586833, "lat": 37.62058333, "alt": "0" },
+    { "id": "SG85", "lng": 106.4376833, "lat": 37.63785, "alt": "0" },
+    { "id": "SG86", "lng": 106.4405167, "lat": 37.61908333, "alt": "0" },
+    { "id": "SG87", "lng": 106.4345, "lat": 37.63703333, "alt": "0" },
+    { "id": "SG88", "lng": 106.4260833, "lat": 37.62615, "alt": "0" },
+    { "id": "SG89", "lng": 106.4693667, "lat": 37.61766667, "alt": "0" },
+    { "id": "SG90", "lng": 106.4713333, "lat": 37.63703333, "alt": "0" },
+    { "id": "SG91", "lng": 106.4408833, "lat": 37.60918333, "alt": "0" },
+    { "id": "SG92", "lng": 106.53535, "lat": 37.60373333, "alt": "0" },
+    { "id": "SG93", "lng": 106.5314833, "lat": 37.60988333, "alt": "0" },
+    { "id": "SG94", "lng": 106.5277833, "lat": 37.61066667, "alt": "0" },
+    { "id": "SG95", "lng": 106.5195, "lat": 37.6084, "alt": "0" },
+    { "id": "SG96", "lng": 106.5133333, "lat": 37.60538333, "alt": "0" },
+    { "id": "SG97", "lng": 106.5099333, "lat": 37.62868333, "alt": "0" },
+    { "id": "SG98", "lng": 106.5286667, "lat": 37.62028333, "alt": "0" },
+    { "id": "SG99", "lng": 106.5236833, "lat": 37.77213333, "alt": "0" },
+    { "id": "SG100", "lng": 106.2033167, "lat": 37.62301667, "alt": "0" },
+    { "id": "SG101", "lng": 106.5059833, "lat": 37.61241667, "alt": "0" },
+    { "id": "SG102", "lng": 106.5030833, "lat": 37.61541667, "alt": "0" },
+    { "id": "SG103", "lng": 106.4942667, "lat": 37.61318333, "alt": "0" },
+    { "id": "SG104", "lng": 106.4932667, "lat": 37.61023333, "alt": "0" },
+    { "id": "SG105", "lng": 106.4872, "lat": 37.61611667, "alt": "0" },
+    { "id": "SG106", "lng": 106.4764833, "lat": 37.61796667, "alt": "0" },
+    { "id": "SG107", "lng": 106.4820833, "lat": 37.61956667, "alt": "0" },
+    { "id": "SG108", "lng": 106.485, "lat": 37.62698333, "alt": "0" },
+    { "id": "SG109", "lng": 106.4895333, "lat": 37.63096667, "alt": "0" },
+    { "id": "SG110", "lng": 106.4963, "lat": 37.6317, "alt": "0" },
+    { "id": "SG111", "lng": 106.5025167, "lat": 37.62693333, "alt": "0" },
+    { "id": "SG112", "lng": 106.5047, "lat": 37.63411667, "alt": "0" },
+    { "id": "SG113", "lng": 106.5142, "lat": 37.63583333, "alt": "0" },
+    { "id": "SG114", "lng": 106.5098667, "lat": 37.64313333, "alt": "0" },
+    { "id": "SG115", "lng": 106.50405, "lat": 37.64968333, "alt": "0" },
+    { "id": "SG116", "lng": 106.4992333, "lat": 37.6394, "alt": "0" }
+	]
+},
+{
+	"id": "XS_FDC", "name": "香山", "lng": 105.2128029, "lat": 37.1699607, "wts":
+	[
+	    { "id": "XG01", "lng": 105.2139616, "lat": 37.17630397, "alt": "0" },
+    { "id": "XG02", "lng": 105.2186394, "lat": 37.17746656, "alt": "0" },
+    { "id": "XG03", "lng": 105.2209997, "lat": 37.18197998, "alt": "0" },
+    { "id": "XG04", "lng": 105.2246046, "lat": 37.18398015, "alt": "0" },
+    { "id": "XG05", "lng": 105.2170515, "lat": 37.16939645, "alt": "0" },
+    { "id": "XG06", "lng": 105.2227592, "lat": 37.17149955, "alt": "0" },
+    { "id": "XG07", "lng": 105.2188325, "lat": 37.17346581, "alt": "0" },
+    { "id": "XG08", "lng": 105.2284241, "lat": 37.17165343, "alt": "0" },
+    { "id": "XG09", "lng": 105.2288532, "lat": 37.17532943, "alt": "0" },
+    { "id": "XG10", "lng": 105.2307415, "lat": 37.17856075, "alt": "0" },
+    { "id": "XG11", "lng": 105.2354193, "lat": 37.18136453, "alt": "0" },
+    { "id": "XG12", "lng": 105.2213216, "lat": 37.16744719, "alt": "0" },
+    { "id": "XG13", "lng": 105.2199697, "lat": 37.1630697, "alt": "0" },
+    { "id": "XG14", "lng": 105.2188754, "lat": 37.15821314, "alt": "0" },
+    { "id": "XG15", "lng": 105.2351832, "lat": 37.16212919, "alt": "0" },
+    { "id": "XG16", "lng": 105.2419209, "lat": 37.16488228, "alt": "0" },
+    { "id": "XG17", "lng": 105.2455902, "lat": 37.16595955, "alt": "0" },
+    { "id": "XG18", "lng": 105.2475214, "lat": 37.16895189, "alt": "0" },
+    { "id": "XG19", "lng": 105.2521992, "lat": 37.16784046, "alt": "0" },
+    { "id": "XG20", "lng": 105.2424788, "lat": 37.16185559, "alt": "0" },
+    { "id": "XG21", "lng": 105.2399254, "lat": 37.15814473, "alt": "0" },
+    { "id": "XG22", "lng": 105.2384663, "lat": 37.15386932, "alt": "0" },
+    { "id": "XG23", "lng": 105.2489376, "lat": 37.16094927, "alt": "0" },
+    { "id": "XG24", "lng": 105.2476501, "lat": 37.15793952, "alt": "0" },
+    { "id": "XG25", "lng": 105.2444744, "lat": 37.15532299, "alt": "0" },
+    { "id": "XG26", "lng": 105.2115583, "lat": 37.17213218, "alt": "0" },
+    { "id": "XG27", "lng": 105.2099276, "lat": 37.17526105, "alt": "0" },
+    { "id": "XG28", "lng": 105.2087474, "lat": 37.18179192, "alt": "0" },
+    { "id": "XG29", "lng": 105.2079105, "lat": 37.18509134, "alt": "0" },
+    { "id": "XG30", "lng": 105.2108502, "lat": 37.18861284, "alt": "0" },
+    { "id": "XG31", "lng": 105.1989198, "lat": 37.1755517, "alt": "0" },
+    { "id": "XG32", "lng": 105.1991987, "lat": 37.18280057, "alt": "0" },
+    { "id": "XG33", "lng": 105.198791, "lat": 37.18815129, "alt": "0" },
+    { "id": "XG34", "lng": 105.1958299, "lat": 37.1801849, "alt": "0" },
+    { "id": "XG35", "lng": 105.1887488, "lat": 37.18856156, "alt": "0" },
+    { "id": "XG36", "lng": 105.1947355, "lat": 37.17633817, "alt": "0" },
+    { "id": "XG37", "lng": 105.1866031, "lat": 37.17977459, "alt": "0" },
+    { "id": "XG38", "lng": 105.1873326, "lat": 37.1755688, "alt": "0" },
+    { "id": "XG39", "lng": 105.1796722, "lat": 37.17688527, "alt": "0" },
+    { "id": "XG40", "lng": 105.1824403, "lat": 37.18757008, "alt": "0" },
+    { "id": "XG41", "lng": 105.1773977, "lat": 37.18500586, "alt": "0" },
+    { "id": "XG42", "lng": 105.1714969, "lat": 37.18526229, "alt": "0" },
+    { "id": "XG43", "lng": 105.2116871, "lat": 37.16691711, "alt": "0" },
+    { "id": "XG44", "lng": 105.2104855, "lat": 37.1634288, "alt": "0" },
+    { "id": "XG45", "lng": 105.207417, "lat": 37.16799435, "alt": "0" },
+    { "id": "XG46", "lng": 105.201602, "lat": 37.16690001, "alt": "0" },
+    { "id": "XG47", "lng": 105.2053785, "lat": 37.15397194, "alt": "0" },
+    { "id": "XG48", "lng": 105.2037477, "lat": 37.15821314, "alt": "0" },
+    { "id": "XG49", "lng": 105.1997781, "lat": 37.15963252, "alt": "0" },
+    { "id": "XG50", "lng": 105.1993275, "lat": 37.15679373, "alt": "0" },
+    { "id": "XG51", "lng": 105.194757, "lat": 37.15879457, "alt": "0" },
+    { "id": "XG52", "lng": 105.1912808, "lat": 37.16060726, "alt": "0" },
+    { "id": "XG53", "lng": 105.1859164, "lat": 37.15607546, "alt": "0" },
+    { "id": "XG54", "lng": 105.1862597, "lat": 37.15226171, "alt": "0" },
+    { "id": "XG55", "lng": 105.1868176, "lat": 37.1622147, "alt": "0" },
+    { "id": "XG56", "lng": 105.1817322, "lat": 37.16525848, "alt": "0" },
+    { "id": "XG57", "lng": 105.1725054, "lat": 37.16621604, "alt": "0" },
+    { "id": "XG58", "lng": 105.1694369, "lat": 37.1642838, "alt": "0" }
+	]
+},
+{
+	"id": "MHS_FDC", "name": "麻黄山", "lng": 107.0644069, "lat": 37.30000218, "wts":
+	[
+	{ "id": "MG01", "lng": 107.0644069, "lat": 37.30000218, "alt": "1912" },
+    { "id": "MG02", "lng": 107.0609736, "lat": 37.29027221, "alt": "1945" },
+    { "id": "MG03", "lng": 107.0545363, "lat": 37.29431798, "alt": "1948" },
+    { "id": "MG04", "lng": 107.0488715, "lat": 37.29385708, "alt": "1939" },
+    { "id": "MG05", "lng": 107.04561, "lat": 37.29752713, "alt": "1938" },
+    { "id": "MG06", "lng": 107.0409322, "lat": 37.30025821, "alt": "1918" },
+    { "id": "MG07", "lng": 107.0374346, "lat": 37.30382554, "alt": "1902" },
+    { "id": "MG08", "lng": 107.0325208, "lat": 37.30630038, "alt": "1867" },
+    { "id": "MG09", "lng": 107.0349455, "lat": 37.30909941, "alt": "1871" },
+    { "id": "MG10", "lng": 107.0286155, "lat": 37.30956022, "alt": "1833" },
+    { "id": "MG11", "lng": 107.0238519, "lat": 37.31106208, "alt": "1800" },
+    { "id": "MG12", "lng": 107.0649004, "lat": 37.30542993, "alt": "1937" },
+    { "id": "MG13", "lng": 107.0527768, "lat": 37.30129941, "alt": "1929" },
+    { "id": "MG14", "lng": 107.048614, "lat": 37.30432051, "alt": "1920" },
+    { "id": "MG15", "lng": 107.0456958, "lat": 37.30819486, "alt": "1897" },
+    { "id": "MG16", "lng": 107.0414472, "lat": 37.31130101, "alt": "1869" },
+    { "id": "MG17", "lng": 107.0348811, "lat": 37.31508967, "alt": "1827" },
+    { "id": "MG18", "lng": 107.0305467, "lat": 37.31749588, "alt": "1797" },
+    { "id": "MG19", "lng": 107.0199444, "lat": 37.31830556, "alt": "1767" },
+    { "id": "MG20", "lng": 107.0611238, "lat": 37.30860447, "alt": "1931" },
+    { "id": "MG21", "lng": 107.0571327, "lat": 37.31169354, "alt": "1919" },
+    { "id": "MG22", "lng": 107.0521975, "lat": 37.31369028, "alt": "1896" },
+    { "id": "MG23", "lng": 107.0693851, "lat": 37.30322815, "alt": "1921" },
+    { "id": "MG24", "lng": 107.0744705, "lat": 37.30041183, "alt": "1905" },
+    { "id": "MG25", "lng": 107.0696425, "lat": 37.29628104, "alt": "1906" },
+    { "id": "MG26", "lng": 107.0717883, "lat": 37.29213295, "alt": "1903" },
+    { "id": "MG27", "lng": 107.0662093, "lat": 37.28824071, "alt": "1927" },
+    { "id": "MG28", "lng": 107.0567894, "lat": 37.31587468, "alt": "1905" },
+    { "id": "MG29", "lng": 107.0560169, "lat": 37.31988494, "alt": "1881" },
+    { "id": "MG30", "lng": 107.0506954, "lat": 37.32184734, "alt": "1860" },
+    { "id": "MG31", "lng": 107.0727539, "lat": 37.31087435, "alt": "1904" },
+    { "id": "MG32", "lng": 107.0761871, "lat": 37.3067612, "alt": "1906" },
+    { "id": "MG33", "lng": 107.0820665, "lat": 37.30641985, "alt": "1897" },
+    { "id": "MG34", "lng": 107.0360184, "lat": 37.32406563, "alt": "0" },
+    { "id": "MG35", "lng": 107.0318985, "lat": 37.32969639, "alt": "0" },
+    { "id": "MG36", "lng": 107.0269525, "lat": 37.33528407, "alt": "0" },
+    { "id": "MG37", "lng": 107.0515966, "lat": 37.32539657, "alt": "0" },
+    { "id": "MG38", "lng": 107.0396662, "lat": 37.33669159, "alt": "0" },
+    { "id": "MG39", "lng": 107.0315766, "lat": 37.34420644, "alt": "0" },
+    { "id": "MG40", "lng": 107.0183909, "lat": 37.34223611, "alt": "0" },
+    { "id": "MG41", "lng": 107.0164329, "lat": 37.33144098, "alt": "0" },
+    { "id": "MG42", "lng": 107.0044997, "lat": 37.32873236, "alt": "0" },
+    { "id": "MG43", "lng": 107.0019168, "lat": 37.33337322, "alt": "0" }
+	]
+}
+];
+export default wtTree;

src/App.vue

@@ -1,32 +1,18 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
     <router-view/>
   </div>
 </template>
 
 <style lang="scss">
+html,
+body,
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  color: #000;
+  overflow: hidden;
 }
 </style>

src/element-variables.scss

@@ -0,0 +1,11 @@
+/*
+Write your variables here. All available variables can be
+found in element-ui/packages/theme-chalk/src/common/var.scss.
+For example, to overwrite the theme color:
+*/
+$--color-primary: teal;
+
+/* icon font path, required */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";

src/main.js

@@ -1,6 +1,13 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import './plugins/element.js'
+
+
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
+
 
 Vue.config.productionTip = false
 

src/plugins/element.js

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import Element from 'element-ui'
+import '../element-variables.scss'
+
+Vue.use(Element)

src/router/index.js

@@ -1,29 +1,41 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
 
 Vue.use(VueRouter)
 
-  const routes = [
+const routes = [
   {
-    path: '/',
-    name: 'Home',
-    component: Home
+    path: '/scene',
+    name: 'scene',
+    component: () => import('../views/CesiumScene.vue')
+  },
+  {
+    path: '/WT',
+    name: 'WT',
+    component: () => import('../views/WT.vue')
+  },
+  {
+    path: '/station',
+    name: 'station',
+    component: () => import('../views/station.vue')
   },
   {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    path: '/cesiumtest',
+    name: 'cesiumtest',
+    component: () => import('../views/cesiumtest.vue')
+  },
+  {
+    path: '/',
+    name: 'monitor',
+    component: () => import('../views/monitor.vue')
   }
+
 ]
 
 const router = new VueRouter({
-  mode: 'history',
+  // mode: 'history',
   base: process.env.BASE_URL,
   routes
 })
 
-export default router
+export default router

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/CesiumScene.vue

@@ -0,0 +1,119 @@
+
+<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>
+

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
-</script>

src/views/WT.vue

@@ -0,0 +1,649 @@
+<template>
+  <div id="app">
+    <div id="container"></div>
+    <div class="main main_left">
+      <div class="title disflex bgcolor">麻黄山01号风机</div>
+      <div class="time disflex bgcolor">
+        <div class="time_t">{{timeHms}}</div>
+        <div class="time_b">
+          <div class="tie_b_y">{{timeYMd}}</div>
+          <div class="tie_b_w">星期一</div>
+        </div>
+      </div>
+      <div class="environment disflex bgcolor">
+        <div class="weather" v-for="(item,index) in environment" :key="index">
+          <i class="el-icon-heavy-rain"></i>
+          <div class="weather_l">
+            <div class="weather_l_t">{{item.text}}</div>
+            <div class="weather_l_b">{{item.val}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="capacity disflex bgcolor">
+        <div class="capacity_bar" v-for="(item,index) in capacity" :key="index">
+          <div class="capacity_l_l">{{item.text}}</div>
+          <div class="capacity_l_r">{{item.val}}</div>
+          {{item.unit}}
+        </div>
+      </div>
+    </div>
+    <div class="main main_right"></div>
+    <div class="main main_bootom">
+      <div class="state disflex bgcolor">
+        <div class="state_bar" v-for="(item,index) in state" :key="index">
+          <div class="state_bar_t">{{item.text}}</div>
+          <div class="state_bar_b">{{item.val}}</div>
+        </div>
+      </div>
+      <div class="category disflex bgcolor">
+        <div id="categoryEcharts"></div>
+      </div>
+      <div class="warn disflex bgcolor">
+        <div id="warnEcharts"></div>
+      </div>
+      <div class="maintain disflex bgcolor">
+        <el-table
+          :data="maintainData"
+          style="width: 100%"
+          :row-style="getRowClass"
+          :cell-style="getRowClass"
+          :header-row-style="getRowClass"
+          :header-cell-style="getRowClass"
+        >
+          <el-table-column prop="date" label="时间" width="100"></el-table-column>
+          <el-table-column prop="type" label="类型" width="100"></el-table-column>
+          <el-table-column prop="parts" label="部件" width></el-table-column>
+        </el-table>
+      </div>
+      <div class="property disflex bgcolor">
+        <div id="propertyEcharts"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import { MTLLoader, OBJLoader } from "three-obj-mtl-loader";
+var ColladaLoader = require("three-collada-loader");
+export default {
+  name: "App",
+  data() {
+    return {
+      timeYMd: this.dateFormat("yyyy-MM-dd", new Date()),
+      timeHms: this.dateFormat("HH:mm:ss", new Date()),
+      environment: [
+        {
+          text: "天气",
+          val: "大雨",
+        },
+        {
+          text: "温度",
+          val: "28℃",
+        },
+        {
+          text: "相对湿度",
+          val: "60%",
+        },
+        {
+          text: "风力",
+          val: "4-5级西北风",
+        },
+        {
+          text: "空气密度",
+          val: "120",
+        },
+      ],
+      capacity: [
+        {
+          text: "月MTBF",
+          val: 286.5,
+          unit: "MW",
+        },
+        {
+          text: "月设备可利用率",
+          val: "90%",
+          unit: "",
+        },
+      ],
+      state: [
+        {
+          text: "机舱",
+          val: "xxx",
+        },
+        {
+          text: "传动链",
+          val: "xxx",
+        },
+        {
+          text: "测风系统",
+          val: "xxx",
+        },
+        {
+          text: "齿轮箱",
+          val: "xxx",
+        },
+        {
+          text: "发电机",
+          val: "xxx",
+        },
+        {
+          text: "变桨系统",
+          val: "xxx",
+        },
+        {
+          text: "液压系统",
+          val: "xxx",
+        },
+
+        {
+          text: "偏航系统",
+          val: "xxx",
+        },
+        {
+          text: "塔底柜",
+          val: "xxx",
+        },
+        {
+          text: "其他",
+          val: "xxx",
+        },
+      ],
+      maintainData: [
+        {
+          date: "2020/9/4",
+          type: "1",
+          parts: "发电机",
+        },
+        {
+          date: "2020/9/4",
+          type: "1",
+          parts: "发电机",
+        },
+        {
+          date: "2020/9/4",
+          type: "1",
+          parts: "发电机",
+        },
+      ],
+      /**场景 */
+      scene: null,
+      /**相机 */
+      camera: null,
+      /**渲染 */
+      renderer: null,
+      /**控制器 */
+      controls: null,
+      /**射线投射器 */
+      raycaster: null,
+      /**鼠标 */
+      mouse: null,
+      /**屋顶 */
+      roof: null,
+      /**组 */
+      group: null,
+      requestId: null,
+      /**渲染文字 */
+      CSSRender: null,
+      /**容器 */
+      container: null,
+      publicPath: process.env.BASE_URL,
+    };
+  },
+  methods: {
+    getRowClass({ row, column, rowIndex, columnIndex }) {
+      return "background-color: transparent;;;color:#fff;";
+    },
+    /**初始化 */
+
+    initScene() {
+      this.scene = new THREE.Scene();
+      const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
+      this.scene.add(ambientLight);
+      var axisHelper = new THREE.AxisHelper(15);
+      this.scene.add(axisHelper);
+    },
+    initCamera() {
+      const aspect = window.innerWidth / 1080; //宽高可根据实际项目要求更改 如果是窗口高度改为innerHeight
+      this.camera = new THREE.PerspectiveCamera(45, aspect, 1, 2000);
+      this.camera.position.set(15, 25, 20);
+      this.camera.lookAt(new THREE.Vector3(0, 0, 0)); // 让相机指向原点
+      const pointLight = new THREE.PointLight(0xffffff, 0.8);
+      this.camera.add(pointLight);
+      this.scene.add(this.camera);
+    },
+    initRender() {
+      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+      this.renderer.setPixelRatio(window.devicePixelRatio);
+      this.renderer.setSize(window.innerWidth, 1080); //宽高可根据实际项目要求更改 如果是窗口高度改为innerHeight
+      // this.renderer.domElement.style.position = 'absolute';
+      // this.renderer.domElement.style.top = 0;
+      this.container = document.getElementById("container");
+      this.container.appendChild(this.renderer.domElement);
+    },
+    animate() {
+      this.renderer.render(this.scene, this.camera);
+      requestAnimationFrame(this.animate);
+    },
+    initControl() {
+      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+      this.controls.target = new THREE.Vector3(0, 0, 0); //控制目标的坐标（旋转时以此坐标为中心点）
+      // 视角最小距离
+      this.controls.minDistance = 12;
+      // 视角最远距离
+      this.controls.maxDistance = 100;
+      // 最大角度
+      this.controls.maxPolarAngle = Math.PI / 4;
+    },
+
+    init() {
+      this.initScene();
+      this.initRender();
+      this.initCamera();
+      this.initControl();
+    },
+    /**加载模型 */
+    loadPlant() {
+      let that = this;
+      let objLoader = new OBJLoader();
+      let mtlLoader = new MTLLoader();
+      mtlLoader.load(`${that.publicPath}static/fj.mtl`, (materials) => {
+        materials.preload();
+        objLoader.setMaterials(materials);
+        objLoader.load(`${that.publicPath}static/fj.obj`, (object) => {
+          console.log(object);
+          console.log(object.children[0].rotation.x);
+          object.position.set(-10, -19, 15);
+          object.scale.set(0.0009, 0.0009, 0.0009);
+          this.scene.add(object);
+          setInterval(
+            this.rotateAroundWorldAxis(object.children[1], "Z", "2"),
+            100
+          );
+        });
+      });
+    },
+    load3DModel() {
+      let that = this;
+      var loader = new ColladaLoader();
+      loader.load(`${that.publicPath}static/WT.DAE`, function (collada) {
+        //找到模型中需要的对象。将相机看向这个对象是为了让这个对象显示在屏幕中心
+        collada.scene.traverse(function (child) {
+          if (child instanceof THREE.SkinnedMesh) {
+            camera.lookAt(child.position);
+          }
+        });
+        //将模型的场景加入到整体的场景
+        that.scene.add(collada.scene);
+      });
+    },
+    rotateAroundWorldAxis(object, axis, radians) {
+      var rotWorldMatrix = new THREE.Matrix4();
+      rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
+      rotWorldMatrix.multiply(object.matrix); // pre-multiply
+      object.matrix = rotWorldMatrix;
+      object.rotation.setFromRotationMatrix(object.matrix);
+    },
+    dateFormat(format, v) {
+      if (v) {
+        var o = {
+          "M+": v.getMonth() + 1, //月份
+          "d+": v.getDate(), //日
+          "h+": v.getHours() % 12 == 0 ? 12 : v.getHours() % 12, //小时
+          "H+": v.getHours(), //小时
+          "m+": v.getMinutes(), //分
+          "s+": v.getSeconds(), //秒
+          "q+": Math.floor((v.getMonth() + 3) / 3), //季度
+          S: v.getMilliseconds(), //毫秒
+        };
+        var week = {
+          "0": "\u65e5",
+          "1": "\u4e00",
+          "2": "\u4e8c",
+          "3": "\u4e09",
+          "4": "\u56db",
+          "5": "\u4e94",
+          "6": "\u516d",
+        };
+        if (/(y+)/.test(format)) {
+          format = format.replace(
+            RegExp.$1,
+            (v.getFullYear() + "").substr(4 - RegExp.$1.length)
+          );
+        }
+        if (/(E+)/.test(format)) {
+          format = format.replace(
+            RegExp.$1,
+            (RegExp.$1.length > 1
+              ? RegExp.$1.length > 2
+                ? "\u661f\u671f"
+                : "\u5468"
+              : "") + week[v.getDay() + ""]
+          );
+        }
+        for (var k in o) {
+          if (new RegExp("(" + k + ")").test(format)) {
+            format = format.replace(
+              RegExp.$1,
+              RegExp.$1.length == 1
+                ? o[k]
+                : ("00" + o[k]).substr(("" + o[k]).length)
+            );
+          }
+        }
+        return format;
+      }
+    },
+    category() {
+      let myChart = this.$echarts.init(
+        document.getElementById("categoryEcharts")
+      );
+      myChart.setOption({
+        xAxis: {
+          type: "category",
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        textStyle: {
+          color: "#fff",
+        },
+        series: [
+          {
+            data: [0, 70, 82, 84, 85, 86, 88],
+            type: "line",
+            smooth: true,
+          },
+          {
+            data: [0, 67, 78, 80, 81, 83, 87],
+            type: "line",
+            smooth: true,
+          },
+        ],
+      });
+    },
+    warn() {
+      let myChart = this.$echarts.init(document.getElementById("warnEcharts"));
+      myChart.setOption({
+      
+        radar: {
+          // shape: 'circle',
+          name: {
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          indicator: [
+            { name: "报警", max: 20000 },
+            { name: "报警", max: 20000 },
+            { name: "报警", max: 20000 },
+            { name: "报警", max: 20000 },
+            { name: "报警", max: 20000 },
+            { name: "报警", max: 20000 },
+            { name: "报警", max: 20000 },
+            { name: "报警", max: 20000 },
+            { name: "报警", max: 20000 },
+            { name: "报警", max: 20000 },
+          ],
+        },
+        series: [
+          {
+            name: "预算",
+            type: "radar",
+            data: [
+              {
+                value: [
+                  4300,
+                  15000,
+                  4000,
+                  15000,
+                  5000,
+                  15900,
+                  3500,
+                  15000,
+                  3100,
+                  15000,
+                ],
+                name: "预算分配（Allocated Budget）",
+              },
+            ],
+          },
+        ],
+      });
+    },
+    property() {
+      let myChart = this.$echarts.init(
+        document.getElementById("propertyEcharts")
+      );
+      myChart.setOption({
+        radar: {
+          // shape: 'circle',
+          name: {
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          indicator: [
+            { name: "报警", max: 20000 },
+            { name: "报警", max: 20000 },
+            { name: "报警", max: 20000 },
+            { name: "报警", max: 20000 },
+            { name: "报警", max: 20000 },
+            { name: "报警", max: 20000 },
+            { name: "报警", max: 20000 },
+            { name: "报警", max: 20000 },
+            { name: "报警", max: 20000 },
+            { name: "报警", max: 20000 },
+          ],
+        },
+        series: [
+          {
+            name: "预算",
+            type: "radar",
+            data: [
+              {
+                value: [
+                  4300,
+                  15000,
+                  4000,
+                  15000,
+                  5000,
+                  15900,
+                  3500,
+                  15000,
+                  3100,
+                  15000,
+                ],
+                name: "预算分配（Allocated Budget）",
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  mounted() {
+    this.init();
+    this.animate();
+    // this.loadPlant();
+    this.load3DModel();
+    this.category();
+    this.warn();
+    this.property();
+  },
+};
+</script>
+
+<style lang="scss"  scope>
+#container {
+  height: 1080px;
+}
+.main {
+  position: absolute;
+  font-size: 14px;
+  color: #fff;
+  // background-color: #000;
+}
+.main_left {
+  width: 12%;
+  left: 10px;
+  top: 10px;
+}
+.main_right {
+  width: 8%;
+  right: 10px;
+  top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.main_bootom {
+  display: flex;
+  width: calc(99% - 10px);
+  left: 10px;
+  bottom: 0;
+}
+.disflex {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 8px 20px;
+  margin-bottom: 20px;
+  justify-content: flex-start;
+}
+.bgcolor {
+  background-color: rgba(0, 0, 0, 0.8);
+  box-sizing: border-box;
+}
+.title {
+  color: aqua;
+  font-size: 24px;
+}
+.time {
+  align-items: center;
+  .time_t {
+    width: 100%;
+    color: aqua;
+    font-size: 24px;
+  }
+  .time_b {
+    width: 100%;
+    display: flex;
+    .tie_b_y {
+      margin-right: 10px;
+    }
+  }
+}
+.environment {
+  .weather {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 10px 0;
+    i {
+      font-size: 32px;
+      align-self: center;
+    }
+    .weather_l {
+      width: 55%;
+      .weather_l_b {
+        color: aqua;
+        font-size: 18px;
+      }
+    }
+  }
+}
+.capacity {
+  font-size: 16px;
+  .capacity_bar {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .capacity_l_l {
+      flex: 1;
+    }
+    .capacity_l_r {
+      color: aqua;
+    }
+  }
+}
+.state {
+  width: 20%;
+  margin-right: 10px;
+  padding: 8px 0;
+  margin-bottom: 5px;
+  box-sizing: border-box;
+  .state_bar {
+    display: flex;
+    width: 20%;
+    flex-direction: column;
+    align-content: center;
+    margin-bottom: 0px;
+    justify-content: center;
+    align-items: center;
+    .state_bar_t {
+      margin-bottom: 0px;
+    }
+    .state_bar_b {
+      color: aqua;
+      span {
+        color: #fff;
+      }
+    }
+  }
+}
+.category {
+  width: 20%;
+  margin-right: 10px;
+  padding: 8px 0;
+  margin-bottom: 5px;
+  box-sizing: border-box;
+  #categoryEcharts {
+    width: 100%;
+    height: 100%;
+  }
+}
+.warn {
+  width: 20%;
+  margin-right: 10px;
+  padding: 8px 0;
+  margin-bottom: 5px;
+  box-sizing: border-box;
+  #warnEcharts {
+    width: 100%;
+    height: 200px;
+  }
+}
+.maintain {
+  width: 20%;
+  margin-right: 10px;
+  padding: 8px 0;
+  margin-bottom: 5px;
+}
+.property {
+  width: 20%;
+  margin-right: 10px;
+  padding: 8px 0;
+  margin-bottom: 5px;
+  box-sizing: border-box;
+  #propertyEcharts {
+    width: 100%;
+    height: 200px;
+  }
+}
+</style>
+<style  lang="scss" >
+.el-table,
+.el-table__expanded-cell {
+  background-color: transparent;
+}
+.el-table tr {
+  background-color: transparent !important;
+}
+.el-table--enable-row-transition .el-table__body td,
+.el-table .cell {
+  background-color: transparent;
+}
+</style>

src/views/cesiumtest.vue

@@ -0,0 +1,72 @@
+<template>
+</template>
+<script>
+export default {
+  data() {
+    return{
+      // 事件类型
+      type:'',
+      msg:'',
+      wsUrl:''
+    }   
+  },
+  methods: {
+    //初始化weosocket
+    initWebSocket() {
+      if (typeof WebSocket === "undefined") {
+        alert("您的浏览器不支持WebSocket");
+        return false;
+      }
+      const wsuri = 'ws://10.155.32.4:8010/company'
+ 
+      this.websock = new WebSocket(wsuri);
+      this.websock.onopen = this.websocketonopen;
+      this.websock.onmessage = this.websocketonmessage;
+      this.websock.onerror = this.websocketonerror;
+      this.websock.onclose = this.websocketclose;
+    },
+    //连接成功
+    websocketonopen() {
+      console.log("WebSocket连接成功");
+      // 添加心跳检测，每30秒发一次数据，防止连接断开（这跟服务器的设置有关，如果服务器没有设置每隔多长时间不发消息断开，可以不进行心跳设置）
+      let self = this;
+      this.timer = setInterval(() => {
+        try {
+          self.websock.send('test')
+          console.log('发送消息');
+        }catch(err){
+          console.log('断开了：' + err);
+          self.connection()
+        }
+      }, 30000)
+    },
+    //接收后端返回的数据，可以根据需要进行处理
+    websocketonmessage(e) {
+      var vm = this;
+      let data1Json = JSON.parse(e.data);
+      console.log(data1Json);
+    },
+    //连接建立失败重连
+    websocketonerror(e) {
+      console.log(`连接失败的信息：`, e);
+      this.initWebSocket(); // 连接失败后尝试重新连接
+    },
+    //关闭连接
+    websocketclose(e) {
+      console.log("断开连接", e);
+    }
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  }
+};
+</script>

src/views/monitor.vue

@@ -0,0 +1,195 @@
+
+<template>
+  <div id="container" class="box">
+    <div id="cesiumContainer"></div>
+    <div class="menu">
+      <el-dropdown @command="handleCommand">
+        <span class="el-dropdown-link">
+          下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="a">天气开关</el-dropdown-item>
+          <el-dropdown-item command="b">地图中文标记</el-dropdown-item>
+          <el-dropdown-item command="c">回到初始位置</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+<script>
+var Cesium = require("cesium/Cesium");
+var widgets = require("cesium/Widgets/widgets.css");
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      publicPath: process.env.BASE_URL,
+      initPosition: [106.0231304, 37.73323706, 0],
+      viewer: null,
+    };
+  },
+  mounted() {
+    var 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.ArcGisMapServerImageryProvider({
+        url:
+          "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
+        baseLayerPicker: false,
+      }),
+    });
+    viewer.scene.camera.setView({
+      // 初始化相机经纬度
+      destination: new Cesium.Cartesian3.fromDegrees(
+        106.0231304,
+        37.73323706,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+    this.viewer = viewer;
+  },
+  methods: {
+    addRain() {
+      // 雨雪天气添加
+      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;
+    },
+    geoJSON() {
+      //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: "?",
+          }
+        )
+      );
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(106.0231304,
+        37.73323706,
+        2000),
+        //duration:5, // 设置飞行持续时间，默认会根据距离来计算
+        complete: function () {
+            // 到达位置后执行的回调函数
+            console.log('到达目的地');
+        },
+        cancle: function () {
+            // 如果取消飞行则会调用此函数
+            console.log('飞行取消')
+        },
+        pitchAdjustHeight: -90, // 如果摄像机飞越高于该值，则调整俯仰俯仰的俯仰角度，并将地球保持在视口中。
+        maximumHeight:5000, // 相机最大飞行高度
+      });
+    },
+    handleCommand(command) {
+      switch (command) {
+        case 'a':
+          this.addRain();
+          break;
+        case 'b':
+          this.geoJSON();
+          break;
+        default:
+          this.flyto();
+          break;
+      }
+    },
+    //初始化weosocket
+    initWebSocket() {
+      if (typeof WebSocket === "undefined") {
+        alert("您的浏览器不支持WebSocket");
+        return false;
+      }
+      const wsuri = "ws://10.155.32.4:8010/shbracelet";
+
+      this.websock = new WebSocket(wsuri);
+      this.websock.onopen = this.websocketonopen;
+      this.websock.onmessage = this.websocketonmessage;
+      this.websock.onerror = this.websocketonerror;
+      this.websock.onclose = this.websocketclose;
+    },
+    //连接成功
+    websocketonopen() {
+      console.log("WebSocket连接成功");
+      // 添加心跳检测，每30秒发一次数据，防止连接断开（这跟服务器的设置有关，如果服务器没有设置每隔多长时间不发消息断开，可以不进行心跳设置）
+      let self = this;
+      this.timer = setInterval(() => {
+        try {
+          self.websock.send("test");
+          console.log("发送消息");
+        } catch (err) {
+          console.log("断开了：" + err);
+          self.connection();
+        }
+      }, 30000);
+    },
+    //接收后端返回的数据，可以根据需要进行处理
+    websocketonmessage(e) {
+      var vm = this;
+      let res = JSON.parse(e.data);
+      console.log(res);
+    },
+    //连接建立失败重连
+    websocketonerror(e) {
+      console.log(`连接失败的信息：`, e);
+      this.initWebSocket(); // 连接失败后尝试重新连接
+    },
+    //关闭连接
+    websocketclose(e) {
+      console.log("断开连接", e);
+    },
+  },
+};
+</script>
+ 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style  lang="scss" scoped>
+html,
+body,
+#cesiumContainer {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+.box {
+  height: 100%;
+  .menu {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+</style>
+

vue.config.js

@@ -0,0 +1,71 @@
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const webpack = require('webpack')
+const path = require('path')
+
+let cesiumSource = './node_modules/cesium/Source'
+let cesiumWorkers = '../Source/Workers'
+
+module.exports = {
+  // 基本路径  3.6之前的版本时 baseUrl
+  publicPath: "./",
+  // 输出文件目录
+  outputDir: "dist",
+  // eslint-loader 是否在保存的时候检查
+  lintOnSave: false,
+  // webpack-dev-server 相关配置
+  devServer: {
+    open: process.platform === "darwin",
+    host: "0.0.0.0",
+    port: 5000,
+    https: false,
+    hotOnly: false
+  },
+  configureWebpack: {
+    output: {
+      sourcePrefix: ' '
+    },
+    amd: {
+      toUrlUndefined: true
+    },
+    resolve: {
+      alias: {
+        'vue$': 'vue/dist/vue.esm.js',
+        '@': path.resolve('src'),
+        'cesium': path.resolve(__dirname, cesiumSource)
+      }
+    },
+    plugins: [
+      new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),
+      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
+      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),
+      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
+      new webpack.DefinePlugin({
+        CESIUM_BASE_URL: JSON.stringify('./')
+      })
+    ],
+    module: {
+      unknownContextCritical: /^.\/.*$/,
+      unknownContextCritical: false
+    }
+  },
+  devServer: {
+    proxy: {
+        '/fj': {
+            target: 'http://127.0.0.1:8081',
+            changeOrigin: true,
+            ws: true,
+            pathRewrite: {
+              '^/fj': ''
+            }
+        },
+        '/map': {
+          target: '10.155.32.4/tiles',
+          changeOrigin: true,
+          ws: true,
+          pathRewrite: {
+            '^/map': ''
+          }
+      },
+    }
+}
+};