1.口门门禁地图修改,修改成倾斜摄影

src/views/gatemachine/second/gateDoor/components/edit.vue

@@ -74,12 +74,15 @@
 
 <script>
 import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import DragEntity from '../../../../map/js/dragentity'
+import RyDragEntity from '../../../../map/js/ry_dragentity.js'
 import { requestFN } from '@/utils/request'
 import SelectTree from '@/components/SelectTree'
 import waves from '@/directive/waves'
 import TiandiMap from '../../../../../components/TianMap/TiandiMap'
-
 let viewer = null
+let drag = null
+let ry_drag = null
 const Cesium = window.Cesium
 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOWQ0MGYwMy0yODUwLTQ1YzktOGM4OC02MTMwY2UyZjNlMzQiLCJpZCI6MTY0NTUwLCJpYXQiOjE2OTM4OTU1Mjd9.1cC0sSzyj79LZv0ILNCcl0Mabw6hl8TNngFNFr7H8f4'
 var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
@@ -131,7 +134,16 @@ export default {
         { NAME: '正常', VALUE: 0 },
         { NAME: '停用', VALUE: 1 },
         { NAME: '暂时关闭', VALUE: 2 }
-      ]
+      ],
+      map: null,
+      corpInfo: {
+        CORP_INFO_ID: '21590a00ea5e462e9ee44dd332dddc26',
+        longitude: '119.65009974259941',
+        latitude: '39.93517744811151'
+      },
+      center: { longitude: 119.6486945226887, latitude: 39.93555616569192, height: 900000 },
+      LONGTITUDE :'',
+      LATITUDE : ''
     }
   },
   watch: {
@@ -152,112 +164,6 @@ export default {
       this.form.LONGITUDEANDLATITUDE = this.form.LATITUDE + '--' + this.form.LONGITUDE
       this.dialogFormMap = false
     },
-    /**
-     * 初始化天地图对象
-     */
-    /*    initTDT() {
-      return new Promise((resolve, reject) => {
-        if (window.T) {
-          console.log('天地图初始化成功...')
-          resolve(window.T)
-          reject('error')
-        }
-      }).then(T => {
-        window.T = T
-      })
-    },*/
-    /**
-     * 初始化地图
-     * @param {*} lng 经度
-     * @param {*} lat 纬度
-     * @param {*} zoom 缩放比例(1~18)
-     */
-    initMap(lng, lat, zoom) {
-      viewer = new Cesium.Viewer('cesiumContainer', {
-        // terrainProvider: Cesium.createWorldTerrain()
-        animation: false, // 动画
-        homeButton: true, // home键
-        geocoder: true, // 地址编码
-        baseLayerPicker: false, // 图层选择控件
-        timeline: false, // 时间轴
-        fullscreenButton: true, // 全屏显示
-        infoBox: true, // 点击要素之后浮窗
-        sceneModePicker: true, // 投影方式  三维/二维
-        navigationInstructionsInitiallyVisible: false, // 导航指令
-        navigationHelpButton: false, // 帮助信息
-        selectionIndicator: false, // 选择
-        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
-          // 影像底图
-          url: 'http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + tiandituTk,
-          subdomains: subdomains,
-          layer: 'tdtImgLayer',
-          style: 'default',
-          format: 'image/jpeg',
-          tileMatrixSetID: 'GoogleMapsCompatible', // 使用谷歌的瓦片切片方式
-          show: true
-        })
-      })
-      viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏cesium ion
-      Cesium.ExperimentalFeatures.enableModelExperimental = true
-      var tile3d = new Cesium.Cesium3DTileset({
-        url: config.mapJsonUrl
-      })
-      viewer.scene.primitives.add(tile3d)
-
-      this.toCenter(lng, lat, zoom)
-      this.leftDownAction()
-    },
-    toCenter(LONGITUDE, LATITUDE, height) {
-      if (!LONGITUDE && !LATITUDE) {
-        viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(119.58, 39.94, height)
-        })
-        viewer.entities.removeAll()
-      } else {
-        viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(LONGITUDE, LATITUDE, height)
-        })
-        viewer.entities.removeAll()
-        this.form.LONGITUDE = LONGITUDE
-        this.form.LATITUDE = LATITUDE
-        this.addPoint([LONGITUDE, LATITUDE], 'init')
-      }
-    },
-    leftDownAction() {
-      // 去掉entity的点击事件 start
-      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
-      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
-      // 去掉entity的点击事件 end
-
-      const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
-      handler.setInputAction(event => {
-        viewer.entities.removeAll()
-        const clickPosition = viewer.scene.camera.pickEllipsoid(event.position) // 转经纬度（弧度）坐标
-        const radiansPos = Cesium.Cartographic.fromCartesian(clickPosition) // 转角度
-        this.form.LONGITUDE = Cesium.Math.toDegrees(radiansPos.longitude)
-        this.form.LATITUDE = Cesium.Math.toDegrees(radiansPos.latitude)
-        this.addPoint(clickPosition, 'click')
-      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-    },
-    addPoint(position, type) {
-      viewer.entities.add({ position: type === 'init' ? Cesium.Cartesian3.fromDegrees(...position) : position, billboard: {
-        image: img_h,
-        height: 25,
-        width: 23,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      }})
-    },
-    handleMap() {
-      this.dialogFormMap = true
-      this.$nextTick(() => {
-        if (!viewer) this.initMap(this.form.LONGITUDE, this.form.LATITUDE, 5000)
-        else this.toCenter(this.form.LONGITUDE, this.form.LATITUDE, 5000)
-        /* else this.initCenter(this.form.LONGITUDE, this.form.LATITUDE, 16)*/
-      })
-    },
     confirm() {
       this.$refs.form.validate(valid => {
         if (valid) {
@@ -323,6 +229,273 @@ export default {
     // 返回列表
     goBack() {
       this.$parent.activeName = 'List'
+    },
+    handleMap(){
+      this.dialogFormMap = true
+      this.$nextTick(() => {
+        if (!this.map) {
+          // this.initMap(this.LONGTITUDE, this.LATITUDE, 16)
+          this.initMap2()
+        } else {
+          this.initCenter(this.LONGTITUDE, this.LATITUDE, 16)
+        }
+      })
+    },
+    initMap2() {
+      console.info(viewer)
+      if (this.dichitype === 2) {
+        return
+      }
+      viewer = new Cesium.Viewer('cesiumContainer', {
+        animation: false, // 动画
+        homeButton: true, // home键
+        geocoder: true, // 地址编码
+        baseLayerPicker: false, // 图层选择控件
+        timeline: false, // 时间轴
+        fullscreenButton: true, // 全屏显示
+        infoBox: true, // 点击要素之后浮窗
+        sceneModePicker: true, // 投影方式  三维/二维
+        navigationInstructionsInitiallyVisible: false, // 导航指令
+        navigationHelpButton: false, // 帮助信息
+        selectionIndicator: false, // 选择
+        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
+          // 影像底图
+          url: 'http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + tiandituTk,
+          subdomains: subdomains,
+          layer: 'tdtImgLayer',
+          style: 'default',
+          format: 'image/jpeg',
+          tileMatrixSetID: 'GoogleMapsCompatible', // 使用谷歌的瓦片切片方式
+          show: true
+        })
+      })
+      viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏cesium ion
+      viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
+        // 影像注记
+        url: 'http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' + tiandituTk,
+        subdomains: subdomains,
+        layer: 'tdtCiaLayer',
+        style: 'default',
+        format: 'image/jpeg',
+        tileMatrixSetID: 'GoogleMapsCompatible',
+        show: true
+      }))
+      drag = new DragEntity({
+        viewer
+      })
+      // 根据不同的公司将信息加载到地图上
+      this.initInfo()
+      this.leftDownAction()
+      console.log(this.LATITUDE)
+      if (this.LATITUDE) {
+        console.log('LATITUDE')
+        this.dfdfd(this.LONGTITUDE, this.LATITUDE)
+      }
+
+      this.loadTilesetHandler()
+      ry_drag = new RyDragEntity({
+        viewer
+      })
+      this.dichitype = 2
+    },
+    initInfo() {
+      this.bottomOptionsIndex = ''
+      this.clickPort({
+        id: '00003',
+        CORP_INFO_ID: this.corpInfo.CORP_INFO_ID,
+        longitude: this.corpInfo.longitude,
+        latitude: this.corpInfo.latitude,
+        height: '2000'
+      })
+    },
+    clickPort({ id, longitude, latitude, height, CORP_INFO_ID }) {
+      console.log('clickPort', id, longitude, latitude, height, CORP_INFO_ID)
+      this.gangkouActive = id
+      this.CORP_INFO_ID = CORP_INFO_ID
+      this.componentKey = Math.random()
+      this.bottomOptionsKey = Math.random()
+      this.bottomOptionsAnimationComplex = false
+      this.toCenter({ longitude, latitude, height })
+      drag.addPolygon(id)
+      viewer.dataSources.removeAll()
+    },
+    toCenter(center = this.center) {
+      console.log('toCenter', center)
+      if (this.FIRE_POINT_ID && this.LONGTITUDE && this.LATITUDE && this.LONGTITUDE.trim() != '' && this.LATITUDE.trim() != '') {
+        this.center.longitude = this.LONGTITUDE
+        this.center.latitude = this.LATITUDE
+      } else {
+        this.center.longitude = center.longitude
+        this.center.latitude = center.latitude
+      }
+      this.center.height = center.height
+      viewer.camera.flyTo({
+        // 设置中心点,x,y,缩放等级
+        destination: Cesium.Cartesian3.fromDegrees(this.center.longitude, this.center.latitude, this.center.height)
+      })
+    },
+    leftDownAction() {
+      // 去掉entity的点击事件 start
+      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
+      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
+      // 去掉entity的点击事件 end
+      this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
+      this.handler.setInputAction(movement => {
+        // eslint-disable-next-line no-unused-vars
+        var cartesian = this.getCatesian3FromPX(movement.position)
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+    },
+    getCatesian3FromPX: function(px) {
+      if (viewer && px) {
+        var picks = viewer.scene.drillPick(px)
+        var cartesian = null
+        // eslint-disable-next-line one-var
+        var isOn3dtiles = false,
+          isOnTerrain = false
+        // drillPick
+        for (const i in picks) {
+          const pick = picks[i]
+
+          if (
+            (pick && pick.primitive instanceof Cesium.Cesium3DTileFeature) ||
+            (pick && pick.primitive instanceof Cesium.Cesium3DTileset) ||
+            (pick && pick.primitive instanceof Cesium.Model)
+          ) {
+            // 模型上拾取
+            isOn3dtiles = true
+          }
+          // 3dtilset
+          if (isOn3dtiles) {
+            viewer.scene.pick(px) // pick
+            cartesian = viewer.scene.pickPosition(px)
+            if (cartesian) {
+              const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+              if (cartographic.height < 0) cartographic.height = 0
+              // eslint-disable-next-line prefer-const,one-var
+              let lon = Cesium.Math.toDegrees(cartographic.longitude),
+                // eslint-disable-next-line prefer-const
+                lat = Cesium.Math.toDegrees(cartographic.latitude),
+                // eslint-disable-next-line prefer-const
+                height = cartographic.height
+              cartesian = this.transformWGS84ToCartesian({
+                lng: lon,
+                lat: lat,
+                alt: height
+              })
+            }
+          }
+        }
+        // 地形
+        const boolTerrain =
+          viewer.terrainProvider instanceof
+          Cesium.EllipsoidTerrainProvider
+        // Terrain
+        if (!isOn3dtiles && !boolTerrain) {
+          var ray = viewer.scene.camera.getPickRay(px)
+          if (!ray) return null
+          cartesian = viewer.scene.globe.pick(ray, viewer.scene)
+          isOnTerrain = true
+        }
+        // 地球
+        if (!isOn3dtiles && !isOnTerrain && boolTerrain) {
+          cartesian = viewer.scene.camera.pickEllipsoid(
+            px,
+            viewer.scene.globe.ellipsoid
+          )
+        }
+        const cartesian1 = new Cesium.Cartesian3(cartesian.x, cartesian.y, cartesian.z) // 替换为实际的 Cartesian3 坐标值
+
+        // 将 Cartesian3 坐标转换为 Cartographic 坐标
+        const cartographic = Cesium.Cartographic.fromCartesian(cartesian1)
+
+        // 将 Cartographic 坐标转换为 CGCS2000 计算经纬度
+        const lng = Cesium.Math.toDegrees(cartographic.longitude)
+        const lat = Cesium.Math.toDegrees(cartographic.latitude)
+        const height = cartographic.height // 高度
+        this.LONGTITUDE = lng
+        this.LATITUDE = lat
+        this.dfdfd(lng, lat)
+        return `CGCS2000 坐标: 经度 ${lng}, 纬度 ${lat}, 高度 ${height}`
+      }
+    },
+    dfdfd(LONGITUDE, LATITUDE) {
+      let dianweiName = '口门点位'
+      if (this.form.FIRE_POINT_NAME) {
+        dianweiName = this.form.FIRE_POINT_NAME
+      }
+      var initPoint = [
+        {
+          'id': '00002',
+          'data_id': '00002',
+          'MAP_POINT_NAME': dianweiName,
+          'name': '',
+          'point_type': '港口',
+          'type': '',
+          'descr': '',
+          'position': {
+            'x': LONGITUDE,
+            'y': LATITUDE
+          },
+          CORP_INFO_ID: 'f8da1790b1034058ae2efefd69af3284'
+        }
+      ]
+      this.form.LATITUDE = LATITUDE
+      this.form.LONGITUDE = LONGITUDE
+      this.form.LONGITUDEANDLATITUDE = this.form.LATITUDE + '--' + this.form.LONGITUDE
+      this.dragAreaEntity(initPoint)
+      ry_drag = new RyDragEntity({
+        viewer
+      })
+    },
+    // 加载点
+    dragAreaEntity(pointArr) {
+      console.log('pointArr', pointArr)
+      console.log('')
+      this.poinEntity = {}
+
+      const collection = new Cesium.CustomDataSource('clickEntityCollection')
+      pointArr.forEach(item => {
+        if (!this.poinEntity.hasOwnProperty(item.id)) {
+          const entity = drag.addEntity(item)
+          this.poinEntity[item.id] = entity
+          collection.entities.add(entity)
+        }
+      })
+      viewer.dataSources.removeAll()
+      viewer.dataSources.add(collection)
+    },
+    loadTilesetHandler() {
+      console.log('loadTilesetHandler')
+      Cesium.ExperimentalFeatures.enableModelExperimental = true
+      var cfdd = new Cesium.Cesium3DTileset({
+        url: '/mapapi/ware/upload/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E4%B8%9C/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E4%B8%9C/merge_tile.json'
+      })
+      viewer.scene.primitives.add(cfdd)
+
+      var cfdx = new Cesium.Cesium3DTileset({
+        url: '/mapapi/ware/upload/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E8%A5%BF/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E8%A5%BF/merge_tile.json'
+      })
+      viewer.scene.primitives.add(cfdx)
+
+      var qhdxys = new Cesium.Cesium3DTileset({
+        url: '/mapapi/ware/upload/qhdxys/merge_tile.json'
+      })
+      viewer.scene.primitives.add(qhdxys)
+
+      var qhdgysh = new Cesium.Cesium3DTileset({
+        url: '/mapapi/ware/upload/qhdgysh/merge_tile.json'
+      })
+      viewer.scene.primitives.add(qhdgysh)
+    },
+    transformWGS84ToCartesian: function(position, alt) {
+      // eslint-disable-next-line no-return-assign
+      return position ? Cesium.Cartesian3.fromDegrees(
+          position.lng || position.lon,
+          position.lat,
+          position.alt = alt || position.alt,
+          Cesium.Ellipsoid.WGS84
+        )
+        : Cesium.Cartesian3.ZERO
     }
   }
 }