websocket修改 地图修改

src/components/supermap-2.5d.vue

@@ -0,0 +1,333 @@
+<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,
+        /*************************原地图属性*********************/
+        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;
+      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);
+
+        for (let i in makerList) {
+          let longitude = makerList[i].lng;
+          let latitude = makerList[i].lat;
+          let height = 300;
+          that.viewer.entities.add({
+            id:makerList[i].name,
+            position: Cesium.Cartesian3.fromDegrees(longitude, latitude,height),
+            billboard: {
+              image: iconList[makerList[i].icon],
+              width: 48,
+              height: 48,
+            },
+            description: makerList[i].bindPopupHtml,
+            click: makerList[i].click,
+            parameter: makerList[i].parameter
+          });
+        }
+        that.createLeftClickDescription();
+        that.createRightClickDescription();
+      },
+      createLeftClickDescription() {//鼠标左击事件是原来的气泡
+        let that = this;
+        // ScreenSpaceEventHandler   处理用户输入事件。可以添加自定义功能以在以下位置执行当用户输入输入时。
+        that.handler.setInputAction(function (movement) {
+          // 监听鼠标的当前位置坐标，然后根据当前坐标去动态更新气泡窗口div的显示位置；
+          that.pick = that.viewer.scene.pick(movement.position);
+          if (that.pick && that.pick) {
+            var id = Cesium.defaultValue(that.viewer.scene.pick(movement.position).id, that.viewer.scene.pick(movement.position).primitive.id);
+            that.setPohop(movement,id._id)
+          }
+        }, 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);
+      },
+      setPohop(movement,id) {
+        let that = this;
+        // 首先构造一个存放弹框的div,方便设置
+        var infoDiv = '<div id="trackPopUp' + id + '" style="display:none;" >' +
+          '<div id="trackPopUpContent" class="leaflet-popup" style="top:5px;left:0;">' +
+          '<a class="leaflet-popup-close-button" href="#">×</a>' +
+          '<div class="leaflet-popup-content-wrapper">' +
+          '<div id="trackPopUpLink" class="leaflet-popup-content" style="max-width:100%;"></div>' +
+          '</div>' +
+          '<div class="leaflet-popup-tip-container">' +
+          '<div class="leaflet-popup-tip"></div>' +
+          '</div>' +
+          '</div>' +
+          '</div>';
+        $("#cesium-container").append(infoDiv);
+        var str = "#trackPopUp" + id
+
+        // 这里的判断条件还是蛮有用的,比如你点击某些点的时候想弹出自定义弹窗,其他点弹出原生弹窗,就需要在这里进行判断了
+        $(str).show();
+        // 显示弹窗容器
+        var cartographic = Cesium.Cartographic.fromCartesian(that.pick.primitive._actualPosition);
+        // 获取点的经纬度
+        var point = [cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];
+        // 转换坐标
+        var destination = Cesium.Cartesian3.fromDegrees(point[0], point[1], 3000.0);
+        // destination是我们点击之后,flyto的位置
+        // that.content =
+        //   '<table  border="1" width="400px" colspan="4">' +
+        //   '    <thead ><th colspan="4" style="text-align: center">' + '灾害点位置' + '</th></thead>' +
+        //   '    <tbody>' +
+        //   '    <tr >' +
+        //   '        <th align="left">地理位置:' + '灾害点位置' + '<br/>管道桩号:' + '桩号' + '<br/>灾害类型:' +
+        //   + '<br/>风险等级:</th>' +
+        //   '    </tr>' +
+        //   '    </tbody>' +
+        //   '</table>';
+        // content是核心,你想弹出的东西,就全部放在这里面
+        // var obj = { position: movement.position, destination: destination, content: that.content };
+        var obj = { position: movement.position, destination: destination};
+        // 构造一个参数,包括事件、 位置、已经弹框
+        this.infoWindow(obj,str);
+      },
+      infoWindow(obj,str) {
+        let that = this;
+        var picked = that.viewer.scene.pick(obj.position);
+        // 首先获取点击点的信息
+        if (Cesium.defined(picked)) {
+        // 判断 如果点被定义了
+        var id = Cesium.defaultValue(picked.id, picked.primitive.id);
+        // 获取id(id就是原生弹窗的标题)
+        if (id) {
+          if (obj.position) {
+            that.back_position = new Cesium.Cartesian3.fromDegrees(that.getCenterPosition().x, that.getCenterPosition().y, that.getCenterPosition().z);
+            // 我在这里用back_position记录的点击之前的位置,便于×掉弹窗后返回
+            // that.viewer.camera.flyTo({
+            //   // 跳转到我们刚才定义的位置
+            //   destination: obj.destination
+            // });
+          }
+          // 填充内容
+          $(str + " .cesium-selection-wrapper").show();
+          // cesium-selection-wrapper是cesium内置的东西
+          $(str + " #trackPopUpLink").empty();
+          // empty() 方法从被选元素移除所有内容，包括所有文本和子节点。
+          $(str + " #trackPopUpLink").append(obj.content);
+          // append() 方法在被选元素的结尾（仍然在内部）插入指定内容。
+          var c = new Cesium.Cartesian2(obj.position.x, obj.position.y);
+          $(str).show();
+          that.positionPopUp(c);
+          //实时更新位置
+          var removeHandler = that.viewer.scene.postRender.addEventListener(function () {
+            var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(that.viewer.scene, that.pick.primitive._actualPosition);
+            // 我们转动地球,也会实时更新弹窗的位置.并不会一成不变
+            if (c && changedC && c.x && changedC.x && c.y && changedC.y) {
+              if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
+                that.positionPopUp(changedC);
+                c = changedC;
+              }
+            }
+          });
+          // PopUp close button event handler
+          $(str+ ' .leaflet-popup-close-button').click(function () {
+            $(str).hide();
+            $(str + ' #trackPopUpLink').empty();
+            $(str + " .cesium-selection-wrapper").hide();
+            removeHandler.call();
+            that.viewer.camera.flyTo({
+              // 回到我们点击前的位置
+              destination: that.back_position
+            });
+            return false;
+          });
+          }
+        }
+      },
+      positionPopUp(c) {
+        var x = c.x - ($(str + ' #trackPopUpContent').width()) / 2;
+        var y = c.y - ($(str + ' #trackPopUpContent').height());
+        // 为所有匹配元素(#trackPopUpContent)设置transform的值为 'translate3d(' + x + 'px, ' + y + 'px, 0)'
+        $(str+' #trackPopUpContent').css('transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)');
+      },
+      getCenterPosition() {
+		    let that = this;
+        //获取当前位置
+        var result = that.viewer.camera.pickEllipsoid(new Cesium.Cartesian2(that.viewer.canvas.clientWidth / 2, that.viewer.canvas
+          .clientHeight / 2));
+        var curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(result);
+        var lon = curPosition.longitude * 180 / Math.PI;
+        var lat = curPosition.latitude * 180 / Math.PI;
+        var height = that.getHeight();
+        return {
+          x: lon,
+          y: lat,
+          z: height
+        };
+      },
+      getHeight() {
+        let that = this;
+        //获取当前高度
+        if (that.viewer) {
+          var ellipsoid = that.scene.globe.ellipsoid;
+          var height = ellipsoid.cartesianToCartographic(that.viewer.camera.position).height;
+          return height;
+        }
+      }
+    }
+	}
+</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>