地图图层

data-ui/src/api/components/supermap.js

@@ -1,4 +1,5 @@
 import request from '../../utils/request'
+import Cookies from 'js-cookie'
 
 export function getSuperMap(codes) {
     return request({
@@ -7,8 +8,18 @@ export function getSuperMap(codes) {
     })
 }
 
-
-
+// 获取地图配置
+export function queryMap(state) {
+  return request({
+    url: '/system/sysMenuVisuMap/queryMap',
+    method: 'post',
+    data: {
+      visuId: state,
+      deptId: 365
+      // deptId:Cookies.get("deptId")
+    }
+  })
+}
 
 
 export const iconList={

data-ui/src/views/components/supermap-2.5d.vue

@@ -4,10 +4,10 @@
 </template>
 
 <script>
-import {iconList} from '@/api/components/supermap.js'
-import {getConfigKey} from '@/api/system/config'
+  import {iconList,queryMap} from '@/api/components/supermap.js'
+  import {getConfigKey} from '@/api/system/config'
 
-export default {
+  export default {
     name: 'supermap-camera-2.5d',
     data() {
       return {
@@ -44,6 +44,7 @@ export default {
 
         /*************************原地图属性*********************/
         aac: null,
+        dataMap: {},
         queryParams: {
           name: null,
           mapData: null,
@@ -64,8 +65,27 @@ export default {
       superMapInfo(type, obj,NB) {
         getConfigKey('superMap.iServer').then(response => {
           this.superMapRootUrl = response.msg;
-          this.onload(type, obj,NB);
         })
+        let state = 6;
+        if (this.$route.path.indexOf("/water")>-1){
+          state=4;
+        }
+        if (this.$route.path.indexOf("/traffic")>-1){
+          state=7;
+        }
+        if (this.$route.path.indexOf("/forest")>-1){
+          state=2;
+        }
+        if (this.$route.path.indexOf("/resource")>-1){
+          state=8;
+        }
+        queryMap(state).then(req => {
+            req = req.sort(function(a, b) {
+              return a.sort - b.sort
+            })
+            this.onload(req,type, obj,NB)
+          }
+        )
       },
       //清除所有
       clearAll() {
@@ -254,12 +274,394 @@ export default {
           });
         }
       },
-      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) {
+        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
@@ -283,13 +685,13 @@ export default {
 
         //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: {
@@ -321,10 +723,10 @@ export default {
             }
           });
 
-        }, 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({
@@ -432,7 +834,7 @@ export default {
           // 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);
@@ -454,21 +856,21 @@ export default {
             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);
+              }
+              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(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)",

data-ui/src/views/data/digitaltraffic/level/IForm.vue

@@ -93,7 +93,7 @@
   import {getLevel} from "../../../../api/data/digitalresources/level";
 
   const uuidv4 = require("uuid/v4")
-  import supermap from "@/views/components/supermap-2.5d-multiple"; //超图
+  import supermap from "@/views/components/supermap-2.5d.vue"; //超图
   import ITabs from './ITabs.vue'
   import Treeselect from "@riophae/vue-treeselect";
   import "@riophae/vue-treeselect/dist/vue-treeselect.css";
@@ -201,9 +201,9 @@
           this.$refs.supermap.clearM(false);
           this.$refs.supermap.superMapInfo(this.sign, {longitude: this.form.longitude, latitude: this.form.latitude});
         }, 500);
-        setTimeout(() => {
-          this.form.type == 1 ? this.$refs.supermap.loadLindi() : (this.form.type == 2 ? this.$refs.supermap.loadShuixi() : (this.form.type == 3 ? this.$refs.supermap.loadRoad() : this.$refs.supermap.loadNongtian()))
-        }, 10000);
+        // setTimeout(() => {
+        //   this.form.type == 1 ? this.$refs.supermap.loadLindi() : (this.form.type == 2 ? this.$refs.supermap.loadShuixi() : (this.form.type == 3 ? this.$refs.supermap.loadRoad() : this.$refs.supermap.loadNongtian()))
+        // }, 10000);
       },
       putSmUserID_layer: function (entity) {
         if (entity != undefined && entity != null) {