config/index.js

@@ -16,6 +16,13 @@ module.exports = {
         pathRewrite: {
           '^/api': ''
         }
+      },
+      '/mapapi/': {
+        target: 'http://192.168.192.215:8021/',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/mapapi/': ''
+        }
       }
     },
 

src/views/firefighting/points/components/edit.vue

@@ -135,7 +135,7 @@
       </el-form>
     </div>
     <el-dialog :visible.sync="dialogFormMap" title="定位" width="1050px" class="dy-dialog">
-      <div id="map"/>
+      <div id="cesiumContainer"/>
       <div slot="footer" class="dialog-footer">
         <span>经度：</span>
         <el-input v-model="LONGTITUDE" style="width: 200px" placeholder="请输入内容" disabled/>
@@ -167,6 +167,16 @@ import { upload } from '@/utils/upload'
 import SelectTree from '@/components/SelectTree'
 import waves from '@/directive/waves' // waves directive
 import TiandiMap from '@/components/TianMap/TiandiMap.vue'
+import RyDragEntity from "../../../map/js/ry_dragentity";
+import DragEntity from "../../../map/js/dragentity";
+
+let viewer = null
+let drag = null
+let ry_drag = null
+var tiandituTk = 'e8a16137fd226a62a23cc7ba5c9c78ce'
+var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
+const Cesium = window.Cesium
+Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOWQ0MGYwMy0yODUwLTQ1YzktOGM4OC02MTMwY2UyZjNlMzQiLCJpZCI6MTY0NTUwLCJpYXQiOjE2OTM4OTU1Mjd9.1cC0sSzyj79LZv0ILNCcl0Mabw6hl8TNngFNFr7H8f4'
 
 export default {
   components: { Pagination, SelectTree, TiandiMap },
@@ -260,7 +270,15 @@ export default {
         limit: 20
       },
       multipleSelection: [],
-      accidentList: []
+      accidentList: [],
+      corpInfo: {
+        CORP_INFO_ID: '',
+        longitude: '',
+        latitude: ''
+      },
+      center: { longitude: 119.6486945226887, latitude: 39.93555616569192, height: 900000 },
+      poinEntity: {},
+      dichitype :0
     }
   },
   watch: {
@@ -292,7 +310,268 @@ export default {
       // this.getFirePointCheckPhotos(this.FIRE_POINT_ID)
     }
   },
+  mounted() {
+    this.initCorpInfo()
+  },
   methods: {
+    initCorpInfo() {
+      requestFN(
+        '/map/getCorpInfo', {}
+      ).then((data) => {
+        this.corpInfo.CORP_INFO_ID = data.info.CORP_INFO_ID
+        this.corpInfo.latitude = data.info.latitude
+        this.corpInfo.longitude = data.info.longitude
+        this.initMap2()
+      }).catch((e) => {
+        console.log(e)
+      })
+    },
+    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
+    },
+    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)
+      let id
+      this.handler.setInputAction(movement => {
+        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
+              let lon = Cesium.Math.toDegrees(cartographic.longitude),
+                lat = Cesium.Math.toDegrees(cartographic.latitude),
+                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}`
+      }
+    },
+    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
+    },
+    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.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)
+    },
+    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)
+      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)
+      })
+    },
+    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)
+    },
     handleRemove(file) {
       if (file.IMGFILES_ID) {
         // 已经上传过的 现在删除 记录这个id
@@ -375,17 +654,17 @@ export default {
       this.dialogFormMap = false
     },
     initTDT() {
-      return new Promise((resolve, reject) => {
+      // return new Promise((resolve, reject) => {
-        if (window.T) {
+      //   if (window.T) {
-          console.log('天地图初始化成功...')
+      //     console.log('天地图初始化成功...')
-          resolve(window.T)
+      //     resolve(window.T)
-          reject('error')
+      //     reject('error')
-        } else {
+      //   } else {
-          console.info(999999999)
+      //     console.info(999999999)
-        }
+      //   }
-      }).then(T => {
+      // }).then(T => {
-        window.T = T
+      //   window.T = T
-      })
+      // })
     },
     /**
      * 初始化地图
@@ -395,7 +674,8 @@ export default {
      */
     initMap(lng, lat, zoom) {
       this.initTDT().then((T) => {
-        const imageURL = 'http://t0.tianditu.gov.cn/img_w/wmts?' + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' + '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e8a16137fd226a62a23cc7ba5c9c78ce'
+        // const imageURL = 'http://t0.tianditu.gov.cn/img_w/wmts?' + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' + '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e8a16137fd226a62a23cc7ba5c9c78ce'
+        const imageURL = '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
         // 创建自定义图层对象
         this.lay = new window.T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 })
         // 初始化地图对象
@@ -436,8 +716,12 @@ export default {
     handleMap() {
       this.dialogFormMap = true
       this.$nextTick(() => {
-        if (!this.map) this.initMap(this.LONGTITUDE, this.LATITUDE, 16)
+        if (!this.map){
-        else this.initCenter(this.LONGTITUDE, this.LATITUDE, 16)
+          // this.initMap(this.LONGTITUDE, this.LATITUDE, 16)
+          this.initCorpInfo()
+        } else {
+          this.initCenter(this.LONGTITUDE, this.LATITUDE, 16)
+        }
       })
     },
     confirm() {
@@ -670,7 +954,7 @@ export default {
 </script>
 
 <style>
-#map {
+#cesiumContainer {
   width: 1000px;
   height: 500px;
 }

src/views/map/index.vue

@@ -749,16 +749,17 @@ export default {
               checkImg: require('../../assets/map/gangkou_index/buttom/ico23_on.png'),
               containAuthorization: [],
               eliminateAuthorization: []
-            },
-            {
-              label: '压力管道',
-              dialog_width: '1200px',
-              check: false,
-              img: require('../../assets/map/gangkou_index/buttom/ico24.png'),
-              checkImg: require('../../assets/map/gangkou_index/buttom/ico24_on.png'),
-              containAuthorization: [],
-              eliminateAuthorization: []
             }
+            // ,
+            // {
+            //   label: '压力管道',
+            //   dialog_width: '1200px',
+            //   check: false,
+            //   img: require('../../assets/map/gangkou_index/buttom/ico24.png'),
+            //   checkImg: require('../../assets/map/gangkou_index/buttom/ico24_on.png'),
+            //   containAuthorization: [],
+            //   eliminateAuthorization: []
+            // }
             // {
             //   label: '锅炉',
             //   dialog_width: '1200px',
@@ -1347,7 +1348,7 @@ export default {
       // eslint-disable-next-line no-unused-vars
       var _this = this
       const collection = new Cesium.CustomDataSource('clickEntityCollection')
-
+      console.info()
       poin.forEach(item => {
         if (!this.poinEntity.hasOwnProperty(item.id)) {
           const entity = drag.addEntity(item)

static/maplocation.html

@@ -8,13 +8,13 @@
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <title>hello-jsmap</title>
-  <script src="http://192.168.0.31:8089/joysuch/jsmap/jsmap.js" type="text/javascript"></script>
+  <script src="http://192.168.192.201:7024/joysuch/jsmap/jsmap.js" type="text/javascript"></script>
-  <link type="text/css" href="http://192.168.0.31:8089/joysuch/jsmap/jsmap.css" rel="stylesheet"/>
+  <link type="text/css" href="http://192.168.192.201:7024/joysuch/jsmap/jsmap.css" rel="stylesheet"/>
   <!--  <script src="http://mapdemo.joysuch.com/lib/jsmap/jsmap.js" type="text/javascript"></script>-->
   <!--  <link type="text/css" href="http://mapdemo.joysuch.com/lib/jsmap/jsmap.css" rel="stylesheet"/>-->
-  <link rel="stylesheet" href="http://192.168.0.31:8089/joysuch/LocalAssets/css/animation/pop.css">
+  <link rel="stylesheet" href="http://192.168.192.201:7024/joysuch/LocalAssets/css/animation/pop.css">
-  <link rel="stylesheet" href="http://192.168.0.31:8089/joysuch/LocalAssets/css/animation/loading.css">
+  <link rel="stylesheet" href="http://192.168.192.201:7024/joysuch/LocalAssets/css/animation/loading.css">
-  <link rel="stylesheet" href="http://192.168.0.31:8089/joysuch/LocalAssets/css/dom.css">
+  <link rel="stylesheet" href="http://192.168.192.201:7024/joysuch/LocalAssets/css/dom.css">
   <style>
     .jsmap-animation-point,
     .jsmap-animation-point:after,
@@ -366,7 +366,7 @@
       mapType: jsmap.JSMapType.MAP_3D,
       //必要，地图路径
       // mapServerURL: 'http://mapdemo.joysuch.com',
-      mapServerURL: 'http://192.168.0.31:8089/joysuch/jsmap/data/map',
+      mapServerURL: 'http://192.168.192.201:7024/joysuch/jsmap/data/map',
       openingAnimation: false,
       enableLighting: true,
       enableShadows: true,