提交

src/components/supermap-2.5d.vue

@@ -1,8 +1,7 @@
 <template>
-    <div id="cesium-container" style="width: 100%; height: 100%;background: none;">
+    <div v-bind:id="mapDivId" ref="map" style="width: 100%; height: 100%;background: none;">
 
     </div>
-
 </template>
 <script>
   import {
@@ -24,14 +23,16 @@
         aac:null,//定时
         /*************************原地图属性*********************/
         isEditableLayers: false, //绘图控件
-
+        mapDivId: 'cesium-container',
         /*************************原地图属性*********************/
       }
 		},
 		watch: {
     },
 		mounted() {
-      this.viewer = new Cesium.Viewer('cesium-container')
+      let that = this
+      that.mapDivId = that.mapDiv == null ? 'cesium-container':that.mapDiv;
+      that.viewer = new Cesium.Viewer(that.mapDivId)
       //添加SuperMap iServer发布的影像服务
       // var layer = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
       //   url: 'http://121.36.228.94:8090/iserver/services/3D-sipingchangjing/rest/realspace'
@@ -41,10 +42,10 @@
       //   url: 'http://121.36.228.94:8090/iserver/services/map-spyx4326/rest/maps/dem'
       // }));
 
-      this.scene = this.viewer.scene;
-      this.scene.lightSource.ambientLightColor = new Cesium.Color(0.65, 0.65, 0.65, 1);
+      that.scene = that.viewer.scene;
+      that.scene.lightSource.ambientLightColor = new Cesium.Color(0.65, 0.65, 0.65, 1);
       var urlStr = 'http://121.36.228.94:8090/iserver/services/3D-sipingchangjing/rest/realspace';
-      this.scene.open(urlStr);
+      that.scene.open(urlStr);
 
       //将三维球定位到指定位置，camera是相机，是当前视野范围相机
       //destination是相机的目标位置，参数是经度、纬度、高度
@@ -52,7 +53,7 @@
       //    heading-代表镜头左右方向,正值为右,负值为左
       //    pitch-代表镜头上下方向,正值为上,负值为下.
       //    roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
-      this.viewer.camera.flyTo({
+      that.viewer.camera.flyTo({
         destination: Cesium.Cartesian3.fromDegrees(124.5465087890625, 43.0869197845459, 25000),
         orientation: {
           heading :  Cesium.Math.toRadians(348.4202942851978),
@@ -65,7 +66,9 @@
         }
       });
     },
-		props: {},
+		props: {
+      mapDiv:null
+    },
 		methods: {
       //移除之前添加的点
       clearM(){
@@ -76,9 +79,10 @@
        */
       setMarkers(makerList){
         let that = this;
-        that.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);
+        that.handler = new Cesium.ScreenSpaceEventHandler(that.scene.canvas);
         clearInterval(that.aac);
         for (let i in makerList) {
+
           let longitude = makerList[i].lng;
           let latitude = makerList[i].lat;
           that.viewer.entities.add({
@@ -107,11 +111,67 @@
         let that = this;
         that.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);
         clearInterval(that.aac);
+        that.scene = that.viewer.scene;
+       //  let carmodel1;
+        let carmodel=[];
+       //
+       //  let carmodel2;
+       //  let carmodel3;
+       //
+       //  console.log("tianjia")
+       //
+       // carmodel1 =that.viewer.entities.add({
+       //    position: Cesium.Cartesian3.fromDegrees(123.853741,43.469578),
+       //    ellipse: {
+       //      semiMinorAxis:3000,
+       //      semiMajorAxis: 3000,
+       //      height: 0.0,
+       //      material: Cesium.Color.RED.withAlpha(0.5),
+       //      outline: true,
+       //      outlineColor: Cesium.Color.BLUE.withAlpha(1),
+       //      outlineWidth: 10,
+       //      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+       //    },
+       //
+       //  });
+       //
+       //   carmodel2= that.viewer.entities.add({
+       //    position: Cesium.Cartesian3.fromDegrees(124.461389, 43.026945),
+       //    ellipse: {
+       //      semiMinorAxis:6000,
+       //      semiMajorAxis:6000,
+       //      material: Cesium.Color.GREEN.withAlpha(1),
+       //      outline: true,
+       //      outlineColor: Cesium.Color.BLUE.withAlpha(1),
+       //      outlineWidth: 10,
+       //      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+       //    },
+       //
+       //  });
+       //
+       //  carmodel3= that.viewer.entities.add({
+       //    position: Cesium.Cartesian3.fromDegrees(123.805063, 43.720459),
+       //    ellipse: {
+       //      semiMinorAxis: 9000,
+       //      semiMajorAxis:9000,
+       //      material: Cesium.Color.BLACK.withAlpha(1),
+       //      outline: true,
+       //      outlineColor: Cesium.Color.BLUE.withAlpha(1),
+       //      outlineWidth: 10,
+       //      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+       //    },
+       //
+       //  });
+       //
+       //  console.log( carmodel2)
+
+
         for (let i in makerList) {
           let longitude = makerList[i].lng;
           let latitude = makerList[i].lat;
-          that.viewer.entities.add({
-            name:"",
+          console.log(longitude)
+          console.log(latitude)
+          carmodel[i] = that.viewer.entities.add({
             position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
             billboard: {
               image: iconList[makerList[i].icon],
@@ -120,21 +180,25 @@
               heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
               disableDepthTestDistance:Number.POSITIVE_INFINITY
             },
-            description: makerList[i].bindPopupHtml,
-            click: makerList[i].click,
-            parameter: makerList[i].parameter,
-            ellipse: {
+            ellipse:{
+              show: true,
               semiMinorAxis:makerList[i].radius,
               semiMajorAxis: makerList[i].radius,
-              height: 0.0,
+              height: 2.0,
               material: Cesium.Color.RED.withAlpha(0),
               outline: true,
               outlineColor: Cesium.Color.BLUE.withAlpha(0.5),
               outlineWidth: 2,
-              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+              // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
             },
+            description: makerList[i].bindPopupHtml,
+            click: makerList[i].click,
+            parameter: makerList[i].parameter,
           });
         }
+
+
+
         that.viewer.scene.globe.depthTestAgainstTerrain=false;
         that.createLeftClickDescription();
         that.createRightClickDescription();

src/views/monitor.vue

@@ -701,8 +701,8 @@ export default {
           }
           setTimeout(() => {
             that.$refs.supermap.clearM()
-            that.$refs.supermap.setMarkers(this.cameraMarkersList)
-          }, 3000)
+            that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
+          }, 5000)
         }
       })
     },
@@ -780,8 +780,8 @@ export default {
           }
           setTimeout(() => {
             that.$refs.supermap.clearM()
-            that.$refs.supermap.setMarkers(this.cameraMarkersList)
-          }, 1000)
+            that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
+          }, 3000)
         }
       })
     },