1

src/views/monitor.vue

@@ -12,6 +12,7 @@
           <el-dropdown-item command="b">地图中文标记</el-dropdown-item>
           <el-dropdown-item command="c">回到初始位置</el-dropdown-item>
           <el-dropdown-item command="d">风场风向</el-dropdown-item>
+          <el-dropdown-item command="f">风机模型添加</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
@@ -43,17 +44,17 @@
 <script>
 var Cesium = require("cesium/Cesium");
 var widgets = require("cesium/Widgets/widgets.css");
-import axios from 'axios'
+import axios from "axios";
 import addCircleWave from "../../public/static/CiecleScan";
 import Windy from "../../public/static/wind/Windy";
-import response from '../../public/static/2017121300'
-
+import response from "../../public/static/2017121300";
+import wtTree from "../../public/static/fj";
 export default {
   name: "cesiumPage",
   data() {
     return {
-      myVar:null,
-      windy:null,
+      myVar: null,
+      windy: null,
       promsg: false,
       labelEntities: [],
       weather: null,
@@ -253,6 +254,7 @@ export default {
           this.labelEntities = [];
         }
       });
+      this.viewer.flyTo(promise);
     },
     flyto(h) {
       this.viewer.camera.flyTo({
@@ -275,23 +277,21 @@ export default {
       });
     },
     windyF() {
-      console.log(this.windy)
+      console.log(this.windy);
       var windy = new Windy(response, this.viewer);
-      if(this.windy == null){
+      if (this.windy == null) {
         this.flyto(20000000);
         this.windy = windy;
-         this.myVar =  setInterval(function () {
-            console.log(1111111111)
-            windy.animate();
-          }, 100);
-      }
-      else{
-        this.windy = null
+        this.myVar = setInterval(function () {
+          console.log(1111111111);
+          windy.animate();
+        }, 100);
+      } else {
+        this.windy = null;
         clearInterval(this.myVar);
-        console.log(22222)
+        console.log(22222);
         windy.destroy();
       }
-        
     },
     handleCommand(command) {
       switch (command) {
@@ -304,11 +304,73 @@ export default {
         case "d":
           this.windyF();
           break;
+        case "f":
+          geoJSON()
+          const windt = wtTree;
+          for (let i in windt) {
+            if (i == 8) return;
+            var position = Cesium.Cartesian3.fromDegrees(
+              windt[i].lng,
+              windt[i].lat,
+              1650
+            );
+            this.addFengjiModel(position);
+          }
+          break;
         default:
           this.flyto(2000);
           break;
       }
     },
+    addFengjiModel(position) {
+      var hpRoll = new Cesium.HeadingPitchRoll(
+        Cesium.Math.toRadians(90),
+        0,
+        0
+      );
+      var orientation = Cesium.Transforms.headingPitchRollQuaternion(
+        position,
+        hpRoll
+      );
+      var color = Cesium.Color.LIME;
+      // 添加模型
+      var model = this.viewer.entities.add({
+        // 模型id
+        // id:'model',
+        // 模型位置
+        position: position,
+        // 模型方向
+        orientation: orientation,
+        // 模型资源
+        model: {
+          // 模型路径
+          uri: `${this.publicPath}static/WT01.glb`,
+          // 模型最小刻度
+          minimumPixelSize: 100,
+          // 模型最大刻度
+          maximumSize: 100,
+          //设置模型最大放大大小
+          maximumScale: 150,
+          // 模型是否可见
+          show: true,
+          // 模型轮廓颜色
+          silhouetteColor: Cesium.Color.WHITE,
+          // 模型颜色  ，这里可以设置颜色的变化
+          color: Cesium.Color.WHITE,
+          // 仅用于调试，显示魔仙绘制时的线框
+          debugWireframe: false,
+          // 仅用于调试。显示模型绘制时的边界球。
+          debugShowBoundingVolume: false,
+          scale: 0.05,
+          runAnimations: true, //是否运行模型中的动画效果
+        },
+        // 添加描述
+        description: "风机模型",
+      });
+      // 视角切换到模型
+      // viewer.trackedEntity = model;
+      // window.m = model;
+    },
     //初始化weosocket
     initWebSocket() {
       if (typeof WebSocket === "undefined") {

src/views/monitor1.vue

@@ -12,10 +12,11 @@
           <el-dropdown-item command="b">地图中文标记</el-dropdown-item>
           <el-dropdown-item command="c">回到初始位置</el-dropdown-item>
           <el-dropdown-item command="d">风场风向</el-dropdown-item>
+          <el-dropdown-item command="f">风机模型添加</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
-    <div class="promsg" v-show="promsg">
+    <div id="promsg" class="promsg" v-show="promsg">
       <div class="promsg_bar">
         状态:<span>{{ msg[i].isrun | isrun }}</span>
       </div>
@@ -43,23 +44,24 @@
 <script>
 var Cesium = require("cesium/Cesium");
 var widgets = require("cesium/Widgets/widgets.css");
-import axios from 'axios'
+import axios from "axios";
 import addCircleWave from "../../public/static/CiecleScan";
 import CanvasWindy from "../../public/static/Windy";
-import response from '../../public/static/data'
-
+import response from "../../public/static/data";
+import wtTree from "../../public/static/fj";
 export default {
   name: "cesiumPage",
-  data()
-  {
+  data() {
     return {
       myVar: null,
       windyD: null,
       promsg: false,
       labelEntities: [],
+      fjmodelArr: [],
       weather: null,
       publicPath: process.env.BASE_URL,
       viewer: null,
+      promise: null,
       msg: [
         {
           bs: 200,
@@ -78,22 +80,19 @@ export default {
       i: 0,
     };
   },
-  created()
-  {
+  created() {
     if (this.websock) {
       this.websock.close(); // 关闭websocket连接
     }
     this.initWebSocket();
   },
-  destroyed()
-  {
+  destroyed() {
     //页面销毁时关闭ws连接
     if (this.websock) {
       this.websock.close(); // 关闭websocket
     }
   },
-  mounted()
-  {
+  mounted() {
     var viewer = new Cesium.Viewer("cesiumContainer", {
       animation: false, //是否显示动画控件
       shouldAnimate: true,
@@ -115,7 +114,7 @@ export default {
         baseLayerPicker: false,
       }),
     });
-    viewer._cesiumWidget._creditContainer.style.display = "none";//去除版权信息
+    viewer._cesiumWidget._creditContainer.style.display = "none"; //去除版权信息
     viewer.scene.camera.setView({
       // 初始化相机经纬度
       destination: new Cesium.Cartesian3.fromDegrees(
@@ -130,9 +129,10 @@ export default {
       },
     });
 
+    // -----------------------------------------------------------------------
+
     var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
-    handler.setInputAction((movement) =>
-    {
+    handler.setInputAction((movement) => {
       var pick = viewer.scene.pick(movement.position);
       if (Cesium.defined(pick) && pick.id.id) {
         for (let i in this.msg) {
@@ -140,17 +140,29 @@ export default {
             this.i = i;
           }
         }
-        this.$nextTick(() =>
-        {
-          this.promsg = true;
+        this.$nextTick(() => {
+          if (pick.id.id.constructor == String) {
+            console.log(111111111111);
+            console.log(pick);
+            var bubble = document.getElementById("promsg");
+            //设置弹出框位置
+            bubble.style.left = pick.x - 70 + "px";
+            var divheight = bubble.offsetHeight;
+            var divy = pick.y - divheight - 50; //50px为.bubble:after--20x50
+            bubble.style.top = divy + "px";
+
+            this.promsg = true;
+          } else {
+            this.promsg = true;
+            console.log(pick);
+          }
         });
       }
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     this.viewer = viewer;
   },
   filters: {
-    isrun(val)
-    {
+    isrun(val) {
       switch (val) {
         case 0:
           return "离线";
@@ -165,8 +177,8 @@ export default {
     },
   },
   methods: {
-    addpoint(res)
-    {
+    ccc() {},
+    addpoint(res) {
       switch (res.isrun) {
         case 0:
           if (!this.viewer.entities.getById(res.userid))
@@ -205,8 +217,7 @@ export default {
           break;
       }
     },
-    addRain()
-    {
+    addRain() {
       // 雨雪天气添加
       // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
       var scene = this.viewer.scene;
@@ -224,25 +235,31 @@ export default {
       // scene.fog.density = 0.001;
       // scene.fog.minimumBrightness = 0.8;
     },
-    geoJSON()
-    {
+    geoJSON() {
       //jeojson 加载宁夏地图
       Cesium.Math.setRandomNumberSeed(0);
       var promise = this.viewer.dataSources.add(
         Cesium.GeoJsonDataSource.load(
-          `${ this.publicPath }static/mapgeoJsonnx.json`,
+          `${this.publicPath}static/mapgeoJsonnx.json`,
           {
-            stroke: Cesium.Color(0,1,1,1),
+            stroke: Cesium.Color.GREEN,
             fill: Cesium.Color.TRANSPARENT,
-            strokeWidth: 3,
+            strokeWidth: 30,
             markerSymbol: "?",
           }
         )
       );
-      promise.then((dataSource) =>
-      {
-        const entities = dataSource.entities.values;
-        console.log(this.labelEntities.length);
+      this.promise = promise;
+      promise.then((dataSource) => {
+        var entities = dataSource.entities.values;
+        var objnew = {};
+        entities = entities.reduce(function (item, next) {
+          console.log(next.name);
+          objnew[next.name]
+            ? ""
+            : (objnew[next.name] = true && item.push(next));
+          return item;
+        }, []);
         if (this.labelEntities.length == 0) {
           for (let i = 0; i < entities.length; i++) {
             const entity = entities[i];
@@ -265,9 +282,9 @@ export default {
           this.labelEntities = [];
         }
       });
+      this.viewer.flyTo(promise);
     },
-    flyto(h)
-    {
+    flyto(h) {
       this.viewer.camera.flyTo({
         destination: Cesium.Cartesian3.fromDegrees(
           106.24307250976562,
@@ -275,13 +292,11 @@ export default {
           h
         ),
         //duration:5, // 设置飞行持续时间，默认会根据距离来计算
-        complete: function ()
-        {
+        complete: function () {
           // 到达位置后执行的回调函数
           console.log("到达目的地");
         },
-        cancle: function ()
-        {
+        cancle: function () {
           // 如果取消飞行则会调用此函数
           console.log("飞行取消");
         },
@@ -289,34 +304,32 @@ export default {
         maximumHeight: 5000, // 相机最大飞行高度
       });
     },
-    windyF()
-    {
-      
+    windyF() {
       if (this.windyD == null) {
         this.flyto(20000000);
-        this.$nextTick(() =>
-        {
-            var windycanvas=null;var windy = null
-          var resizeCanvas = function(){
-                    if(windycanvas==null){
-                        return;
-                    }
-                    windycanvas.width=window.innerWidth;
-                    windycanvas.height=window.innerHeight;
-                    console.log(windycanvas.width,windycanvas.height);
-                    if(windy){
-                        windy._resize(windycanvas.width,windycanvas.height);
-                    }
-                };
-          windycanvas = document.createElement('canvas');
+        this.$nextTick(() => {
+          var windycanvas = null;
+          var windy = null;
+          var resizeCanvas = function () {
+            if (windycanvas == null) {
+              return;
+            }
+            windycanvas.width = window.innerWidth;
+            windycanvas.height = window.innerHeight;
+            console.log(windycanvas.width, windycanvas.height);
+            if (windy) {
+              windy._resize(windycanvas.width, windycanvas.height);
+            }
+          };
+          windycanvas = document.createElement("canvas");
           windycanvas.setAttribute("id", "windycanvas");
-          windycanvas.style.position = 'fixed'
+          windycanvas.style.position = "fixed";
           windycanvas.style["pointer-events"] = "none";
           windycanvas.style["z-index"] = 10;
           windycanvas.style["top"] = 0;
-          document.getElementById('container').appendChild(windycanvas);
+          document.getElementById("container").appendChild(windycanvas);
           resizeCanvas();
-          window.onresize=resizeCanvas;
+          window.onresize = resizeCanvas;
           var params = {
             viewer: this.viewer,
             canvas: windycanvas,
@@ -326,24 +339,20 @@ export default {
             particlesNumber: 1000,
             maxAge: 120,
             frameRate: 10,
-            color: '#ffffff',
+            color: "#ffffff",
             lineWidth: 1,
           };
-          console.log(params)
+          console.log(params);
           windy = new CanvasWindy(response, params);
-          this.windyD = windy
-        })
-
-      }
-      else {
-        this.windyD.removeLines()
-        this.windyD = null
-        console.log(22222)
+          this.windyD = windy;
+        });
+      } else {
+        this.windyD.removeLines();
+        this.windyD = null;
+        console.log(22222);
       }
-
     },
-    handleCommand(command)
-    {
+    handleCommand(command) {
       switch (command) {
         case "a":
           this.addRain();
@@ -354,14 +363,88 @@ export default {
         case "d":
           this.windyF();
           break;
+        case "f":
+          this.addwindT();
+          break;
         default:
           this.flyto(2000);
           break;
       }
     },
+    addwindT() {
+      if (this.fjmodelArr.length == 0) {
+        if(this.promise){
+          this.viewer.flyTo(this.promise);
+        }else{
+          this.geoJSON()
+        }
+        
+        const windt = wtTree;
+        for (let i in windt) {
+          if (i == 8) return;
+          var position = Cesium.Cartesian3.fromDegrees(
+            windt[i].lng,
+            windt[i].lat,
+            1650
+          );
+          this.addFengjiModel(position);
+        }
+      } else {
+        for (var i = 0; i < this.fjmodelArr.length; i++) {
+          this.viewer.entities.remove(this.fjmodelArr[i]);
+        }
+        var arrneway = []
+        this.fjmodelArr = arrneway
+      }
+    },
+    addFengjiModel(position) {
+      var hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(90), 0, 0);
+      var orientation = Cesium.Transforms.headingPitchRollQuaternion(
+        position,
+        hpRoll
+      );
+      var color = Cesium.Color.LIME;
+      // 添加模型
+      var modelArr = this.viewer.entities.add({
+        // 模型id
+        // id:'model',
+        // 模型位置
+        position: position,
+        // 模型方向
+        orientation: orientation,
+        // 模型资源
+        model: {
+          // 模型路径
+          uri: `${this.publicPath}static/WT01.glb`,
+          // 模型最小刻度
+          minimumPixelSize: 100,
+          // 模型最大刻度
+          maximumSize: 100,
+          //设置模型最大放大大小
+          maximumScale: 150,
+          // 模型是否可见
+          show: true,
+          // 模型轮廓颜色
+          silhouetteColor: Cesium.Color.WHITE,
+          // 模型颜色  ，这里可以设置颜色的变化
+          color: Cesium.Color.WHITE,
+          // 仅用于调试，显示魔仙绘制时的线框
+          debugWireframe: false,
+          // 仅用于调试。显示模型绘制时的边界球。
+          debugShowBoundingVolume: false,
+          scale: 0.05,
+          runAnimations: true, //是否运行模型中的动画效果
+        },
+        // 添加描述
+        description: "风机模型",
+      });
+      this.fjmodelArr.push(modelArr);
+      // 视角切换到模型
+      // viewer.trackedEntity = model;
+      // window.m = model;
+    },
     //初始化weosocket
-    initWebSocket()
-    {
+    initWebSocket() {
       if (typeof WebSocket === "undefined") {
         alert("您的浏览器不支持WebSocket");
         return false;
@@ -375,13 +458,11 @@ export default {
       this.websock.onclose = this.websocketclose;
     },
     //连接成功
-    websocketonopen()
-    {
+    websocketonopen() {
       console.log("WebSocket连接成功");
       // 添加心跳检测，每30秒发一次数据，防止连接断开（这跟服务器的设置有关，如果服务器没有设置每隔多长时间不发消息断开，可以不进行心跳设置）
       let self = this;
-      this.timer = setInterval(() =>
-      {
+      this.timer = setInterval(() => {
         try {
           self.websock.send("test");
           console.log("发送消息");
@@ -392,8 +473,7 @@ export default {
       }, 30000);
     },
     //接收后端返回的数据，可以根据需要进行处理
-    websocketonmessage(e)
-    {
+    websocketonmessage(e) {
       let res = JSON.parse(e.data);
       console.log(res);
       this.msg = res;
@@ -402,14 +482,12 @@ export default {
       }
     },
     //连接建立失败重连
-    websocketonerror(e)
-    {
+    websocketonerror(e) {
       console.log(`连接失败的信息：`, e);
       this.initWebSocket(); // 连接失败后尝试重新连接
     },
     //关闭连接
-    websocketclose(e)
-    {
+    websocketclose(e) {
       console.log("断开连接", e);
     },
   },

src/views/station.vue

@@ -127,7 +127,7 @@ export default {
       },
       timer:'',
       publicPath: process.env.BASE_URL,
-      url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali",
+      url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
       initPosition: [106.0231304, 37.73323706, 0],
       positionArray: [
         [106.0231304, 37.73323706],