同步代码

system_ui/src/views/components/supermap-2.5d.vue

@@ -4,17 +4,12 @@
 </template>
 
 <script>
-  import {
-    iconList,
-    getDeviceList
-  } from '@/api/components/supermap.js'
-  import {
-    getConfigKey
-  } from '@/api/system/config'
-  import Cookies from 'js-cookie'
+  import {iconList,queryMap} from '@/api/components/supermap.js'
+  import {getConfigKey} from '@/api/system/config'
+  import Cookies from "js-cookie";
 
   export default {
-    name: 'supermap-2.5d',
+    name: 'supermap-camera-2.5d',
     data() {
       return {
         chooseMode: [
@@ -50,32 +45,47 @@
 
         /*************************原地图属性*********************/
         aac: null,
+        dataMap: {},
         queryParams: {
           name: null,
           mapData: null,
           mapName: null
         },
+        deptId: Cookies.get('deptId'),
       }
     },
     watch: {},
     created() {
     },
     mounted() {
-      // this.superMapInfo();
     },
     props: {
       putSmUserID_layer: null,
     },
     methods: {
-      superMapInfo(type, obj,NB) {
+
+      superMapInfo(type, obj,NB,state,map3dType) {//map3dType用于区分是多个区域还是单个区域：1等于多个区域其他为单个区域
         getConfigKey('superMap.iServer').then(response => {
           this.superMapRootUrl = response.msg;
-          this.onload(type, obj,NB);
         })
+        if (state==undefined){
+          state = 17; //运行中心
+        }
+        queryMap(state,this.deptId).then(req => {
+            req = req.sort(function(a, b) {
+              return a.sort - b.sort
+            })
+            this.onload(req,type, obj,NB,map3dType)
+          }
+        )
       },
       //清除所有
       clearAll() {
-        this.viewer.entities.removeAll()
+        this.viewer.entities.removeAll();
+      },
+      clearAllByQin(val) {
+        this.viewer.entities.removeAll();
+        this.entityHandler(val-2)
       },
       //移除之前添加的点
       clearMRadius() {
@@ -256,12 +266,394 @@
           });
         }
       },
-      onload(type, obj,NB) {
-        let that = this;
+      addImageryProvider(uri) {
+        let that = this
+        that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
+          url: that.superMapRootUrl + uri
+        }))
+      },
+      addVectorTilesMap(uri) {
+        let that = this
+        that.scene.addVectorTilesMap({
+          url: that.superMapRootUrl + uri,
+          canvasWidth: 512,
+          name: 'mvt_map3',
+          viewer: that.viewer,
+          show: true
+        })
+      },
+      addOpen(sort, uri) {
+        let that = this
+        that.dataMap[sort] = that.scene.open(that.superMapRootUrl + uri)
+      },
+      addOpen_model(sort, uri) {
+        let that = this
+        that.dataMap[sort] = that.scene.open(that.superMapRootUrl + uri)
+        //开始加载专题图等数据，8秒后开始执行
+        setTimeout(function () {
+          /**
+           * @param dom ScreenSpaceEventHandler操作的dom节点，画的框会成为其子节点
+           */
+          function DrawRectHandler(dom) {
+            let startPoint,
+              self = this,
+              isShiftAndLeftDown = false,
+              handler = new Cesium.ScreenSpaceEventHandler(dom),
+              removalFunctions = [],
+              rect = new Rect(dom)
+            this.isDestroyed = false
+            this.activeEvt = new Cesium.Event()
+            this.cancelEvt = new Cesium.Event()
+            this.movingEvt = new Cesium.Event()
+            this.drawEvt = new Cesium.Event()
+
+            // div框
+            function Rect(parentDom) {
+              this.rect = document.createElement('div')
+              this.rect.style.visibility = 'hidden'
+              parentDom.appendChild(this.rect)
+              this.leftTopPoint = new Cesium.Cartesian2()
+              this.rightBottomPoint = new Cesium.Cartesian2()
+              Rect.prototype.setPosition = function (startPoint, endPosition) {
+                let w = endPosition.x - startPoint.x
+                let h = endPosition.y - startPoint.y
+                let left, top, width, height
+                if (w < 0) {
+                  left = endPosition.x
+                  width = -w
+                } else {
+                  left = startPoint.x
+                  width = w
+                }
+                if (h < 0) {
+                  top = endPosition.y
+                  height = -h
+                } else {
+                  top = startPoint.y
+                  height = h
+                }
+                this.leftTopPoint = new Cesium.Cartesian2(left, top)
+                this.rightBottomPoint = new Cesium.Cartesian2(left + width, top + height)
+                this.rect.style = `position:fixed;top:${top}px;left:${left}px;width:${width}px;height:${height}px;border:2px dashed #333;`
+                this.setVisible(true)
+              }
+              Rect.prototype.setVisible = function (isVisible) {
+                this.rect.style.visibility = isVisible ? 'visible' : 'hidden'
+              }
+              Rect.prototype.getRectPoint = function () {
+                return {
+                  leftTopPoint: this.leftTopPoint,
+                  rightBottomPoint: this.rightBottomPoint
+                }
+              }
+              Rect.prototype.destroy = function () {
+                dom.removeChild(rect)
+                this.rect = null
+              }
+            }
+
+            // canvas框
+            function RectCanvas(parentDom) {
+              let canvas = document.createElement('canvas'),
+                ctx = canvas.getContext('2d')
+              this.canvas = canvas
+              canvas.width = parentDom.clientWidth
+              canvas.height = parentDom.clientHeight
+              canvas.style = 'position:fixed;top:0;left:0;z-index:-1'
+              parentDom.appendChild(canvas)
+              this.leftTopPoint = new Cesium.Cartesian2()
+              this.rightBottomPoint = new Cesium.Cartesian2()
+              RectCanvas.prototype.setPosition = function (startPoint, endPosition) {
+                let w = endPosition.x - startPoint.x
+                let h = endPosition.y - startPoint.y
+                let left, top, width, height
+                if (w < 0) {
+                  left = endPosition.x
+                  width = -w
+                } else {
+                  left = startPoint.x
+                  width = w
+                }
+                if (h < 0) {
+                  top = endPosition.y
+                  height = -h
+                } else {
+                  top = startPoint.y
+                  height = h
+                }
+                this.leftTopPoint = new Cesium.Cartesian2(left, top)
+                this.rightBottomPoint = new Cesium.Cartesian2(left + width, top + height)
+                ctx.clearRect(0, 0, canvas.width, canvas.height)
+                ctx.strokeRect(left, top, width, height)
+              }
+              RectCanvas.prototype.setVisible = function (isVisible) {
+                if (isVisible) {
+                  canvas.style.zIndex = '999'
+                } else {
+                  canvas.style.zIndex = '-1'
+                }
+              }
+              RectCanvas.prototype.getRectPoint = function () {
+                return {
+                  leftTopPoint: this.leftTopPoint,
+                  rightBottomPoint: this.rightBottomPoint
+                }
+              }
+              RectCanvas.prototype.destroy = function () {
+                dom.removeChild(canvas)
+                ctx = null
+                this.canvas = null
+              }
+            }
+
+            // 开关相机控制
+            function setCameraCtrl(isActive) {
+              let cameraCtrl = that.scene.screenSpaceCameraController
+              cameraCtrl.enableRotate = isActive
+              cameraCtrl.enableTranslate = isActive
+              cameraCtrl.enableZoom = isActive
+              cameraCtrl.enableTilt = isActive
+              cameraCtrl.enableLook = isActive
+            }
+
+            // 鼠标cursor控制
+            function toggleCursorStyle(isActive) {
+              if (isActive) {
+                that.viewer.enableCursorStyle = false
+                that.viewer._element.style.cursor = ''
+                dom.style.cursor = 'default'
+              } else {
+                that.viewer.enableCursorStyle = true
+              }
+            }
+
+            // 初始化事件处理
+            function initEvent() {
+              handler.setInputAction(function (e) {
+                isShiftAndLeftDown = true
+                startPoint = new Cesium.Cartesian2(e.position.x, e.position.y)
+              }, Cesium.ScreenSpaceEventType.LEFT_DOWN, Cesium.KeyboardEventModifier.SHIFT)
+              // shift松开时，始终将rect隐藏
+              let keyUpFunction = function (e) {
+                self.cancelEvt.raiseEvent()
+                if (e.key == 'Shift' && isShiftAndLeftDown && !self.isDestroyed) {
+                  isShiftAndLeftDown = false
+                  rect.setVisible(false)
+                }
+              }
+
+              document.addEventListener('keyup', keyUpFunction)
+              removalFunctions.push(function () {
+                document.removeEventListener('keyup', keyUpFunction)
+              })
+              handler.setInputAction(function (e) {
+                let endPosition = e.endPosition
+                self.activeEvt.raiseEvent(endPosition)
+                if (!isShiftAndLeftDown) return
+                rect.setPosition(startPoint, endPosition)
+                rect.setVisible(true)
+                self.movingEvt.raiseEvent(rect.getRectPoint())
+              }, Cesium.ScreenSpaceEventType.MOUSE_MOVE, Cesium.KeyboardEventModifier.SHIFT)
+              handler.setInputAction(function (e) {
+                isShiftAndLeftDown = false
+                rect.setVisible(false)
+                self.drawEvt.raiseEvent(rect.getRectPoint())
+              }, Cesium.ScreenSpaceEventType.LEFT_UP, Cesium.KeyboardEventModifier.SHIFT)
+              handler.setInputAction(function (e) {
+                isShiftAndLeftDown = false
+                rect.setVisible(false)
+              }, Cesium.ScreenSpaceEventType.LEFT_UP)
+            }
+
+            // 移除事件监听
+            function removeEvent() {
+              handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN, Cesium.KeyboardEventModifier.SHIFT)
+              handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE, Cesium.KeyboardEventModifier.SHIFT)
+              handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP, Cesium.KeyboardEventModifier.SHIFT)
+              handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP)
+            }
+
+            DrawRectHandler.prototype.destroy = function () {
+              if (this.isDestroyed) return
+              setCameraCtrl(true)
+              removeEvent()
+              for (let i = 0, j = removalFunctions.length; i < j; i++) {
+                removalFunctions[i]()
+              }
+              handler.destroy()
+              rect.destroy()
+              rect = null
+              this.isDestroyed = true
+            }
+            DrawRectHandler.prototype.activate = function () {
+              if (this.isDestroyed) return
+              setCameraCtrl(false)
+              toggleCursorStyle(true)
+              initEvent()
+            }
+            DrawRectHandler.prototype.deactivate = function () {
+              if (this.isDestroyed) return
+              setCameraCtrl(true)
+              toggleCursorStyle(false)
+              removeEvent()
+            }
+          }
+
+          new Cesium.when(that.dataMap[sort], function (layers) {
+            for (let layer of layers) {
+              layer.selectColorType = 1
+              that.selectedObjs[layer.name] = []
+              that.resetIds[layer.name] = []
+            }
+            let drawRect = that.drawRect = new DrawRectHandler(document.body)
+            // res为框的左上点与右下点的相对于给定dom节点的坐标
+            drawRect.drawEvt.addEventListener(function (res) {
+              for (let layer of layers) {
+                layer.selectColorType = 1
+              }
+              that.tooltip = false
+              let selectedColor = new Cesium.Color(1, 0, 0, 1)
+              that.scene.pickRect(res.leftTopPoint, res.rightBottomPoint)
+              let objs = that.scene.getPickRectIDs()
+              let selectedObjs = that.selectedObjs
+              let resetIds = that.resetIds
+              for (let k in selectedObjs) {
+                if (selectedObjs[k].length > 0) {
+                  that.scene.layers.find(k).removeObjsColor(selectedObjs[k])
+                }
+              }
+              if (that.kuangxuan) {
+                for (let layer of layers) {
+                  let layerName = layer.name
+                  if (layerName === undefined) break
+                  let layerSlt = objs.find(e => e.layerName === layerName)
+                  let sltIds = (layerSlt && layerSlt.ids) || []
+                  resetIds[layerName] = selectedObjs[layerName]
+                  selectedObjs[layerName] = sltIds
+                  console.log('框选结束',  sltIds)
+                  that.$parent.$refs.ldTk.FrameSelectedData(sltIds)
+                  that.$parent.$refs.ldTk.allLouDongDialog = true
+                  layer.setObjsColor(selectedObjs[layerName], selectedColor)
+                }
+              }
+            })
+
+            drawRect.movingEvt.addEventListener(function (res) {
+              that.tooltip = true
+              if (that.kuangxuan) {
+                that.tooltipText = "松开鼠标左键以结束选择区域"
+                for (let layer of layers) {
+                  layer.selectColorType = 1
+                }
+                that.scene.pickRect(res.leftTopPoint, res.rightBottomPoint)
+              } else {
+                that.tooltipText = "请点击框选"
+              }
+            })
+            drawRect.activeEvt.addEventListener(function (position) {
+              that.tooltip = true
+              if (that.kuangxuan) {
+                that.tooltipText = "松开鼠标左键以结束选择区域"
+              } else {
+                that.tooltipText = "请点击框选"
+              }
+            })
+            drawRect.cancelEvt.addEventListener(function () {
+              that.tooltip = false
+            })
+
+            let canvas = document.querySelector('div.cesium-widget canvas')
+            canvas.setAttribute('tabindex', '0') // needed to put focus on the canvas
+            canvas.focus()
+            document.addEventListener('keydown', function (e) {
+              if (e.key === 'Shift') {
+                drawRect.activate()
+              }
+            })
+            document.addEventListener('keyup', function (e) {
+              if (e.key === 'Shift') {
+                drawRect.deactivate()
+              }
+            })
+          }, function () {
+            // let title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？'
+            // widget.showErrorPanel(title, undefined, e)
+          }).then(function () {
+
+          }, function (e) {
+            console.log(e)
+          })
+        }, 3000);
+      },
+      addFind(parentId, uri) {
+        let that = this
+        that.dataMap[parentId].then(function(layers) {
+          let dat = that.scene.layers.find(uri) //区县文字图层
+          //关闭避让
+          dat.isOverlapDisplayed = true
+        })
+      },
+      flyTo(longitude, latitude, height) {
+        let that = this
+        setTimeout(function() {
+          that.viewer.camera.flyTo({
+            destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
+            orientation: {}
+          })
+        }, 3000)
+      },
+      onload(supermapUrls,type, obj,NB,map3dType) {
+        let that = this
+        const withinData = supermapUrls
         //1.添加地形数据
         that.viewer = new Cesium.Viewer('cesiumContainer', {
           //创建地形服务提供者的实例，url为SuperMap iServer发布的TIN地形服务
           terrainProvider: new Cesium.CesiumTerrainProvider({
+            url: that.superMapRootUrl + '/3D-sipingchangjing/rest/realspace/datas/dem@spyx4326',
+            //isSct : false,//地形服务源自SuperMap iServer发布时需设置isSct为true
+            invisibility: true
+          }),
+          infoBox: false,
+          navigation: false
+        }, {
+          contextOptions: {
+            msaaLevel: 4,
+            requestWebgl2: true
+          },
+          orderIndependentTranslucency: false
+        })
+        that.scene = that.viewer.scene
+        that.viewer.cesiumWidget.creditContainer.style.display = 'none' // 去掉超图logo水印
+        //2.添加SuperMap iServer发布的影像服务
+        that.addImageryProvider(withinData[0].path)
+        let longitude = withinData[0].coordinate.split(',')[0]
+        let latitude = withinData[0].coordinate.split(',')[1]
+        let height = withinData[0].scale
+        that.flyTo(longitude, latitude, height)
+        setTimeout(function() {
+          for (let i = 1; i < withinData.length; i++) {
+            setTimeout(() => {
+              if (withinData[i].type == 'addImagery') {
+                that.addImageryProvider(withinData[i].path)
+              } else if (withinData[i].type == 'addVectorTilesMap') {
+                that.addVectorTilesMap(withinData[i].path)
+              } else if (withinData[i].type == 'open') {
+                that.addOpen(withinData[i].sort, withinData[i].path)
+              }else if (withinData[i].type == 'open_model') {
+                that.addOpen_model(withinData[i].sort, withinData[i].path)
+              } else if (withinData[i].type == 'find') {
+                that.addFind(withinData[i].parentId, withinData[i].path)
+              }
+            }, 100 * i)
+          }
+        }, 3000)
+
+
+
+        /*//1.添加地形数据
+        that.viewer = new Cesium.Viewer('cesiumContainer', {
+          //创建地形服务提供者的实例，url为SuperMap iServer发布的TIN地形服务
+          terrainProvider: new Cesium.CesiumTerrainProvider({
             url: that.superMapRootUrl + "/3D-sipingchangjing/rest/realspace/datas/dem@spyx4326",
             //isSct : false,//地形服务源自SuperMap iServer发布时需设置isSct为true
             invisibility: true
@@ -285,13 +677,13 @@
 
         //3.添加SuperMap 建筑场景
         let aaaa = that.superMapRootUrl + "/3D-local3DCache-Data3/rest/realspace";
-        scene.open(aaaa);
+        scene.open(aaaa);*/
 
         //飞行值坐标点,每3秒推进一级
         //heading-代表镜头左右方向,正值为右,负值为左
         //pitch-代表镜头上下方向,正值为上,负值为下.
         //roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
-        setTimeout(function () {
+        /*setTimeout(function () {
           that.viewer.camera.flyTo({
             destination: Cesium.Cartesian3.fromDegrees(124.49980650138238, 43.428263986216815, 950000),
             orientation: {
@@ -323,10 +715,10 @@
             }
           });
 
-        }, 3000);
+        }, 3000);*/
 
         //开始加载专题图等数据，8秒后开始执行
-        setTimeout(function () {
+        /*setTimeout(function () {
           //3.水系
           let shuixi = that.superMapRootUrl + "/map-mvt-shuixiMian/restjsr/v1/vectortile/maps/shuixi_Mian";
           that.mvtMap0 = scene.addVectorTilesMap({
@@ -434,7 +826,7 @@
           // let layer_xiangzhenjie_name = that.superMapRootUrl+'/3D-XiangZhenJie_Name/rest/realspace';
           // scene.open(layer_xiangzhenjie_name);
 
-        }, 3000);
+        }, 3000);*/
         if (NB!='NB') {
           if (type == 1) {//拾取点位
             that.getLeftClickDescription(obj);
@@ -445,7 +837,13 @@
           }
           if (type == 3) {//标面
             that.entityHandler(1);
-            that.setGraphicsList(obj.graphicsList, obj.color, obj.withAlpha);
+            if (map3dType == 1){//多区域
+              this.setGraphicsList2(obj.graphicsList, obj.color, obj.withAlpha)
+            }else {//单区域
+              that.setGraphicsList1(obj.graphicsList, obj.color, obj.withAlpha);
+            }
+
+
           }
         }
         if (NB=='NB' && type == 2){
@@ -456,21 +854,21 @@
             let arrayBlue = [];
             let arrayRed = [];
             // if (Array.isArray(obj[i].params)){
-              for (let j = 0; j < obj[i].params.length; j++) {
-                if (obj[i].id===666){
-                  arrayBlue.push(obj[i].params[j].lng);
-                  arrayBlue.push(obj[i].params[j].lat);
-                }
-                else {
-                  arrayRed.push(obj[i].params[j].lng);
-                  arrayRed.push(obj[i].params[j].lat);
-                }
+            for (let j = 0; j < obj[i].params.length; j++) {
+              if (obj[i].id===666){
+                arrayBlue.push(obj[i].params[j].lng);
+                arrayBlue.push(obj[i].params[j].lat);
               }
-              that.setConnectTwoList(
-                Array.isArray(arrayRed) && arrayRed.length > 0 ? arrayRed : [],
-                "rgba(232,14,14,0)",
-                0.8
-              );
+              else {
+                arrayRed.push(obj[i].params[j].lng);
+                arrayRed.push(obj[i].params[j].lat);
+              }
+            }
+            that.setConnectTwoList(
+              Array.isArray(arrayRed) && arrayRed.length > 0 ? arrayRed : [],
+              "rgba(232,14,14,0)",
+              0.8
+            );
             that.setConnectTwoList(
               Array.isArray(arrayBlue) && arrayBlue.length > 0 ? arrayBlue : [],
               "rgba(14,25,231,0)",
@@ -653,6 +1051,82 @@
             material: material
           }
         })
+        setTimeout(() => {
+          if(connectList!=null&&Array.isArray(connectList)&&connectList.length>0){
+            that.viewer.camera.flyTo({
+              destination: Cesium.Cartesian3.fromDegrees(connectList[0],connectList[1],6500),
+              complete: function () {
+                // 飞行结束后设置相机的高度
+                var newHeight = 6500;
+                var destination = that.viewer.camera.position.clone();
+                destination.z = newHeight;
+              }
+            });
+          }
+        }, 3000);
+      },
+      setGraphicsList1(graphicsList, color, withAlpha) {
+        let that = this
+        //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置
+
+        let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
+        that.graphicsBoxEntity = that.viewer.entities.add({
+          polygon: {
+            hierarchy: Cesium.Cartesian3.fromDegreesArray(graphicsList),
+            clampToGround: true,//贴地 true,不贴地  false
+            width: 5,
+            material: material
+          }
+        });
+        setTimeout(() => {
+          if(graphicsList!=null&&Array.isArray(graphicsList)&&graphicsList.length>0){
+            that.viewer.camera.flyTo({
+              destination: Cesium.Cartesian3.fromDegrees(graphicsList[0],graphicsList[1],6500),
+              complete: function () {
+                // 飞行结束后设置相机的高度
+                var newHeight = 6500;
+                var destination = that.viewer.camera.position.clone();
+                destination.z = newHeight;
+              }
+            });
+          }
+        }, 3000);
+
+      },
+      setGraphicsList2(graphicsList, color, withAlpha) {
+        let that = this;
+        that.viewer.entities.removeAll(); // 移除地图标点
+        let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
+        for (let i = 0; i < graphicsList.length; i++) {
+          let positions = Cesium.Cartesian3.fromDegreesArray(graphicsList[i].latLng);
+          let name = graphicsList[i].name.toString();
+          let center = Cesium.BoundingSphere.fromPoints(positions).center;
+          let namePosition = Cesium.Cartographic.fromCartesian(center);
+          namePosition.height = 0; // 将名称高度设置为0，使其贴地显示
+
+          that.graphicsBoxEntity = that.viewer.entities.add({
+            polygon: {
+              hierarchy: positions,
+              clampToGround: true,
+              width: 5,
+              material: material
+            }
+          });
+
+          that.viewer.entities.add({
+            position: center,
+            label: {
+              text: name ,
+              font: 'Bold 12px sans-serif',
+              fillColor: Cesium.Color.BLACK,
+              outlineColor: Cesium.Color.WHITE,
+              outlineWidth: 2,
+              pixelOffset: new Cesium.Cartesian2(0, 0),
+              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+              disableDepthTestDistance: Number.POSITIVE_INFINITY
+            }
+          });
+        }
       },
       /**
        * 地图图形(贴地)
@@ -670,6 +1144,19 @@
             material: material
           }
         })
+        setTimeout(() => {
+          if(graphicsList!=null&&Array.isArray(graphicsList)&&graphicsList.length>0){
+            that.viewer.camera.flyTo({
+              destination: Cesium.Cartesian3.fromDegrees(graphicsList[0],graphicsList[1],6500),
+              complete: function () {
+                // 飞行结束后设置相机的高度
+                var newHeight = 6500;
+                var destination = that.viewer.camera.position.clone();
+                destination.z = newHeight;
+              }
+            });
+          }
+        }, 3000);
       }
     },
   }