1

.history/public/static/CiecleScan_20201019151443.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;
+

.history/public/static/CiecleScan_20201022170440.js

@@ -0,0 +1,197 @@
+var Cesium = require("cesium/Cesium");
+export default
+   function 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;
+

.history/public/static/CiecleScan_20201022170716.js

@@ -0,0 +1,198 @@
+var Cesium = require("cesium/Cesium");
+export default
+   function addCircleWave(viewer,msgarr,color) {
+       console.log(msgarr)
+    viewer.entities.add({
+        id:msgarr.userid+'',
+        name: msgarr.username,
+        position: Cesium.Cartesian3.fromDegrees(msgarr.lng ,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;
+

.history/public/static/CiecleScan_20201022171222.js

@@ -0,0 +1,197 @@
+var Cesium = require("cesium/Cesium");
+export default
+   function addCircleWave(viewer,msgarr,color) {
+    viewer.entities.add({
+        id:msgarr.userid+'',
+        name: msgarr.username,
+        position: Cesium.Cartesian3.fromDegrees(msgarr.lng ,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;
+

.history/src/views/monitor_20201022141951.vue

@@ -0,0 +1,205 @@
+
+<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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      var state = null;
+      if (state == null) {
+        scene.postProcessStages.add(
+          (state = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      }else{
+        scene.postProcessStages.remove(state);
+        state = null;
+      }
+      // 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_20201022142112.vue

@@ -0,0 +1,206 @@
+
+<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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      var state = null;
+      if (state == null) {
+        scene.postProcessStages.add(
+          (state = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      }else{
+        console.log('remove')
+        scene.postProcessStages.remove(state);
+        state = null;
+      }
+      // 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_20201022142229.vue

@@ -0,0 +1,207 @@
+
+<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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      var state = null;
+      if (state == null) {
+        scene.postProcessStages.add(
+          (state = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+        console.log(state)
+      }else{
+        console.log('remove')
+        scene.postProcessStages.remove(state);
+        state = null;
+      }
+      // 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_20201022142629.vue

@@ -0,0 +1,207 @@
+
+<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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      var state = null;
+      if (state == null) {
+        scene.postProcessStages.add(
+          state = Cesium.PostProcessStageLibrary.createSnowStage()
+        );
+        console.log(state)
+      }else{
+        console.log('remove')
+        scene.postProcessStages.remove(state);
+        state = null;
+      }
+      // 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_20201022142820.vue

@@ -0,0 +1,205 @@
+
+<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 {
+      weather:null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (weather == null) {
+        scene.postProcessStages.add(
+          weather = Cesium.PostProcessStageLibrary.createSnowStage()
+        );
+      }else{
+        scene.postProcessStages.remove(weather);
+        weather = null;
+      }
+      // 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_20201022142843.vue

@@ -0,0 +1,206 @@
+
+<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 {
+      weather:null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      var weather = this.weather;
+      if (weather == null) {
+        scene.postProcessStages.add(
+          weather = Cesium.PostProcessStageLibrary.createSnowStage()
+        );
+      }else{
+        scene.postProcessStages.remove(weather);
+        weather = null;
+      }
+      // 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_20201022143002.vue

@@ -0,0 +1,207 @@
+
+<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 {
+      weather:null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      var weather = this.weather;
+      if (weather == null) {
+        scene.postProcessStages.add(
+          weather = Cesium.PostProcessStageLibrary.createSnowStage()
+        );
+      }else{
+        console.log(11111)
+        scene.postProcessStages.remove(weather);
+        weather = null;
+      }
+      // 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_20201022143308.vue

@@ -0,0 +1,208 @@
+
+<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 {
+      weather:null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      let weather = this.weather;
+      if (weather == null) {
+        scene.postProcessStages.add(
+          weather = Cesium.PostProcessStageLibrary.createSnowStage()
+        );
+        console.log(weather)
+      }else{
+        console.log(11111)
+        scene.postProcessStages.remove(weather);
+        weather = null;
+      }
+      // 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_20201022144321.vue

@@ -0,0 +1,208 @@
+
+<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 {
+      weather:null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      let weather = this.weather;
+      if (weather == null) {
+        weather =scene.postProcessStages.add(
+           Cesium.PostProcessStageLibrary.createSnowStage()
+        );
+        console.log(weather)
+      }else{
+        console.log(11111)
+        scene.postProcessStages.remove(weather);
+        weather = null;
+      }
+      // 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_20201022144615.vue

@@ -0,0 +1,209 @@
+
+<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 {
+      weather:null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      let weather = this.weather;
+       console.log(weather)
+      if (weather==null) {
+        scene.postProcessStages.add(
+          weather = Cesium.PostProcessStageLibrary.createSnowStage()
+        );
+        console.log(weather)
+      }else{
+        console.log(11111)
+        scene.postProcessStages.remove(weather);
+        weather = null;
+      }
+      // 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_20201022144700.vue

@@ -0,0 +1,209 @@
+
+<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 {
+      weather:null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      let weather = this.weather;
+       console.log(weather)
+      if (weather==null) {
+        scene.postProcessStages.add(
+          weather = Cesium.PostProcessStageLibrary.createSnowStage()
+        );
+        console.log(weather)
+      }else{
+        console.log(11111)
+        // scene.postProcessStages.remove(weather);
+        // weather = null;
+      }
+      // 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_20201022144820.vue

@@ -0,0 +1,205 @@
+
+<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 {
+      weather:null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather==null) {
+        scene.postProcessStages.add(
+          this.weather = Cesium.PostProcessStageLibrary.createSnowStage()
+        );
+      }else{
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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_20201022145030.vue

@@ -0,0 +1,209 @@
+
+<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 {
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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: "?",
+            label: {
+              text: name,
+              font: "14px Helvetica",
+            },
+          }
+        )
+      );
+    },
+    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_20201022150922.vue

@@ -0,0 +1,228 @@
+
+<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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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() {
+      var viewer = this.viewer;
+      //jeojson 加载宁夏地图
+      Cesium.Math.setRandomNumberSeed(0);
+      var promise = this.viewer.dataSources.add(
+        Cesium.GeoJsonDataSource.load(
+          `${this.publicPath}static/mapgeoJsonnx.json`
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        entity.polygon.material = Cesium.Color.YELLOW.withAlpha(0);
+        entity.polygon.outlineColor = Cesium.Color.GREEN;
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name; // console.log(name);
+            const location = entity.properties.cp.getValue();
+            const labelEntity = viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            viewer.entities.remove(this.labelEntities[i]);
+          }
+          for (let i = 0; i < entities.length; i++) {
+            entities[i].polygon.outline = false;
+          }
+        }
+      });
+    },
+    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_20201022151529.vue

@@ -0,0 +1,228 @@
+
+<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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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() {
+      var viewer = this.viewer;
+      //jeojson 加载宁夏地图
+      Cesium.Math.setRandomNumberSeed(0);
+      var promise = this.viewer.dataSources.add(
+        Cesium.GeoJsonDataSource.load(
+          `${this.publicPath}static/mapgeoJsonnx.json`
+        )
+      );
+      promise.then(dataSource => {
+        const entities = dataSource.entities.values;
+        entity.polygon.material = Cesium.Color.YELLOW.withAlpha(0);
+        entity.polygon.outlineColor = Cesium.Color.GREEN;
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name; // console.log(name);
+            const location = entity.properties.cp.getValue();
+            let labelEntity = viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            viewer.entities.remove(this.labelEntities[i]);
+          }
+          for (let i = 0; i < entities.length; i++) {
+            entities[i].polygon.outline = false;
+          }
+        }
+      });
+    },
+    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_20201022151628.vue

@@ -0,0 +1,230 @@
+
+<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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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() {
+      var viewer = this.viewer;
+      //jeojson 加载宁夏地图
+      Cesium.Math.setRandomNumberSeed(0);
+      var promise = this.viewer.dataSources.add(
+        Cesium.GeoJsonDataSource.load(
+          `${this.publicPath}static/mapgeoJsonnx.json`
+        )
+      );
+      promise.then(dataSource => {
+        const entities = dataSource.entities.values;
+        entity.polygon.material = Cesium.Color.YELLOW.withAlpha(0);
+        entity.polygon.outlineColor = Cesium.Color.GREEN;
+        if (this.labelEntities.length == 0) {
+          console.log(add)
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name; // console.log(name);
+            const location = entity.properties.cp.getValue();
+            let labelEntity = viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          console.log(remove)
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            viewer.entities.remove(this.labelEntities[i]);
+          }
+          for (let i = 0; i < entities.length; i++) {
+            entities[i].polygon.outline = false;
+          }
+        }
+      });
+    },
+    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_20201022151654.vue

@@ -0,0 +1,230 @@
+
+<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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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() {
+      var viewer = this.viewer;
+      //jeojson 加载宁夏地图
+      Cesium.Math.setRandomNumberSeed(0);
+      var promise = this.viewer.dataSources.add(
+        Cesium.GeoJsonDataSource.load(
+          `${this.publicPath}static/mapgeoJsonnx.json`
+        )
+      );
+      promise.then(dataSource => {
+        const entities = dataSource.entities.values;
+        entity.polygon.material = Cesium.Color.YELLOW.withAlpha(0);
+        entity.polygon.outlineColor = Cesium.Color.GREEN;
+        if (this.labelEntities.length == 0) {
+          console.log('add')
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name; // console.log(name);
+            const location = entity.properties.cp.getValue();
+            let labelEntity = viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          console.log('remove')
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            viewer.entities.remove(this.labelEntities[i]);
+          }
+          for (let i = 0; i < entities.length; i++) {
+            entities[i].polygon.outline = false;
+          }
+        }
+      });
+    },
+    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_20201022152309.vue

@@ -0,0 +1,231 @@
+
+<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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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() {
+      var viewer = this.viewer;
+      //jeojson 加载宁夏地图
+      Cesium.Math.setRandomNumberSeed(0);
+      var promise = this.viewer.dataSources.add(
+        Cesium.GeoJsonDataSource.load(
+          `${this.publicPath}static/mapgeoJsonnx.json`
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log("11111111111");
+        if (this.labelEntities.length == 0) {
+          console.log("add");
+          entity.polygon.material = Cesium.Color.YELLOW.withAlpha(0);
+          entity.polygon.outlineColor = Cesium.Color.GREEN;
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name; // console.log(name);
+            const location = entity.properties.cp.getValue();
+            let labelEntity = viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          console.log("remove");
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            viewer.entities.remove(this.labelEntities[i]);
+          }
+          for (let i = 0; i < entities.length; i++) {
+            entities[i].polygon.outline = false;
+          }
+        }
+      });
+    },
+    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_20201022152617.vue

@@ -0,0 +1,233 @@
+
+<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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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() {
+      var viewer = this.viewer;
+      //jeojson 加载宁夏地图
+      Cesium.Math.setRandomNumberSeed(0);
+      var promise = this.viewer.dataSources.add(
+        Cesium.GeoJsonDataSource.load(
+          `${this.publicPath}static/mapgeoJsonnx.json`
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log("11111111111");
+        if (this.labelEntities.length == 0) {
+          console.log("add");
+          entity.polygon.material = Cesium.Color.YELLOW.withAlpha(0);
+          entity.polygon.outlineColor = Cesium.Color.GREEN;
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name; // console.log(name);
+            const location = entity.properties.cp.getValue();
+            let labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+          console.log(this.labelEntities);
+        } else {
+          console.log("remove");
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          for (let i = 0; i < entities.length; i++) {
+            entities[i].polygon.outline = false;
+          }
+          this.labelEntities =[]
+        }
+      });
+    },
+    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_20201022153033.vue

@@ -0,0 +1,234 @@
+
+<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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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() {
+      var viewer = this.viewer;
+      //jeojson 加载宁夏地图
+      Cesium.Math.setRandomNumberSeed(0);
+      var promise = this.viewer.dataSources.add(
+        Cesium.GeoJsonDataSource.load(
+          `${this.publicPath}static/mapgeoJsonnx.json`
+        )
+      );
+      promise.then(dataSource => {
+        const entities = dataSource.entities.values;
+        console.log("11111111111");
+        if (this.labelEntities.length == 0) {
+          console.log("add");
+          
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name; // console.log(name);
+            const location = entity.properties.cp.getValue();
+            entity.polygon.material = Cesium.Color.YELLOW.withAlpha(0);
+            entity.polygon.outlineColor = Cesium.Color.GREEN;
+            let labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+          console.log(this.labelEntities);
+        } else {
+          console.log("remove");
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          for (let i = 0; i < entities.length; i++) {
+            entities[i].polygon.outline = false;
+          }
+          this.labelEntities =[]
+        }
+      });
+    },
+    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_20201022153034.vue

@@ -0,0 +1,234 @@
+
+<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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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() {
+      var viewer = this.viewer;
+      //jeojson 加载宁夏地图
+      Cesium.Math.setRandomNumberSeed(0);
+      var promise = this.viewer.dataSources.add(
+        Cesium.GeoJsonDataSource.load(
+          `${this.publicPath}static/mapgeoJsonnx.json`
+        )
+      );
+      promise.then(dataSource => {
+        const entities = dataSource.entities.values;
+        console.log("11111111111");
+        if (this.labelEntities.length == 0) {
+          console.log("add");
+          
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name; // console.log(name);
+            const location = entity.properties.cp.getValue();
+            entity.polygon.material = Cesium.Color.YELLOW.withAlpha(0);
+            entity.polygon.outlineColor = Cesium.Color.GREEN;
+            let labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+          console.log(this.labelEntities);
+        } else {
+          console.log("remove");
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          for (let i = 0; i < entities.length; i++) {
+            entities[i].polygon.outline = false;
+          }
+          this.labelEntities =[]
+        }
+      });
+    },
+    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_20201022153302.vue

@@ -0,0 +1,233 @@
+
+<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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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`
+        )
+      );
+      promise.then(dataSource => {
+        const entities = dataSource.entities.values;
+        console.log("11111111111");
+        if (this.labelEntities.length == 0) {
+          console.log("add");
+          
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name; // console.log(name);
+            const location = entity.properties.cp.getValue();
+            entity.polygon.material = Cesium.Color.YELLOW.withAlpha(0);
+            entity.polygon.outlineColor = Cesium.Color.GREEN;
+            let labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+          console.log(this.labelEntities);
+        } else {
+          console.log("remove");
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          for (let i = 0; i < entities.length; i++) {
+            entities[i].polygon.outline = false;
+          }
+          this.labelEntities =[]
+        }
+      });
+    },
+    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_20201022153621.vue

@@ -0,0 +1,203 @@
+
+<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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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`
+        ));
+      promise.then(dataSource => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length)
+      });
+    },
+    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_20201022153921.vue

@@ -0,0 +1,223 @@
+
+<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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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`
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            entity.polygon.material = Cesium.Color.YELLOW.withAlpha(0.1);
+            entity.polygon.outlineColor = Cesium.Color.YELLOW;
+            const name = entity.name; // console.log(name);
+            const location = entity.properties.cp.getValue();
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            labelEntities.push(labelEntity);
+          }
+        } else {
+          console.log(11111)
+        }
+      });
+    },
+    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_20201022154623.vue

@@ -0,0 +1,227 @@
+
+<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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+          fill: Cesium.Color.TRANSPARENT,
+          strokeWidth: 3,
+          markerSymbol: "?",
+        }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name; 
+            const location = entity.properties.cp.getValue();
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          console.log(11111)
+        }
+      });
+    },
+    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_20201022154732.vue

@@ -0,0 +1,229 @@
+
+<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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+          fill: Cesium.Color.TRANSPARENT,
+          strokeWidth: 3,
+          markerSymbol: "?",
+        }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+
+        console.log(this.labelEntities.length);
+        console.log(entities);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name; 
+            const location = entity.properties.cp.getValue();
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          console.log(11111)
+        }
+      });
+    },
+    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_20201022154858.vue

@@ -0,0 +1,227 @@
+
+<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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+          fill: Cesium.Color.TRANSPARENT,
+          strokeWidth: 3,
+          markerSymbol: "?",
+        }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name; 
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          console.log(11111)
+        }
+      });
+    },
+    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_20201022155042.vue

@@ -0,0 +1,232 @@
+
+<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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          for (let i = 0; i < entities.length; i++) {
+            entities[i].polygon.outline = false;
+          }
+        }
+      });
+    },
+    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_20201022155537.vue

@@ -0,0 +1,238 @@
+
+<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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link{
+      color:#fff
+    }
+  }
+}
+</style>
+

.history/src/views/monitor_20201022155714.vue

@@ -0,0 +1,242 @@
+
+<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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link{
+      color:#fff
+    }
+  }
+}
+>>>.el-dropdown-menu{
+  background-color: rgba(0, 0, 0, 0.5);
+  color: #fff;
+}
+</style>
+

.history/src/views/monitor_20201022155841.vue

@@ -0,0 +1,243 @@
+
+<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" class="opt">
+          <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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link{
+      color:#fff
+    }
+    .opt{
+  background-color: rgba(0, 0, 0, 0.5);
+  color: #fff;
+}
+  }
+}
+
+</style>
+

.history/src/views/monitor_20201022155940.vue

@@ -0,0 +1,243 @@
+
+<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" class="opt">
+          <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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link{
+      color:#fff
+    }
+    .opt{
+  background-color: rgba(0, 0, 0, 0.5)!important;
+  color: #fff!important;
+}
+  }
+}
+
+</style>
+

.history/src/views/monitor_20201022160018.vue

@@ -0,0 +1,244 @@
+
+<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" class="opt">
+          <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 {
+      labelEntities: [],
+      weather: null,
+      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() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link{
+      color:#fff
+    }
+    
+  }
+}
+.opt{
+  background-color: rgba(0, 0, 0, 0.5)!important;
+  color: #fff!important;
+}
+
+</style>
+

.history/src/views/monitor_20201022161323.vue

@@ -0,0 +1,261 @@
+
+<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" class="opt">
+          <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 {
+      labelEntities: [],
+      weather: null,
+      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: {
+    addpoint(res) {
+      switch (res) {
+        case 0:
+          this.viewer.entities.add({
+            position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
+            point: {
+              pixelSize: 10,
+              color: Cesium.Color.YELLOW,
+            },
+          });
+          break;
+        case 1:
+          break;
+        default:
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    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)
+      // addpoint(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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022161517.vue

@@ -0,0 +1,273 @@
+
+<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" class="opt">
+          <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 {
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      initPosition: [106.0231304, 37.73323706, 0],
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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: {
+    addpoint(res) {
+      switch (res) {
+        case 0:
+          this.viewer.entities.add({
+            position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
+            point: {
+              pixelSize: 10,
+              color: Cesium.Color.YELLOW,
+            },
+          });
+          break;
+        case 1:
+          break;
+        default:
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    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)
+      // addpoint(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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022161921.vue

@@ -0,0 +1,275 @@
+
+<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" class="opt">
+          <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 {
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      initPosition: [106.0231304, 37.73323706, 0],
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          this.viewer.entities.add({
+            position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+            point: {
+              pixelSize: 10,
+              color: Cesium.Color.YELLOW,
+            },
+          });
+          break;
+        case 1:
+          break;
+        default:
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    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)
+      for(let i in res){
+        addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022162419.vue

@@ -0,0 +1,275 @@
+
+<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" class="opt">
+          <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 {
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      initPosition: [106.0231304, 37.73323706, 0],
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          this.viewer.entities.add({
+            position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+            point: {
+              pixelSize: 10,
+              color: Cesium.Color.YELLOW,
+            },
+          });
+          break;
+        case 1:
+          break;
+        default:
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    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)
+      for(let i in res){
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022164423.vue

@@ -0,0 +1,284 @@
+
+<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" class="opt">
+          <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 {
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      initPosition: [106.0231304, 37.73323706, 0],
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if(!this.viewer.entities.getById(res.userid))
+          this.viewer.entities.add({
+            id:res.userid,
+            position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+            point: {
+              pixelSize: 10,
+              color: Cesium.Color.YELLOW,
+            },
+            label:{
+              text:res.username,
+              font:'normal 14px MicroSoft YaHei',
+              color : Cesium.Color.fromCssColorString('#fff'),
+            }
+          });
+          break;
+        case 1:
+          addCircleWave(this.viewer,res,Cesium.Color.GREEN)
+          break;
+        default:
+          addCircleWave(this.viewer,res,Cesium.Color.RED)
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    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)
+      for(let i in res){
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022164548.vue

@@ -0,0 +1,284 @@
+
+<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" class="opt">
+          <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 {
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      initPosition: [106.0231304, 37.73323706, 0],
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if(!this.viewer.entities.getById(res.userid))
+          this.viewer.entities.add({
+            id:res.userid,
+            position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+            point: {
+              pixelSize: 10,
+              color: Cesium.Color.YELLOW,
+            },
+            label:{
+              text:res.username,
+              font:'normal 14px MicroSoft YaHei',
+              color : Cesium.Color.fromCssColorString('#fff'),
+            }
+          });
+          break;
+        case 1:
+          addCircleWave(this.viewer,res,Cesium.Color.GREEN)
+          break;
+        default:
+          addCircleWave(this.viewer,res,Cesium.Color.RED)
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    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)
+      for(let i in res){
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022164641.vue

@@ -0,0 +1,283 @@
+
+<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" class="opt">
+          <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 {
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+    this.viewer = viewer;
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if(!this.viewer.entities.getById(res.userid))
+          this.viewer.entities.add({
+            id:res.userid,
+            position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+            point: {
+              pixelSize: 10,
+              color: Cesium.Color.YELLOW,
+            },
+            label:{
+              text:res.username,
+              font:'normal 14px MicroSoft YaHei',
+              color : Cesium.Color.fromCssColorString('#fff'),
+            }
+          });
+          break;
+        case 1:
+          addCircleWave(this.viewer,res,Cesium.Color.GREEN)
+          break;
+        default:
+          addCircleWave(this.viewer,res,Cesium.Color.RED)
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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)
+      for(let i in res){
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022164746.vue

@@ -0,0 +1,286 @@
+
+<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" class="opt">
+          <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 {
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+    this.viewer = viewer;
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if(!this.viewer.entities.getById(res.userid))
+          this.viewer.entities.add({
+            id:res.userid,
+            position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+            point: {
+              pixelSize: 10,
+              color: Cesium.Color.YELLOW,
+            },
+            label:{
+              text:res.username,
+              font:'normal 14px MicroSoft YaHei',
+              color : Cesium.Color.fromCssColorString('#fff'),
+              outlineWidth: 2,
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            pixelOffset: new Cesium.Cartesian2(0, -9),
+            }
+          });
+          break;
+        case 1:
+          addCircleWave(this.viewer,res,Cesium.Color.GREEN)
+          break;
+        default:
+          addCircleWave(this.viewer,res,Cesium.Color.RED)
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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)
+      for(let i in res){
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022165204.vue

@@ -0,0 +1,287 @@
+
+<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" class="opt">
+          <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");
+import '../../public/static/CiecleScan'
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+    this.viewer = viewer;
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if(!this.viewer.entities.getById(res.userid))
+          this.viewer.entities.add({
+            id:res.userid,
+            position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+            point: {
+              pixelSize: 10,
+              color: Cesium.Color.YELLOW,
+            },
+            label:{
+              text:res.username,
+              font:'normal 14px MicroSoft YaHei',
+              color : Cesium.Color.fromCssColorString('#fff'),
+              outlineWidth: 2,
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            pixelOffset: new Cesium.Cartesian2(0, -9),
+            }
+          });
+          break;
+        case 1:
+          addCircleWave(this.viewer,res,Cesium.Color.GREEN)
+          break;
+        default:
+          addCircleWave(this.viewer,res,Cesium.Color.RED)
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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)
+      for(let i in res){
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022165417.vue

@@ -0,0 +1,287 @@
+
+<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" class="opt">
+          <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");
+var CiecleScan = require("../../public/static/CiecleScan");
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+    this.viewer = viewer;
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if(!this.viewer.entities.getById(res.userid))
+          this.viewer.entities.add({
+            id:res.userid,
+            position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+            point: {
+              pixelSize: 10,
+              color: Cesium.Color.YELLOW,
+            },
+            label:{
+              text:res.username,
+              font:'normal 14px MicroSoft YaHei',
+              color : Cesium.Color.fromCssColorString('#fff'),
+              outlineWidth: 2,
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            pixelOffset: new Cesium.Cartesian2(0, -9),
+            }
+          });
+          break;
+        case 1:
+          CiecleScan.addCircleWave(this.viewer,res,Cesium.Color.GREEN)
+          break;
+        default:
+         CiecleScan.addCircleWave(this.viewer,res,Cesium.Color.RED)
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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)
+      for(let i in res){
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022165751.vue

@@ -0,0 +1,288 @@
+
+<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" class="opt">
+          <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");
+var CiecleScan = require("../../public/static/CiecleScan");
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+    this.viewer = viewer;
+    console.log(CiecleScan)
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if(!this.viewer.entities.getById(res.userid))
+          this.viewer.entities.add({
+            id:res.userid,
+            position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+            point: {
+              pixelSize: 10,
+              color: Cesium.Color.YELLOW,
+            },
+            label:{
+              text:res.username,
+              font:'normal 14px MicroSoft YaHei',
+              color : Cesium.Color.fromCssColorString('#fff'),
+              outlineWidth: 2,
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            pixelOffset: new Cesium.Cartesian2(0, -9),
+            }
+          });
+          break;
+        case 1:
+          CiecleScan.addCircleWave(this.viewer,res,Cesium.Color.GREEN)
+          break;
+        default:
+         CiecleScan.addCircleWave(this.viewer,res,Cesium.Color.RED)
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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)
+      for(let i in res){
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022170315.vue

@@ -0,0 +1,287 @@
+
+<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" class="opt">
+          <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");
+import addCircleWave from '../../public/static/CiecleScan'
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+    this.viewer = viewer;
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if(!this.viewer.entities.getById(res.userid))
+          this.viewer.entities.add({
+            id:res.userid,
+            position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+            point: {
+              pixelSize: 10,
+              color: Cesium.Color.YELLOW,
+            },
+            label:{
+              text:res.username,
+              font:'normal 14px MicroSoft YaHei',
+              color : Cesium.Color.fromCssColorString('#fff'),
+              outlineWidth: 2,
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            pixelOffset: new Cesium.Cartesian2(0, -9),
+            }
+          });
+          break;
+        case 1:
+          addCircleWave(this.viewer,res,Cesium.Color.GREEN)
+          break;
+        default:
+         addCircleWave(this.viewer,res,Cesium.Color.RED)
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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)
+      for(let i in res){
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022171124.vue

@@ -0,0 +1,298 @@
+
+<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" class="opt">
+          <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");
+import addCircleWave from '../../public/static/CiecleScan'
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+    this.viewer = viewer;
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if(!this.viewer.entities.getById(res.userid))
+          this.viewer.entities.add({
+            id:res.userid,
+            position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+            point: {
+              pixelSize: 10,
+              color: Cesium.Color.YELLOW,
+            },
+            label:{
+              text:res.username,
+              font:'normal 14px MicroSoft YaHei',
+              color : Cesium.Color.fromCssColorString('#fff'),
+              outlineWidth: 2,
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            pixelOffset: new Cesium.Cartesian2(0, -9),
+            }
+          });
+          break;
+        case 1:
+          if(this.viewer.entities.getById(res.userid)){
+            this.viewer.entities.removeById(res.userid)
+            addCircleWave(this.viewer,res,Cesium.Color.GREEN)
+          }else{
+            addCircleWave(this.viewer,res,Cesium.Color.GREEN)
+          }
+  
+          break;
+        default:
+         if(this.viewer.entities.getById(res.userid)){
+            this.viewer.entities.removeById(res.userid)
+            addCircleWave(this.viewer,res,Cesium.Color.RED)
+          }else{
+            addCircleWave(this.viewer,res,Cesium.Color.RED)
+          }
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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)
+      for(let i in res){
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022171223.vue

@@ -0,0 +1,298 @@
+
+<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" class="opt">
+          <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");
+import addCircleWave from '../../public/static/CiecleScan'
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+    this.viewer = viewer;
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if(!this.viewer.entities.getById(res.userid))
+          this.viewer.entities.add({
+            id:res.userid,
+            position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+            point: {
+              pixelSize: 10,
+              color: Cesium.Color.YELLOW,
+            },
+            label:{
+              text:res.username,
+              font:'normal 14px MicroSoft YaHei',
+              color : Cesium.Color.fromCssColorString('#fff'),
+              outlineWidth: 2,
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            pixelOffset: new Cesium.Cartesian2(0, -9),
+            }
+          });
+          break;
+        case 1:
+          if(this.viewer.entities.getById(res.userid)){
+            this.viewer.entities.removeById(res.userid)
+            addCircleWave(this.viewer,res,Cesium.Color.GREEN)
+          }else{
+            addCircleWave(this.viewer,res,Cesium.Color.GREEN)
+          }
+
+          break;
+        default:
+         if(this.viewer.entities.getById(res.userid)){
+            this.viewer.entities.removeById(res.userid)
+            addCircleWave(this.viewer,res,Cesium.Color.RED)
+          }else{
+            addCircleWave(this.viewer,res,Cesium.Color.RED)
+          }
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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)
+      for(let i in res){
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022172054.vue

@@ -0,0 +1,304 @@
+
+<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" class="opt">
+          <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");
+import addCircleWave from "../../public/static/CiecleScan";
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction(function (movement) {
+      var pick = viewer.scene.pick(movement.position);
+      console.log(pick.id.id) 
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.viewer = viewer;
+
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if (!this.viewer.entities.getById(res.userid))
+            this.viewer.entities.add({
+              id: res.userid,
+              position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+              point: {
+                pixelSize: 10,
+                color: Cesium.Color.YELLOW,
+              },
+              label: {
+                text: res.username,
+                font: "normal 14px MicroSoft YaHei",
+                color: Cesium.Color.fromCssColorString("#fff"),
+                outlineWidth: 2,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                pixelOffset: new Cesium.Cartesian2(0, -9),
+              },
+            });
+          break;
+        case 1:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          }
+          break;
+        default:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          }
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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);
+      for (let i in res) {
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022172221.vue

@@ -0,0 +1,307 @@
+
+<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" class="opt">
+          <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");
+import addCircleWave from "../../public/static/CiecleScan";
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction(function (movement) {
+      var pick = viewer.scene.pick(movement.position);
+      if(pick.id.id){
+        console.log(pick.id.id) 
+      }
+      
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.viewer = viewer;
+
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if (!this.viewer.entities.getById(res.userid))
+            this.viewer.entities.add({
+              id: res.userid,
+              position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+              point: {
+                pixelSize: 10,
+                color: Cesium.Color.YELLOW,
+              },
+              label: {
+                text: res.username,
+                font: "normal 14px MicroSoft YaHei",
+                color: Cesium.Color.fromCssColorString("#fff"),
+                outlineWidth: 2,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                pixelOffset: new Cesium.Cartesian2(0, -9),
+              },
+            });
+          break;
+        case 1:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          }
+          break;
+        default:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          }
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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);
+      for (let i in res) {
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022172547.vue

@@ -0,0 +1,307 @@
+
+<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" class="opt">
+          <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");
+import addCircleWave from "../../public/static/CiecleScan";
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction(function (movement) {
+      var pick = viewer.scene.pick(movement.position);
+      if(Cesium.defined(pick) && pick.id.id){
+        console.log(pick.id.id) 
+      }
+      
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.viewer = viewer;
+
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if (!this.viewer.entities.getById(res.userid))
+            this.viewer.entities.add({
+              id: res.userid,
+              position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+              point: {
+                pixelSize: 10,
+                color: Cesium.Color.YELLOW,
+              },
+              label: {
+                text: res.username,
+                font: "normal 14px MicroSoft YaHei",
+                color: Cesium.Color.fromCssColorString("#fff"),
+                outlineWidth: 2,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                pixelOffset: new Cesium.Cartesian2(0, -9),
+              },
+            });
+          break;
+        case 1:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          }
+          break;
+        default:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          }
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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);
+      for (let i in res) {
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022173353.vue

@@ -0,0 +1,329 @@
+
+<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" class="opt">
+          <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 class="promsg">
+      <div class="promsg_bar">状态:<span>在线</span></div>
+      <div class="promsg_bar">状态:<span>在线</span></div>
+      <div class="promsg_bar">状态:<span>在线</span></div>
+      <div class="promsg_bar">状态:<span>在线</span></div>
+    </div>
+  </div>
+</template>
+<script>
+var Cesium = require("cesium/Cesium");
+var widgets = require("cesium/Widgets/widgets.css");
+import addCircleWave from "../../public/static/CiecleScan";
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction(movement=>{
+      var pick = viewer.scene.pick(movement.position);
+      if(Cesium.defined(pick) && pick.id.id){
+        console.log(pick.id.id) 
+      }
+      
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.viewer = viewer;
+
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if (!this.viewer.entities.getById(res.userid))
+            this.viewer.entities.add({
+              id: res.userid,
+              position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+              point: {
+                pixelSize: 10,
+                color: Cesium.Color.YELLOW,
+              },
+              label: {
+                text: res.username,
+                font: "normal 14px MicroSoft YaHei",
+                color: Cesium.Color.fromCssColorString("#fff"),
+                outlineWidth: 2,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                pixelOffset: new Cesium.Cartesian2(0, -9),
+              },
+            });
+          break;
+        case 1:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          }
+          break;
+        default:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          }
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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);
+      for (let i in res) {
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+  .promsg{
+     position: absolute;
+     right: 20px;
+     top: 20px;
+     box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    .promsg_bar{
+      width: 8vw;
+      height: 20px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022173546.vue

@@ -0,0 +1,332 @@
+
+<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" class="opt">
+          <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 class="promsg" v-show="promsg">
+      <div class="promsg_bar">状态:<span>在线</span></div>
+      <div class="promsg_bar">状态:<span>在线</span></div>
+      <div class="promsg_bar">状态:<span>在线</span></div>
+      <div class="promsg_bar">状态:<span>在线</span></div>
+    </div>
+  </div>
+</template>
+<script>
+var Cesium = require("cesium/Cesium");
+var widgets = require("cesium/Widgets/widgets.css");
+import addCircleWave from "../../public/static/CiecleScan";
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      promsg:false,
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction(movement=>{
+      var pick = viewer.scene.pick(movement.position);
+      if(Cesium.defined(pick) && pick.id.id){
+        console.log(pick.id.id) 
+        this.promsg=true
+      }
+      
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.viewer = viewer;
+
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if (!this.viewer.entities.getById(res.userid))
+            this.viewer.entities.add({
+              id: res.userid,
+              position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+              point: {
+                pixelSize: 10,
+                color: Cesium.Color.YELLOW,
+              },
+              label: {
+                text: res.username,
+                font: "normal 14px MicroSoft YaHei",
+                color: Cesium.Color.fromCssColorString("#fff"),
+                outlineWidth: 2,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                pixelOffset: new Cesium.Cartesian2(0, -9),
+              },
+            });
+          break;
+        case 1:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          }
+          break;
+        default:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          }
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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);
+      for (let i in res) {
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+  .promsg{
+     position: absolute;
+     right: 20px;
+     top: 20px;
+     box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    .promsg_bar{
+      color: #fff;
+      width: 8vw;
+      height: 20px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022173729.vue

@@ -0,0 +1,334 @@
+
+<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" class="opt">
+          <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 class="promsg" v-show="promsg">
+      <div class="promsg_bar">状态:<span>在线</span></div>
+      <div class="promsg_bar">状态:<span>在线</span></div>
+      <div class="promsg_bar">状态:<span>在线</span></div>
+      <div class="promsg_bar">状态:<span>在线</span></div>
+    </div>
+  </div>
+</template>
+<script>
+var Cesium = require("cesium/Cesium");
+var widgets = require("cesium/Widgets/widgets.css");
+import addCircleWave from "../../public/static/CiecleScan";
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      promsg: false,
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction((movement) => {
+      var pick = viewer.scene.pick(movement.position);
+      if (Cesium.defined(pick) && pick.id.id) {
+        console.log(pick.id.id);
+        this.promsg = true;
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.viewer = viewer;
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if (!this.viewer.entities.getById(res.userid))
+            this.viewer.entities.add({
+              id: res.userid,
+              position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+              point: {
+                pixelSize: 10,
+                color: Cesium.Color.YELLOW,
+              },
+              label: {
+                text: res.username,
+                font: "normal 14px MicroSoft YaHei",
+                color: Cesium.Color.fromCssColorString("#fff"),
+                outlineWidth: 2,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                pixelOffset: new Cesium.Cartesian2(0, -9),
+              },
+            });
+          break;
+        case 1:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          }
+          break;
+        default:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          }
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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);
+      for (let i in res) {
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+  .promsg {
+    position: absolute;
+    width: 8vw;
+    right: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    .promsg_bar {
+      color: #fff;
+      width: 100%;
+      height: 20px;
+      box-sizing: border-box;
+      padding: 10px 6px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022174347.vue

@@ -0,0 +1,339 @@
+
+<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" class="opt">
+          <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 class="promsg" v-show="promsg">
+      <div class="promsg_bar">状态:<span>在线</span></div>
+      <div class="promsg_bar">姓名:<span>{{msg[userid].username}}</span></div>
+      <div class="promsg_bar">疲劳度:<span>{{msg[userid].pld}}</span></div>
+      <div class="promsg_bar">收缩血压:<span>{{msg[userid].szxy}}</span></div>
+      <div class="promsg_bar">舒张血压:<span>{{msg[userid].ssxy}}</span></div>
+      <div class="promsg_bar">血氧浓度:<span>{{msg[userid].xynd}}</span></div>
+      <div class="promsg_bar">心跳频率:<span>{{msg[userid].xtpl}}</span></div>
+    </div>
+  </div>
+</template>
+<script>
+var Cesium = require("cesium/Cesium");
+var widgets = require("cesium/Widgets/widgets.css");
+import addCircleWave from "../../public/static/CiecleScan";
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      promsg: false,
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+      msg:[],
+      userid:1
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction((movement) => {
+      var pick = viewer.scene.pick(movement.position);
+      if (Cesium.defined(pick) && pick.id.id) {
+        this.userid = pick.id.id
+        this.promsg = true;
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.viewer = viewer;
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if (!this.viewer.entities.getById(res.userid))
+            this.viewer.entities.add({
+              id: res.userid,
+              position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+              point: {
+                pixelSize: 10,
+                color: Cesium.Color.YELLOW,
+              },
+              label: {
+                text: res.username,
+                font: "normal 14px MicroSoft YaHei",
+                color: Cesium.Color.fromCssColorString("#fff"),
+                outlineWidth: 2,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                pixelOffset: new Cesium.Cartesian2(0, -9),
+              },
+            });
+          break;
+        case 1:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          }
+          break;
+        default:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          }
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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);
+      this.msg = res;
+      for (let i in res) {
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+  .promsg {
+    position: absolute;
+    width: 8vw;
+    right: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    .promsg_bar {
+      color: #fff;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 10px 6px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022174447.vue

@@ -0,0 +1,365 @@
+
+<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" class="opt">
+          <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 class="promsg" v-show="promsg">
+      <div class="promsg_bar">状态:<span>在线</span></div>
+      <div class="promsg_bar">
+        姓名:<span>{{ msg[userid].username }}</span>
+      </div>
+      <div class="promsg_bar">
+        疲劳度:<span>{{ msg[userid].pld }}</span>
+      </div>
+      <div class="promsg_bar">
+        收缩血压:<span>{{ msg[userid].szxy }}</span>
+      </div>
+      <div class="promsg_bar">
+        舒张血压:<span>{{ msg[userid].ssxy }}</span>
+      </div>
+      <div class="promsg_bar">
+        血氧浓度:<span>{{ msg[userid].xynd }}</span>
+      </div>
+      <div class="promsg_bar">
+        心跳频率:<span>{{ msg[userid].xtpl }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+var Cesium = require("cesium/Cesium");
+var widgets = require("cesium/Widgets/widgets.css");
+import addCircleWave from "../../public/static/CiecleScan";
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      promsg: false,
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+      msg: [
+        {
+          bs: 200,
+          isrun: 0,
+          lat: 38.49372100830078,
+          lng: 106.24307250976562,
+          pld: 36,
+          ssxy: 72,
+          szxy: 110,
+          userid: 1941,
+          username: "孙亚飞",
+          xtpl: 94,
+          xynd: 98,
+        },
+      ],
+      userid: 1,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction((movement) => {
+      var pick = viewer.scene.pick(movement.position);
+      if (Cesium.defined(pick) && pick.id.id) {
+        this.userid = pick.id.id;
+        this.promsg = true;
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.viewer = viewer;
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if (!this.viewer.entities.getById(res.userid))
+            this.viewer.entities.add({
+              id: res.userid,
+              position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+              point: {
+                pixelSize: 10,
+                color: Cesium.Color.YELLOW,
+              },
+              label: {
+                text: res.username,
+                font: "normal 14px MicroSoft YaHei",
+                color: Cesium.Color.fromCssColorString("#fff"),
+                outlineWidth: 2,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                pixelOffset: new Cesium.Cartesian2(0, -9),
+              },
+            });
+          break;
+        case 1:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          }
+          break;
+        default:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          }
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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);
+      this.msg = res;
+      for (let i in res) {
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+  .promsg {
+    position: absolute;
+    width: 8vw;
+    right: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    .promsg_bar {
+      color: #fff;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 10px 6px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022174506.vue

@@ -0,0 +1,365 @@
+
+<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" class="opt">
+          <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 class="promsg" v-show="promsg">
+      <div class="promsg_bar">状态:<span>在线</span></div>
+      <div class="promsg_bar">
+        姓名:<span>{{ msg[userid].username }}</span>
+      </div>
+      <div class="promsg_bar">
+        疲劳度:<span>{{ msg[userid].pld }}</span>
+      </div>
+      <div class="promsg_bar">
+        收缩血压:<span>{{ msg[userid].szxy }}</span>
+      </div>
+      <div class="promsg_bar">
+        舒张血压:<span>{{ msg[userid].ssxy }}</span>
+      </div>
+      <div class="promsg_bar">
+        血氧浓度:<span>{{ msg[userid].xynd }}</span>
+      </div>
+      <div class="promsg_bar">
+        心跳频率:<span>{{ msg[userid].xtpl }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+var Cesium = require("cesium/Cesium");
+var widgets = require("cesium/Widgets/widgets.css");
+import addCircleWave from "../../public/static/CiecleScan";
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      promsg: false,
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+      msg: [
+        {
+          bs: 200,
+          isrun: 0,
+          lat: 38.49372100830078,
+          lng: 106.24307250976562,
+          pld: 36,
+          ssxy: 72,
+          szxy: 110,
+          userid: 1941,
+          username: "孙亚飞",
+          xtpl: 94,
+          xynd: 98,
+        },
+      ],
+      userid: 0,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction((movement) => {
+      var pick = viewer.scene.pick(movement.position);
+      if (Cesium.defined(pick) && pick.id.id) {
+        this.userid = pick.id.id;
+        this.promsg = true;
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.viewer = viewer;
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if (!this.viewer.entities.getById(res.userid))
+            this.viewer.entities.add({
+              id: res.userid,
+              position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+              point: {
+                pixelSize: 10,
+                color: Cesium.Color.YELLOW,
+              },
+              label: {
+                text: res.username,
+                font: "normal 14px MicroSoft YaHei",
+                color: Cesium.Color.fromCssColorString("#fff"),
+                outlineWidth: 2,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                pixelOffset: new Cesium.Cartesian2(0, -9),
+              },
+            });
+          break;
+        case 1:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          }
+          break;
+        default:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          }
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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);
+      this.msg = res;
+      for (let i in res) {
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+  .promsg {
+    position: absolute;
+    width: 8vw;
+    right: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    .promsg_bar {
+      color: #fff;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 10px 6px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022174723.vue

@@ -0,0 +1,367 @@
+
+<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" class="opt">
+          <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 class="promsg" v-show="promsg">
+      <div class="promsg_bar">状态:<span>在线</span></div>
+      <div class="promsg_bar">
+        姓名:<span>{{ msg[userid].username }}</span>
+      </div>
+      <div class="promsg_bar">
+        疲劳度:<span>{{ msg[userid].pld }}</span>
+      </div>
+      <div class="promsg_bar">
+        收缩血压:<span>{{ msg[userid].szxy }}</span>
+      </div>
+      <div class="promsg_bar">
+        舒张血压:<span>{{ msg[userid].ssxy }}</span>
+      </div>
+      <div class="promsg_bar">
+        血氧浓度:<span>{{ msg[userid].xynd }}</span>
+      </div>
+      <div class="promsg_bar">
+        心跳频率:<span>{{ msg[userid].xtpl }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+var Cesium = require("cesium/Cesium");
+var widgets = require("cesium/Widgets/widgets.css");
+import addCircleWave from "../../public/static/CiecleScan";
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      promsg: false,
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+      msg: [
+        {
+          bs: 200,
+          isrun: 0,
+          lat: 38.49372100830078,
+          lng: 106.24307250976562,
+          pld: 36,
+          ssxy: 72,
+          szxy: 110,
+          userid: 1941,
+          username: "孙亚飞",
+          xtpl: 94,
+          xynd: 98,
+        },
+      ],
+      userid: 0,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction((movement) => {
+      var pick = viewer.scene.pick(movement.position);
+      if (Cesium.defined(pick) && pick.id.id) {
+        this.userid = pick.id.id;
+        this.$nextTick(()=>{
+          this.promsg = true;
+        })
+        
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.viewer = viewer;
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if (!this.viewer.entities.getById(res.userid))
+            this.viewer.entities.add({
+              id: res.userid,
+              position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+              point: {
+                pixelSize: 10,
+                color: Cesium.Color.YELLOW,
+              },
+              label: {
+                text: res.username,
+                font: "normal 14px MicroSoft YaHei",
+                color: Cesium.Color.fromCssColorString("#fff"),
+                outlineWidth: 2,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                pixelOffset: new Cesium.Cartesian2(0, -9),
+              },
+            });
+          break;
+        case 1:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          }
+          break;
+        default:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          }
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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) {
+      let res = JSON.parse(e.data);
+      console.log(res);
+      this.msg = res;
+      for (let i in res) {
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+  .promsg {
+    position: absolute;
+    width: 8vw;
+    right: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    .promsg_bar {
+      color: #fff;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 10px 6px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022175000.vue

@@ -0,0 +1,369 @@
+
+<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" class="opt">
+          <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 class="promsg" v-show="promsg">
+      <div class="promsg_bar">状态:<span>在线</span></div>
+      <div class="promsg_bar">
+        姓名:<span>{{ msg[userid].username }}</span>
+      </div>
+      <div class="promsg_bar">
+        疲劳度:<span>{{ msg[userid].pld }}</span>
+      </div>
+      <div class="promsg_bar">
+        收缩血压:<span>{{ msg[userid].szxy }}</span>
+      </div>
+      <div class="promsg_bar">
+        舒张血压:<span>{{ msg[userid].ssxy }}</span>
+      </div>
+      <div class="promsg_bar">
+        血氧浓度:<span>{{ msg[userid].xynd }}</span>
+      </div>
+      <div class="promsg_bar">
+        心跳频率:<span>{{ msg[userid].xtpl }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+var Cesium = require("cesium/Cesium");
+var widgets = require("cesium/Widgets/widgets.css");
+import addCircleWave from "../../public/static/CiecleScan";
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      promsg: false,
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+      msg: [
+        {
+          bs: 200,
+          isrun: 0,
+          lat: 38.49372100830078,
+          lng: 106.24307250976562,
+          pld: 36,
+          ssxy: 72,
+          szxy: 110,
+          userid: 1941,
+          username: "孙亚飞",
+          xtpl: 94,
+          xynd: 98,
+        },
+      ],
+      userid: 0,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction((movement) => {
+      var pick = viewer.scene.pick(movement.position);
+      if (Cesium.defined(pick) && pick.id.id) {
+        this.userid = pick.id.id;
+        this.$nextTick(()=>{
+          // this.promsg = true;
+          console.log(this.userid)
+          console.log(this.msg)
+        })
+
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.viewer = viewer;
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if (!this.viewer.entities.getById(res.userid))
+            this.viewer.entities.add({
+              id: res.userid,
+              position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+              point: {
+                pixelSize: 10,
+                color: Cesium.Color.YELLOW,
+              },
+              label: {
+                text: res.username,
+                font: "normal 14px MicroSoft YaHei",
+                color: Cesium.Color.fromCssColorString("#fff"),
+                outlineWidth: 2,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                pixelOffset: new Cesium.Cartesian2(0, -9),
+              },
+            });
+          break;
+        case 1:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          }
+          break;
+        default:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          }
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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) {
+      let res = JSON.parse(e.data);
+      console.log(res);
+      this.msg = res;
+      for (let i in res) {
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+  .promsg {
+    position: absolute;
+    width: 8vw;
+    right: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    .promsg_bar {
+      color: #fff;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 10px 6px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022175047.vue

@@ -0,0 +1,369 @@
+
+<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" class="opt">
+          <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 class="promsg" v-if="promsg">
+      <div class="promsg_bar">状态:<span>在线</span></div>
+      <div class="promsg_bar">
+        姓名:<span>{{ msg[userid].username }}</span>
+      </div>
+      <div class="promsg_bar">
+        疲劳度:<span>{{ msg[userid].pld }}</span>
+      </div>
+      <div class="promsg_bar">
+        收缩血压:<span>{{ msg[userid].szxy }}</span>
+      </div>
+      <div class="promsg_bar">
+        舒张血压:<span>{{ msg[userid].ssxy }}</span>
+      </div>
+      <div class="promsg_bar">
+        血氧浓度:<span>{{ msg[userid].xynd }}</span>
+      </div>
+      <div class="promsg_bar">
+        心跳频率:<span>{{ msg[userid].xtpl }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+var Cesium = require("cesium/Cesium");
+var widgets = require("cesium/Widgets/widgets.css");
+import addCircleWave from "../../public/static/CiecleScan";
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      promsg: false,
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+      msg: [
+        {
+          bs: 200,
+          isrun: 0,
+          lat: 38.49372100830078,
+          lng: 106.24307250976562,
+          pld: 36,
+          ssxy: 72,
+          szxy: 110,
+          userid: 1941,
+          username: "孙亚飞",
+          xtpl: 94,
+          xynd: 98,
+        },
+      ],
+      userid: 0,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction((movement) => {
+      var pick = viewer.scene.pick(movement.position);
+      if (Cesium.defined(pick) && pick.id.id) {
+        this.userid = pick.id.id;
+        this.$nextTick(()=>{
+          // this.promsg = true;
+          console.log(this.userid)
+          console.log(this.msg)
+        })
+
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.viewer = viewer;
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if (!this.viewer.entities.getById(res.userid))
+            this.viewer.entities.add({
+              id: res.userid,
+              position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+              point: {
+                pixelSize: 10,
+                color: Cesium.Color.YELLOW,
+              },
+              label: {
+                text: res.username,
+                font: "normal 14px MicroSoft YaHei",
+                color: Cesium.Color.fromCssColorString("#fff"),
+                outlineWidth: 2,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                pixelOffset: new Cesium.Cartesian2(0, -9),
+              },
+            });
+          break;
+        case 1:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          }
+          break;
+        default:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          }
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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) {
+      let res = JSON.parse(e.data);
+      console.log(res);
+      this.msg = res;
+      for (let i in res) {
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+  .promsg {
+    position: absolute;
+    width: 8vw;
+    right: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    .promsg_bar {
+      color: #fff;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 10px 6px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022175113.vue

@@ -0,0 +1,367 @@
+
+<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" class="opt">
+          <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 class="promsg" v-if="promsg">
+      <div class="promsg_bar">状态:<span>在线</span></div>
+      <div class="promsg_bar">
+        姓名:<span>{{ msg[userid].username }}</span>
+      </div>
+      <div class="promsg_bar">
+        疲劳度:<span>{{ msg[userid].pld }}</span>
+      </div>
+      <div class="promsg_bar">
+        收缩血压:<span>{{ msg[userid].szxy }}</span>
+      </div>
+      <div class="promsg_bar">
+        舒张血压:<span>{{ msg[userid].ssxy }}</span>
+      </div>
+      <div class="promsg_bar">
+        血氧浓度:<span>{{ msg[userid].xynd }}</span>
+      </div>
+      <div class="promsg_bar">
+        心跳频率:<span>{{ msg[userid].xtpl }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+var Cesium = require("cesium/Cesium");
+var widgets = require("cesium/Widgets/widgets.css");
+import addCircleWave from "../../public/static/CiecleScan";
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      promsg: false,
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+      msg: [
+        {
+          bs: 200,
+          isrun: 0,
+          lat: 38.49372100830078,
+          lng: 106.24307250976562,
+          pld: 36,
+          ssxy: 72,
+          szxy: 110,
+          userid: 1941,
+          username: "孙亚飞",
+          xtpl: 94,
+          xynd: 98,
+        },
+      ],
+      userid: 0,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction((movement) => {
+      var pick = viewer.scene.pick(movement.position);
+      if (Cesium.defined(pick) && pick.id.id) {
+        this.userid = pick.id.id;
+        this.$nextTick(()=>{
+          this.promsg = true;
+        })
+
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.viewer = viewer;
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if (!this.viewer.entities.getById(res.userid))
+            this.viewer.entities.add({
+              id: res.userid,
+              position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+              point: {
+                pixelSize: 10,
+                color: Cesium.Color.YELLOW,
+              },
+              label: {
+                text: res.username,
+                font: "normal 14px MicroSoft YaHei",
+                color: Cesium.Color.fromCssColorString("#fff"),
+                outlineWidth: 2,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                pixelOffset: new Cesium.Cartesian2(0, -9),
+              },
+            });
+          break;
+        case 1:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          }
+          break;
+        default:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          }
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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) {
+      let res = JSON.parse(e.data);
+      console.log(res);
+      this.msg = res;
+      for (let i in res) {
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+  .promsg {
+    position: absolute;
+    width: 8vw;
+    right: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    .promsg_bar {
+      color: #fff;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 10px 6px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

.history/src/views/monitor_20201022175647.vue

@@ -0,0 +1,370 @@
+
+<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" class="opt">
+          <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 class="promsg" v-show="promsg">
+      <div class="promsg_bar">状态:<span>在线</span></div>
+      <div class="promsg_bar">
+        姓名:<span>{{ msg[i].username }}</span>
+      </div>
+      <div class="promsg_bar">
+        疲劳度:<span>{{ msg[i].pld }}</span>
+      </div>
+      <div class="promsg_bar">
+        收缩血压:<span>{{ msg[i].szxy }}</span>
+      </div>
+      <div class="promsg_bar">
+        舒张血压:<span>{{ msg[i].ssxy }}</span>
+      </div>
+      <div class="promsg_bar">
+        血氧浓度:<span>{{ msg[i].xynd }}</span>
+      </div>
+      <div class="promsg_bar">
+        心跳频率:<span>{{ msg[i].xtpl }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+var Cesium = require("cesium/Cesium");
+var widgets = require("cesium/Widgets/widgets.css");
+import addCircleWave from "../../public/static/CiecleScan";
+export default {
+  name: "cesiumPage",
+  data() {
+    return {
+      promsg: false,
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+      msg: [
+        {
+          bs: 200,
+          isrun: 0,
+          lat: 38.49372100830078,
+          lng: 106.24307250976562,
+          pld: 36,
+          ssxy: 72,
+          szxy: 110,
+          userid: 1941,
+          username: "孙亚飞",
+          xtpl: 94,
+          xynd: 98,
+        },
+      ],
+      i: 0,
+    };
+  },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  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.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction((movement) => {
+      var pick = viewer.scene.pick(movement.position);
+      if (Cesium.defined(pick) && pick.id.id) {
+        for (let i in this.msg) {
+          if (pick.id.id == this.msg[i].userid) {
+            this.i = i;
+          }
+        }
+        this.$nextTick(() => {
+          this.promsg = true;
+        });
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.viewer = viewer;
+  },
+  methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if (!this.viewer.entities.getById(res.userid))
+            this.viewer.entities.add({
+              id: res.userid,
+              position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+              point: {
+                pixelSize: 10,
+                color: Cesium.Color.YELLOW,
+              },
+              label: {
+                text: res.username,
+                font: "normal 14px MicroSoft YaHei",
+                color: Cesium.Color.fromCssColorString("#fff"),
+                outlineWidth: 2,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                pixelOffset: new Cesium.Cartesian2(0, -9),
+              },
+            });
+          break;
+        case 1:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          }
+          break;
+        default:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          }
+          break;
+      }
+    },
+    addRain() {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
+    },
+    flyto() {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          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) {
+      let res = JSON.parse(e.data);
+      console.log(res);
+      this.msg = res;
+      for (let i in res) {
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    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);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+  .promsg {
+    position: absolute;
+    width: 8vw;
+    right: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    .promsg_bar {
+      color: #fff;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 10px 6px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+</style>
+

public/static/CiecleScan.js

@@ -1,10 +1,10 @@
 var Cesium = require("cesium/Cesium");
-export default{
-    addCircleWave(viewer,msgarr,color) {
+export default
+   function 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 ),
+        position: Cesium.Cartesian3.fromDegrees(msgarr.lng ,msgarr.lat, 0 ),
         ellipse: {
           height: 0,
           semiMinorAxis: 15,
@@ -30,7 +30,7 @@ export default{
           },
       });
     }
-}
+
 export class CircleWaveMaterialProperty {
     constructor(options) {
         options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT);

src/views/monitor.vue

@@ -7,27 +7,79 @@
         <span class="el-dropdown-link">
           下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
         </span>
-        <el-dropdown-menu slot="dropdown">
+        <el-dropdown-menu slot="dropdown" class="opt">
           <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 class="promsg" v-show="promsg">
+      <div class="promsg_bar">状态:<span>在线</span></div>
+      <div class="promsg_bar">
+        姓名:<span>{{ msg[i].username }}</span>
+      </div>
+      <div class="promsg_bar">
+        疲劳度:<span>{{ msg[i].pld }}</span>
+      </div>
+      <div class="promsg_bar">
+        收缩血压:<span>{{ msg[i].szxy }}</span>
+      </div>
+      <div class="promsg_bar">
+        舒张血压:<span>{{ msg[i].ssxy }}</span>
+      </div>
+      <div class="promsg_bar">
+        血氧浓度:<span>{{ msg[i].xynd }}</span>
+      </div>
+      <div class="promsg_bar">
+        心跳频率:<span>{{ msg[i].xtpl }}</span>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 var Cesium = require("cesium/Cesium");
 var widgets = require("cesium/Widgets/widgets.css");
+import addCircleWave from "../../public/static/CiecleScan";
 export default {
   name: "cesiumPage",
   data() {
     return {
+      promsg: false,
+      labelEntities: [],
+      weather: null,
       publicPath: process.env.BASE_URL,
-      initPosition: [106.0231304, 37.73323706, 0],
       viewer: null,
+      msg: [
+        {
+          bs: 200,
+          isrun: 0,
+          lat: 38.49372100830078,
+          lng: 106.24307250976562,
+          pld: 36,
+          ssxy: 72,
+          szxy: 110,
+          userid: 1941,
+          username: "孙亚飞",
+          xtpl: 94,
+          xynd: 98,
+        },
+      ],
+      i: 0,
     };
   },
+  created() {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed() {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
   mounted() {
     var viewer = new Cesium.Viewer("cesiumContainer", {
       animation: false, //是否显示动画控件
@@ -53,8 +105,8 @@ export default {
     viewer.scene.camera.setView({
       // 初始化相机经纬度
       destination: new Cesium.Cartesian3.fromDegrees(
-        106.0231304,
-        37.73323706,
+        106.24307250976562,
+        38.49372100830078,
         2000
       ),
       orientation: {
@@ -63,19 +115,80 @@ export default {
         roll: 0,
       },
     });
+
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction((movement) => {
+      var pick = viewer.scene.pick(movement.position);
+      if (Cesium.defined(pick) && pick.id.id) {
+        for (let i in this.msg) {
+          if (pick.id.id == this.msg[i].userid) {
+            this.i = i;
+          }
+        }
+        this.$nextTick(() => {
+          this.promsg = true;
+        });
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     this.viewer = viewer;
   },
   methods: {
+    addpoint(res) {
+      switch (res.isrun) {
+        case 0:
+          if (!this.viewer.entities.getById(res.userid))
+            this.viewer.entities.add({
+              id: res.userid,
+              position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+              point: {
+                pixelSize: 10,
+                color: Cesium.Color.YELLOW,
+              },
+              label: {
+                text: res.username,
+                font: "normal 14px MicroSoft YaHei",
+                color: Cesium.Color.fromCssColorString("#fff"),
+                outlineWidth: 2,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                pixelOffset: new Cesium.Cartesian2(0, -9),
+              },
+            });
+          break;
+        case 1:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          }
+          break;
+        default:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          }
+          break;
+      }
+    },
     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;
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // 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 加载宁夏地图
@@ -84,38 +197,66 @@ export default {
         Cesium.GeoJsonDataSource.load(
           `${this.publicPath}static/mapgeoJsonnx.json`,
           {
-            stroke: Cesium.Color.RAD,
+            stroke: Cesium.Color.green,
             fill: Cesium.Color.TRANSPARENT,
             strokeWidth: 3,
             markerSymbol: "?",
           }
         )
       );
+      promise.then((dataSource) => {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          // for (let i = 0; i < entities.length; i++) {
+          //   entities[i].polygon.outline = false;
+          // }
+        }
+      });
     },
     flyto() {
       this.viewer.camera.flyTo({
-        destination: Cesium.Cartesian3.fromDegrees(106.0231304,
-        37.73323706,
-        2000),
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          2000
+        ),
         //duration:5, // 设置飞行持续时间，默认会根据距离来计算
         complete: function () {
-            // 到达位置后执行的回调函数
-            console.log('到达目的地');
+          // 到达位置后执行的回调函数
+          console.log("到达目的地");
         },
         cancle: function () {
-            // 如果取消飞行则会调用此函数
-            console.log('飞行取消')
+          // 如果取消飞行则会调用此函数
+          console.log("飞行取消");
         },
         pitchAdjustHeight: -90, // 如果摄像机飞越高于该值，则调整俯仰俯仰的俯仰角度，并将地球保持在视口中。
-        maximumHeight:5000, // 相机最大飞行高度
+        maximumHeight: 5000, // 相机最大飞行高度
       });
     },
     handleCommand(command) {
       switch (command) {
-        case 'a':
+        case "a":
           this.addRain();
           break;
-        case 'b':
+        case "b":
           this.geoJSON();
           break;
         default:
@@ -154,9 +295,12 @@ export default {
     },
     //接收后端返回的数据，可以根据需要进行处理
     websocketonmessage(e) {
-      var vm = this;
       let res = JSON.parse(e.data);
       console.log(res);
+      this.msg = res;
+      for (let i in res) {
+        this.addpoint(res[i]);
+      }
     },
     //连接建立失败重连
     websocketonerror(e) {
@@ -189,7 +333,38 @@ body,
     left: 20px;
     top: 20px;
     background-color: rgba(0, 0, 0, 0.5);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
   }
+  .promsg {
+    position: absolute;
+    width: 8vw;
+    right: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    .promsg_bar {
+      color: #fff;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 10px 6px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
 }
 </style>