数字资源 可视化 地图

src/components/supermap-2.5d.vue

@@ -0,0 +1,275 @@
+<template>
+    <div id="cesium-container" style="width: 100%; height: 100%;background: none;">
+
+    </div>
+
+</template>
+<script>
+  import {
+    iconList,
+  } from '@/api/components/supermap.js'
+	export default {
+		name: 'sookaSuperMap',
+		data() {
+			return {
+        viewer:null,
+        scene:null,
+        handler:null,
+
+        pick:null,
+        back_position:null,
+        content:null,
+        stkTerrainProvider:null,
+
+        aac:null,//定时
+        /*************************原地图属性*********************/
+        isEditableLayers: false, //绘图控件
+
+        /*************************原地图属性*********************/
+      }
+		},
+		watch: {
+    },
+		mounted() {
+      this.viewer = new Cesium.Viewer('cesium-container')
+      //添加SuperMap iServer发布的影像服务
+      // var layer = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
+      //   url: 'http://121.36.228.94:8090/iserver/services/3D-sipingchangjing/rest/realspace'
+      // }));
+      // //添加SuperMap iServer发布的影像服务
+      // var layer1 = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
+      //   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);
+      var urlStr = 'http://121.36.228.94:8090/iserver/services/3D-sipingchangjing/rest/realspace';
+      this.scene.open(urlStr);
+
+      //将三维球定位到指定位置，camera是相机，是当前视野范围相机
+      //destination是相机的目标位置，参数是经度、纬度、高度
+      //orientation是相机朝向
+      //    heading-代表镜头左右方向,正值为右,负值为左
+      //    pitch-代表镜头上下方向,正值为上,负值为下.
+      //    roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(124.5465087890625, 43.0869197845459, 25000),
+        orientation: {
+          heading :  Cesium.Math.toRadians(348.4202942851978),
+          pitch : Cesium.Math.toRadians(-30.74026687972041),
+          roll : Cesium.Math.toRadians(0)
+        },
+        complete:function callback() {
+          // 定位完成之后的回调函数
+
+        }
+      });
+    },
+		props: {},
+		methods: {
+      //移除之前添加的点
+      clearM(){
+        this.viewer.entities.removeAll();
+      },
+      /**
+       * 地图落点
+       */
+      setMarkers(makerList){
+        let that = this;
+        that.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);
+        clearInterval(that.aac);
+        for (let i in makerList) {
+          let longitude = makerList[i].lng;
+          let latitude = makerList[i].lat;
+          that.viewer.entities.add({
+            name:"",
+            position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
+            billboard: {
+              image: iconList[makerList[i].icon],
+              width: 48,
+              height: 48,
+              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+              disableDepthTestDistance:Number.POSITIVE_INFINITY
+            },
+            description: makerList[i].bindPopupHtml,
+            click: makerList[i].click,
+            parameter: makerList[i].parameter,
+          });
+        }
+        that.viewer.scene.globe.depthTestAgainstTerrain=false;
+        that.createLeftClickDescription();
+        that.createRightClickDescription();
+      },
+      /**
+       *鼠标左击事件是原来的气泡
+       */
+      createLeftClickDescription() {
+        let that = this;
+        that.handler.setInputAction(function (movement) {
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+      },
+      /**
+       * 地图落点(传感器)
+       */
+      setMarkers_cgq(makerList){
+        let that = this;
+        that.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);
+
+        for (let i in makerList) {
+          let longitude = makerList[i].lng;
+          let latitude = makerList[i].lat;
+          that.viewer.entities.add({
+            name:"",
+            position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
+            billboard: {
+              image: iconList[makerList[i].icon],
+              width: 48,
+              height: 48,
+              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+              disableDepthTestDistance:Number.POSITIVE_INFINITY
+            },
+            description: makerList[i].bindPopupHtml,
+            click: makerList[i].click,
+            parameter: makerList[i].parameter,
+          });
+        }
+        that.viewer.scene.globe.depthTestAgainstTerrain=false;
+        that.createLeftClickDescription_cgq();
+      },
+      /**
+       *鼠标左击事件是原来的气泡(传感器)
+       */
+      createLeftClickDescription_cgq() {
+        let that = this;
+        clearInterval(that.aac);
+        that.handler.setInputAction(function (movement) {
+          that.aac = setInterval(function (){
+            let color = "green";
+            let value = Math.random();
+            let up = "▲";
+            let down = "▼";
+            if(value>0.5){
+              color = "red";
+              value = value +""+ up;
+            }else{
+              value = value +""+ down;
+            }
+            let html = "<span style='color:"+color+"'>当前传感器数值:"+value+"</span>";
+            window.parent.frames[0].document.querySelector(".cesium-infoBox-description").innerHTML = html;
+          },1000);
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+      },
+      /**
+       *鼠标右击事件是原来的点击
+       */
+      createRightClickDescription() {
+        let that = this;
+        that.handler.setInputAction(function (movement) {
+          // 监听鼠标的当前位置坐标，然后根据当前坐标去动态更新气泡窗口div的显示位置；
+          that.pick = that.viewer.scene.pick(movement.position);
+          if (that.pick && that.pick) {
+            let id = Cesium.defaultValue(that.viewer.scene.pick(movement.position).id, that.viewer.scene.pick(movement.position).primitive.id);
+            let clickName = id._click;
+            that.$emit(clickName, id._parameter)
+          }
+        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+      },
+      /**
+       * 落点定位
+       */
+      dropLocation(lat, lng) {
+        this.viewer.camera.flyTo({
+          destination: Cesium.Cartesian3.fromDegrees(lng, lat, 3000),
+        });
+      },
+    }
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '@/assets/styles/base.scss';
+
+  input[type=checkbox] {
+    margin: 0px 4px 0 0px;
+  }
+
+  label {
+    display: inline-block;
+  }
+
+  .param-container {
+    border: none;
+  }
+
+  .titleBox {
+    margin-bottom: 0px;
+  }
+
+  .sm-div-graphic {
+    position: absolute;
+    color: #fff;
+    font-size: 14px;
+  }
+
+  #test .divpoint {
+    background: url(../../public/SuperMap3D/examples/webgl/images/qipao1.png) no-repeat;
+    background-size: cover;
+    width: 128px;
+    height: 216px;
+  }
+
+  #test3 .divpoint {
+    background: url(../../public/SuperMap3D/examples/webgl/images/qipao1.png) no-repeat;
+    background-size: cover;
+    width: 230px;
+    height: 150px;
+  }
+
+  #test .label-wrap {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    height: 50px;
+  }
+
+  #test3 .label-wrap {
+    padding-left: 100px;
+    padding-top: 8px;
+    box-sizing: border-box;
+  }
+
+  #test .pop-title {
+    color: #fff;
+    margin-top: 11px;
+    margin-bottom: 4px;
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+  }
+
+
+  #test .data-li {
+    font-size: 14px;
+    margin-top: 15px;
+    margin-bottom: 5px;
+  }
+
+  #test3 .data-li {
+    font-size: 14px;
+    margin-top: 6px;
+  }
+
+  #test2 .divpoint {
+    background: url(../../public/SuperMap3D/examples/webgl/images/qipao1.png) no-repeat;
+    background-size: cover;
+    width: 116px;
+    height: 120px;
+  }
+
+  #test2 .label-wrap {
+    box-sizing: border-box;
+    padding-top: 10px;
+    padding-left: 51px;
+  }
+
+</style>