增加3D地图

neim-ui/src/utils/bigemap/3dmap.js

@@ -0,0 +1,26 @@
+//map.js
+// 换成本地的服务器js文件即可
+let script = [
+  'http://www.bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js',
+  // '/js/bigemap-velocity.min.js',
+  '/jquery.min.js',
+  //如果有更多的JS要引用 ，也一起放到这个数组中
+];
+export default new Promise(resolve => {
+  let link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.async = false;
+  // 换成本地的服务器css文件即可
+  link.href = "http://www.bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css";
+  document.head.appendChild(link);
+  let loads = script.map(v => {
+    let script = document.createElement("script");
+    script.type = "text/javascript";
+    script.async = false;
+    script.src = v;
+    document.head.appendChild(script);
+    return script;
+  });
+  let end = loads.pop();
+  end.onload = resolve;
+});

neim-ui/src/views/largeScreenPage/Subpage/emailResourcesInfo.vue

@@ -132,14 +132,24 @@
                 </div>
               </div>
               <div class="infoContentBottom">
-                <span>
+                <div style="display: flex;">
+                  <div style="width: 55%">
                   <img
                     class="tiltleLeftSign"
                     referrerpolicy="no-referrer"
                     src="../../../assets/largeScreenImg/index/tiltleLeftSign.png"
                   />
-                  {{ height }}m 风数据
-                </span>
+                  {{ height }}m 湍流
+                </div>
+                  <div>
+                  <img
+                    class="tiltleLeftSign"
+                    referrerpolicy="no-referrer"
+                    src="../../../assets/largeScreenImg/index/tiltleLeftSign.png"
+                  />
+                  综合风切变
+                </div>
+                </div>
                 <div class="windDataBox">
                   <div class="windDataBg">
 
@@ -210,22 +220,23 @@ import wdCharts from '../components/wdCharts'
 import wdPowerCharts from '../components/wdPowerCharts'
 import WsCharts from "@/views/largeScreenPage/components/wsCharts";
 import wsAndWPowerCharts from "@/views/largeScreenPage/components/wsAndWPowerCharts";
+
 export default {
   name: "emailResourcesInfo",
-  components:{WsCharts, wdCharts,wdPowerCharts,wsAndWPowerCharts},
+  components: {WsCharts, wdCharts, wdPowerCharts, wsAndWPowerCharts},
   data() {
     return {
       timer: null,
       time: '',
       emailWindTowerInfo: {},
       // cftInfo:{equipmentNo:'006171',wdHeights:'120,80,10'},
-      cftInfo:{},
+      cftInfo: {},
       height: '140',
       wdHeight: '',
-      projectId:'1',
-      projectOption:[{id:'1',projectName:'依兰四期'}],//项目列表
-      cftNo:'006171',
-      towerOption:[{value:'006171',label:'依兰四期006171'}],//塔列表
+      projectId: '1',
+      projectOption: [{id: '1', projectName: '依兰四期'}],//项目列表
+      cftNo: '006171',
+      towerOption: [{value: '006171', label: '依兰四期006171'}],//塔列表
       projectInfo: {
         time: '2021-07-18 — 2022-12-27',
         latitude: '43.34',
@@ -256,35 +267,35 @@ export default {
   },
   methods: {
     // 获取项目信息
-    getProjectSelect(){
-      projectSelect().then(res=>{
+    getProjectSelect() {
+      projectSelect().then(res => {
         this.projectOption = res.data
-        if(this.emailWindTowerInfo !== undefined){
+        if (this.emailWindTowerInfo !== undefined) {
           this.projectId = this.emailWindTowerInfo.projectId
-          let project = this.projectOption.find(w=>w.value === this.projectId)
+          let project = this.projectOption.find(w => w.value === this.projectId)
           this.towerOption = project.equipmentDto
-          if(this.emailWindTowerInfo.equipmentNo !== null &&this.emailWindTowerInfo.equipmentNo !== undefined){
+          if (this.emailWindTowerInfo.equipmentNo !== null && this.emailWindTowerInfo.equipmentNo !== undefined) {
             this.cftNo = this.emailWindTowerInfo.equipmentNo
-            let towerInfo = this.towerOption.find(w=>w.value === this.cftNo)
+            let towerInfo = this.towerOption.find(w => w.value === this.cftNo)
             this.wdHeight = towerInfo.wdHeight
-          }else{
+          } else {
             this.cftNo = this.towerOption[0].value
             this.wdHeight = this.towerOption[0].wdHeight
           }
-        }else{
+        } else {
           this.projectId = this.projectOption[0].value
           this.towerOption = this.projectOption[0].equipmentDto
           this.cftNo = this.towerOption[0].value
           this.wdHeight = this.towerOption[0].wdHeight
         }
-        this.cftInfo = {equipmentNo:this.cftNo,wdHeights:this.wdHeight}
+        this.cftInfo = {equipmentNo: this.cftNo, wdHeights: this.wdHeight}
         this.getTowerInfo()
-      }).catch(err=>{
-        console.log('获取项目列表失败：'+err)
+      }).catch(err => {
+        console.log('获取项目列表失败：' + err)
       })
     },
-    getTowerInfo(){
-      selectTForAir({equipmentId: this.cftNo, month: ''}).then(res=>{
+    getTowerInfo() {
+      selectTForAir({equipmentId: this.cftNo, month: ''}).then(res => {
         // console.log(res.data)
         let data = res.data
         this.projectInfo = {
@@ -303,24 +314,24 @@ export default {
           turbulent: data.turbulence,
           windShear: data.windShear
         }
-      }).catch(err=>{
-        console.log('获取测风塔基本信息：'+err)
+      }).catch(err => {
+        console.log('获取测风塔基本信息：' + err)
       })
     },
 
     // 改变项目下拉框
-    changeProject(){
-      let project = this.projectOption.find(w=>w.value === this.projectId)
+    changeProject() {
+      let project = this.projectOption.find(w => w.value === this.projectId)
       this.towerOption = project.equipmentDto
       this.cftNo = this.towerOption[0].value
       this.wdHeight = this.towerOption[0].wdHeight
-      this.cftInfo = {equipmentNo:this.cftNo,wdHeights:this.wdHeight}
+      this.cftInfo = {equipmentNo: this.cftNo, wdHeights: this.wdHeight}
       this.getTowerInfo()
     },
     // 改变塔信息下拉框
-    changeTower(){
-      let towerInfo = this.towerOption.find(w=>w.value === this.cftNo)
-      this.cftInfo = {equipmentNo:this.cftNo,wdHeights:towerInfo.wdHeight}
+    changeTower() {
+      let towerInfo = this.towerOption.find(w => w.value === this.cftNo)
+      this.cftInfo = {equipmentNo: this.cftNo, wdHeights: towerInfo.wdHeight}
       this.getTowerInfo()
     },
     push() {
@@ -357,7 +368,7 @@ export default {
   height: calc(100vh);
   /*background: url(../../../assets/largeScreenImg/backBg.png) no-repeat;*/
   /*background-size: 100% 100%;*/
-  background: #030F1A ;
+  background: #030F1A;
   color: white;
 }
 
@@ -500,36 +511,43 @@ export default {
   position: relative;
   top: -25%;
 }
-.rSelect{
+
+.rSelect {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.projectSelect{
+
+.projectSelect {
   height: 34px;
   width: 200px;
   background: url(../../../assets/largeScreenImg/resourcesInfo/projectBg.png) 100% no-repeat;
   background-size: 100% 100%;
 }
-.towerSelect{
+
+.towerSelect {
   height: 30px;
   width: 200px;
   background: url(../../../assets/largeScreenImg/resourcesInfo/towerBg.png) 100% no-repeat;
   background-size: 100% 100%;
 }
+
 .rSelect /deep/ .el-input--small .el-input__inner {
   background: transparent;
   border: 0;
   color: white;
   font-size: 16px;
 }
+
 .projectSelect /deep/ .el-input--small .el-input__inner {
-   margin-left: 5%;
-   margin-top: 1%;
+  margin-left: 5%;
+  margin-top: 1%;
 }
+
 .rSelect /deep/ .el-select .el-input .el-select__caret {
   color: #ffffff;
 }
+
 .centerTitle {
   margin-left: 5%;
 }

neim-ui/src/views/largeScreenPage/Subpage/projectInfo.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="page projectInfoPage">
     <div class="timeBox">{{ time }}</div>
-    <div class="kaiguanBox"><img src="../../../../public/largeScreenImg/kaiguan.png" style="width: 30px;height: 30px" @click="pushZaiXian()"/></div>
+    <div class="kaiguanBox"><img src="../../../../public/largeScreenImg/kaiguan.png" style="width: 30px;height: 30px"
+                                 @click="pushZaiXian()"/></div>
     <div class="topTiltle">
       <span class="title">前期项目信息</span>
     </div>
@@ -69,20 +70,36 @@
         <div id="mapBtuFive" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuFive')">
           <span class="mapBtuText">光资源分布图</span>
         </div>
+        <div id="mapBtu3D" class="mapBtu mapBtuAfter" @click="dialog3DMap()">
+          <span class="mapBtuText">3D地形图</span>
+        </div>
       </div>
     </div>
     <div v-if="mapMark === 'mapBtuOne'">
-      <bige-map  ref="childMethod" :mapValue="mapValue"/>
+      <bige-map ref="childMethod" :mapValue="mapValue"/>
     </div>
     <div v-if="mapMark === 'mapBtuThree'">
-      <bige-heat-map  ref="childMethod" :mapValue="mapValue"/>
+      <bige-heat-map ref="childMethod" :mapValue="mapValue"/>
     </div>
     <div v-if="mapMark === 'mapBtuFive'">
-      <bige-heat-sun-map  ref="childMethod" :mapValue="mapValue"/>
+      <bige-heat-sun-map ref="childMethod" :mapValue="mapValue"/>
     </div>
     <div v-if="mapMark === 'mapBtu'">
       <zai-xian-bige-map ref="childMethod" :mapValue="mapValue"/>
     </div>
+    <!--3D弹窗-->
+    <div class="map3D">
+      <el-dialog
+      :visible.sync="dialogVisible" :modal-append-to-body="false"
+      width="80%"
+      :before-close="handleClose">
+        <bige-map3-d :mapValue="mapValue" v-if="dialogVisible"/>
+      </el-dialog>
+    </div>
+
+<!--    <div v-if="mapMark === 'mapBtu3D'">-->
+<!--      <bige-map3-d ref="childMethod" :mapValue="mapValue"/>-->
+<!--    </div>-->
     <div class="bottomPushBtu" @click="pushPreProjectResource()">
       <span>前期项目资源信息</span>
     </div>
@@ -90,15 +107,17 @@
 </template>
 
 <script>
-import {projectMapInfo,getPointMap} from "@/api/biz/dataQuery/largeScreenPage";
+import {projectMapInfo, getPointMap} from "@/api/biz/dataQuery/largeScreenPage";
 import bigeMap from "@/views/largeScreenPage/components/bigeMap";
 import bigeHeatMap from "@/views/largeScreenPage/components/bigeHeatMap";
 import bigeHeatSunMap from "@/views/largeScreenPage/components/bigeHeatSunMap";
 import zaiXianBigeMap from "@/views/largeScreenPage/components/zaiXianBigeMap";
+import bigeMap3D from "@/views/largeScreenPage/components/3DbigeMap";
+
 export default {
   name: "projectInfo",
   components: {
-    bigeMap, bigeHeatMap,bigeHeatSunMap,zaiXianBigeMap
+    bigeMap, bigeHeatMap, bigeHeatSunMap, zaiXianBigeMap, bigeMap3D
   },
   data() {
     return {
@@ -106,7 +125,7 @@ export default {
       time: '',
       project: {},
       projectName: '',
-      coordinates:[],//中心点坐标
+      coordinates: [],//中心点坐标
       // projectOverview: '依兰县位于黑龙江省中南部。 黑龙江华电哈尔滨依兰鸡冠山四期200MW风电项目中心位于黑龙江省哈尔滨市依兰县东侧15km的鸡冠砬子山上，整个场址为低山丘陵区，场区实际可利用面积约63km2。',
       projectOverview: '',
       // resourcesOverview: '根据风能资源推测120m数据分析，年平均风速为8.007m/s，平均风功率密度为567W/m²，属于3级风场。主风向为WSW，次风向为W，空气密度为1.2kg/m³。'
@@ -118,9 +137,10 @@ export default {
         center: [],//中心坐标
         allStationInfo: null,//场站坐标
         projectInfo: null,//项目坐标
-        allPointInfo:null,//所有点位信息
+        allPointInfo: null,//所有点位信息
       },
-      allPointInfo:[]
+      allPointInfo: [],
+      dialogVisible:false
     }
   },
   destroyed() {
@@ -134,22 +154,22 @@ export default {
   },
   methods: {
     /*所有风机、塔、拐点坐标信息*/
-    getPointMap(){
-      if(this.$store.getters.allPointInfo.length>0){
+    getPointMap() {
+      if (this.$store.getters.allPointInfo.length > 0) {
         this.allPointInfo = JSON.parse(this.$store.getters.allPointInfo).info
         this.getInfo()
-      }else {
-        getPointMap().then(res=>{
+      } else {
+        getPointMap().then(res => {
           // console.log(res.data)
           this.allPointInfo = res.data
           this.getInfo()
-          sessionStorage.setItem("allPointInfo", JSON.stringify({info:this.allPointInfo}))
-          this.$store.dispatch('equipmentInfo/allPointInfo', JSON.stringify({info:this.allPointInfo}))
-        }).catch(err=>{
-          console.log('所有点位坐标：'+err)
+          sessionStorage.setItem("allPointInfo", JSON.stringify({info: this.allPointInfo}))
+          this.$store.dispatch('equipmentInfo/allPointInfo', JSON.stringify({info: this.allPointInfo}))
+        }).catch(err => {
+          console.log('所有点位坐标：' + err)
         })
       }
-      console.log(this.allPointInfo)
+      //console.log(this.allPointInfo)
     },
     getInfo() {
       this.project = JSON.parse(this.$store.getters.projectInfo)
@@ -168,22 +188,22 @@ export default {
     },
     // 获取项目信息
     getProjectInfo(projectId) {
-      projectMapInfo({projectId:projectId}).then(res=>{
+      projectMapInfo({projectId: projectId}).then(res => {
         let data = res.data
         this.projectOverview = data.projectOverview
         this.resourcesOverview = data.resourcesOverview
-        this.coordinates = [Number(data.latitude),Number(data.longitude)]
-        this.mapValue ={
+        this.coordinates = [Number(data.latitude), Number(data.longitude)]
+        this.mapValue = {
           params: new Date(),
           level: 12,//地图层级
           center: this.coordinates,//中心坐标
           allStationInfo: null,//场站坐标
           projectInfo: null,//项目坐标
-          id:projectId,
-          allPointInfo:this.allPointInfo,//所有点位信息
+          id: projectId,
+          allPointInfo: this.allPointInfo,//所有点位信息
         }
-      }).catch(err=>{
-        console.log('单个项目信获取异常：'+err)
+      }).catch(err => {
+        console.log('单个项目信获取异常：' + err)
       })
     },
     push() {
@@ -193,7 +213,7 @@ export default {
       this.$router.push({path: "/homepage/projectEvolve"})
     },
     pushInfo() {
-      let project = {projectId:this.project.id,equipmentNo:null}
+      let project = {projectId: this.project.id, equipmentNo: null}
       sessionStorage.setItem("emailWindTowerInfo", JSON.stringify(project))
       this.$store.dispatch('equipmentInfo/emailWindTowerInfo', JSON.stringify(project))
       this.$router.push({path: "/homepage/emailResourcesInfo"})
@@ -204,33 +224,50 @@ export default {
     pushPreProjectResource() {
       this.$router.push({path: "/homepage/preProjectResources"})
     },
-    pushZaiXian(){
-      if(this.mapMark === 'mapBtuOne'){
+    pushZaiXian() {
+      if (this.mapMark === 'mapBtuOne') {
         let center = this.$refs.childMethod.center
         let level = this.$refs.childMethod.level
-        this.mapValue ={
+        this.mapValue = {
           params: new Date(),
-          level: level === ''?null:level,//地图层级
-          center: center.length === 0?[]:[center.lat,center.lng],//中心坐标
+          level: level === '' ? null : level,//地图层级
+          center: center.length === 0 ? [] : [center.lat, center.lng],//中心坐标
           allStationInfo: null,//场站坐标
           projectInfo: null,//项目坐标
-          id:this.project.id,
-          allPointInfo:this.allPointInfo,//所有点位信息
+          id: this.project.id,
+          allPointInfo: this.allPointInfo,//所有点位信息
         }
         this.mapMark = 'mapBtu'
       }
     },
+    dialog3DMap(){
+      let center = this.$refs.childMethod.center
+      let level = this.$refs.childMethod.level
+      this.mapValue = {
+        params: new Date(),
+        level: level === '' ? null : level,//地图层级
+        center: center.length === 0 ? [] : [center.lat, center.lng],//中心坐标
+        allStationInfo: null,//场站坐标
+        projectInfo: null,//项目坐标
+        id: this.project.id,
+        allPointInfo: this.allPointInfo,//所有点位信息
+      }
+      this.dialogVisible = true
+    },
+    handleClose(){
+      this.dialogVisible = false
+    },
     clickBtu(id) {
       let center = this.$refs.childMethod.center
       let level = this.$refs.childMethod.level
-      this.mapValue ={
+      this.mapValue = {
         params: new Date(),
-        level: level === ''?null:level,//地图层级
-        center: center.length === 0?[]:[center.lat,center.lng],//中心坐标
+        level: level === '' ? null : level,//地图层级
+        center: center.length === 0 ? [] : [center.lat, center.lng],//中心坐标
         allStationInfo: null,//场站坐标
         projectInfo: null,//项目坐标
-        id:this.project.id,
-        allPointInfo:this.allPointInfo,//所有点位信息
+        id: this.project.id,
+        allPointInfo: this.allPointInfo,//所有点位信息
       }
       this.mapMark = id
       let clickItem = document.getElementById(id)
@@ -353,7 +390,7 @@ export default {
   width: 20%;
   display: flex;
   flex-direction: column;
-  z-index: 100000;
+  z-index: 1000;
 }
 
 .rightBg {
@@ -367,7 +404,7 @@ export default {
   right: 22%;
   top: 7%;
   width: 10%;
-  z-index: 100000;
+  z-index: 1000;
 }
 
 .rightTiltleTextBg {
@@ -439,11 +476,19 @@ export default {
   margin-top: 1%;
   margin-right: 4%;
 }
-.kaiguanBox{
+
+.kaiguanBox {
   cursor: pointer;
   position: absolute;
   left: 22%;
   top: .5%;
 }
-
+.map3D /deep/ .el-dialog__header, .map3D /deep/ .el-dialog__body  {
+ padding: 0;
+}
+.map3D /deep/ .el-dialog__headerbtn {
+  z-index: 100;
+  top: 10px;
+  right: 10px;
+}
 </style>

neim-ui/src/views/largeScreenPage/Subpage/realResourcesInfo.vue

@@ -118,14 +118,24 @@
                 </div>
               </div>
               <div class="infoContentBottom">
-                <span>
-                  <img
-                    class="tiltleLeftSign"
-                    referrerpolicy="no-referrer"
-                    src="../../../assets/largeScreenImg/index/tiltleLeftSign.png"
-                  />
-                  {{ height }}m 风数据
-                </span>
+                <div style="display: flex;">
+                  <div style="width: 55%">
+                    <img
+                      class="tiltleLeftSign"
+                      referrerpolicy="no-referrer"
+                      src="../../../assets/largeScreenImg/index/tiltleLeftSign.png"
+                    />
+                    {{ height }}m 湍流
+                  </div>
+                  <div>
+                    <img
+                      class="tiltleLeftSign"
+                      referrerpolicy="no-referrer"
+                      src="../../../assets/largeScreenImg/index/tiltleLeftSign.png"
+                    />
+                    综合风切变
+                  </div>
+                </div>
                 <div class="windDataBox">
                   <div class="windDataBg">
 

neim-ui/src/views/largeScreenPage/Subpage/stationInfo.vue

@@ -66,6 +66,9 @@
         <div id="mapBtuFive" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuFive')">
           <span class="mapBtuText">光资源分布图</span>
         </div>
+        <div id="mapBtu3D" class="mapBtu mapBtuAfter" @click="dialog3DMap()">
+          <span class="mapBtuText">3D地形图</span>
+        </div>
       </div>
     </div>
     <div v-if="mapMark === 'mapBtuOne'">
@@ -80,6 +83,15 @@
     <div v-if="mapMark === 'mapBtu'">
       <zai-xian-bige-map ref="childMethod" :mapValue="mapValue"/>
     </div>
+    <!--3D弹窗-->
+    <div class="map3D">
+      <el-dialog
+        :visible.sync="dialogVisible" :modal-append-to-body="false"
+        width="80%"
+        :before-close="handleClose">
+        <bige-map3-d :mapValue="mapValue" v-if="dialogVisible"/>
+      </el-dialog>
+    </div>
     <div class="bottomPushBtu" @click="pushStationResource()">
       <span>在运风光场站资源管理</span>
     </div>
@@ -93,10 +105,12 @@ import bigeMap from "@/views/largeScreenPage/components/bigeMap";
 import bigeHeatMap from "@/views/largeScreenPage/components/bigeHeatMap";
 import bigeHeatSunMap from "@/views/largeScreenPage/components/bigeHeatSunMap";
 import zaiXianBigeMap from "@/views/largeScreenPage/components/zaiXianBigeMap";
+import bigeMap3D from "@/views/largeScreenPage/components/3DbigeMap";
+
 export default {
   name: "stationInfo",
   components: {
-    bigeMap, bigeHeatMap,bigeHeatSunMap,zaiXianBigeMap
+    bigeMap, bigeHeatMap,bigeHeatSunMap,zaiXianBigeMap, bigeMap3D
   },
   data() {
     return {
@@ -118,7 +132,8 @@ export default {
         projectInfo: null,//项目坐标
         allPointInfo:null,//所有点位信息
       },
-      allPointInfo:[]
+      allPointInfo:[],
+      dialogVisible:false
     }
   },
   destroyed() {
@@ -218,6 +233,23 @@ export default {
         this.mapMark = 'mapBtu'
       }
     },
+    dialog3DMap(){
+      let center = this.$refs.childMethod.center
+      let level = this.$refs.childMethod.level
+      this.mapValue ={
+        params: new Date(),
+        level: level === ''?null:level,//地图层级
+        center: center.length === 0?[]:[center.lat,center.lng],//中心坐标
+        allStationInfo: null,//场站坐标
+        projectInfo: null,//项目坐标
+        id:this.station.id,
+        allPointInfo:this.allPointInfo,//所有点位信息
+      }
+      this.dialogVisible = true
+    },
+    handleClose(){
+      this.dialogVisible = false
+    },
     clickBtu(id) {
       let center = this.$refs.childMethod.center
       let level = this.$refs.childMethod.level
@@ -365,7 +397,7 @@ export default {
   right: 22%;
   top: 7%;
   width: 10%;
-  z-index: 10000;
+  z-index: 1000;
 }
 
 .rightTiltleTextBg {
@@ -482,46 +514,12 @@ export default {
   left: 22%;
   top: .5%;
 }
-.dialogInfoBg {
-  background: url(../../../assets/largeScreenImg/zaiyunAndqianqi/dialogBg.png) 100% no-repeat;
-  background-size: 100% 100%;
-  padding: 1%;
-  width: 30%;
-  position: absolute;
-  top: 20%;
-  left: 30%;
-}
-
-.dialogRightTextBtu {
-  position: absolute;
-  top: 0;
-  right: 1%;
-  width: 20%;
-}
-
-.tiltleLeftSign {
-  width: 12px;
-  height: 30px;
-  margin-top: 1%;
-  margin-right: 2%;
-}
-
-.dialogInfoTitle {
-  display: flex;
-  align-items: center;
-}
-
-.projectInfoBox {
-  margin-top: 2%;
+.map3D /deep/ .el-dialog__header, .map3D /deep/ .el-dialog__body  {
+  padding: 0;
 }
-
-.dialogInfo {
-  margin-left: 5%;
-  font-size: 14px;
-}
-
-.pInfo {
-  line-height: 15px;
-  cursor: pointer;
+.map3D /deep/ .el-dialog__headerbtn {
+  z-index: 100;
+  top: 10px;
+  right: 10px;
 }
 </style>

neim-ui/src/views/largeScreenPage/components/3DbigeMap.vue

@@ -0,0 +1,294 @@
+<template>
+  <div>
+    <div id='container'></div>
+    <div id="mouse_state"></div>
+  </div>
+</template>
+
+<script>
+import bigemap3d from '@/utils/bigemap/3dmap'
+
+export default {
+  name: "bigeMap3D",
+  props: {mapValue: Object},
+  watch: {
+    mapValue: {
+     immediate: true,
+      handler(value) {
+        if (value.params !== undefined) {
+          console.log("3D地形图：" + value)
+          this.mapData = value
+          this.level = value.level
+          this.center = {lng:value.center[1],lat:value.center[0]}
+          this.init()
+        }
+
+      }
+    }
+  },
+  data() {
+    return {
+      A: 40487.57,
+      B: 0.00007096758,
+      C: 91610.74,
+      D: -40467.74,
+      level: 10,
+      center: {},
+    }
+  }, mounted() {
+
+  },
+  methods: {
+    init() {
+      let _self = this
+      //  高度
+      let altitude = this.C * Math.pow((this.A - this.D) / (this.level - this.D) - 1, 1 / this.B)
+      console.log(this.C * Math.pow((this.A - this.D) / (this.level - this.D) - 1, 1 / this.B))
+      let center = this.center === []?[129.64920, 46.2844]:[this.center.lng,this.center.lat];
+      bigemap3d.then(() => {
+        // var center = [104.73673266358675,31.463626972537455];
+        console.log(center, 154);
+        // window.bmgl.Config.HTTP_URL ='http://www.bigemap.com:9000';
+        window.bmgl.Config.HTTP_URL = process.env.VUE_APP_GIS_API;
+        //window.bmgl.Config.HTTP_URL = 'http://localhost:9000';
+        let viewer = new bmgl.Viewer('container', {
+          // mapId: 'bigemap.zhongkexingtu',
+          terrainId: 'bigemap.re-gaocheng',
+          mapId: 'bigemap.re-huafu',
+        });
+        viewer.camera.setView({
+          destination: window.bmgl.Cartesian3.fromDegrees(...center, altitude),
+          // viewer.camera.computeViewRectangle()
+          // orientation: {
+          //   heading: 5.737109377827798,
+          //   roll: 6.281571490802099,
+          //   pitch: -0.3089655832119651,
+          // }
+        });
+
+        var scene = viewer.scene;
+        var handler = new bmgl.ScreenSpaceEventHandler(scene.canvas);
+        var ellipsoid = scene.globe.ellipsoid; //得到当前三维场景的椭球体
+
+        var longitudeString = null;
+        var latitudeString = null;
+        var height = null;
+        var cartesian = null;
+        var mouse_state = document.getElementById("mouse_state"); //显示状态信息
+
+        // 鼠标移动触发事件
+        handler.setInputAction(function (movement) {
+          //通过指定的椭球或者地图对应的坐标系，将鼠标的二维坐标转换为对应椭球体三维坐标
+          var ray = viewer.camera.getPickRay(movement.endPosition);
+          var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
+          if (cartesian) {
+            //将笛卡尔坐标转换为地理坐标
+            var cartographic = ellipsoid.cartesianToCartographic(cartesian);
+            //将弧度转为度的十进制度表示
+            longitudeString = window.bmgl.Math.toDegrees(cartographic.longitude).toFixed(
+              7);
+            latitudeString = window.bmgl.Math.toDegrees(cartographic.latitude).toFixed(7);
+            //获取相机高度
+            height = Math.ceil(viewer.camera.positionCartographic.height).toFixed(
+              3);
+            mouse_state.innerText =
+              `移动：经度: ${longitudeString},纬度:  ${latitudeString} , 相机高度:  ${height} `;
+          } else {
+            mouse_state.innerText = "";
+          }
+        }, window.bmgl.ScreenSpaceEventType.MOUSE_MOVE);
+
+        // handler.setInputAction(function (movement) {
+        //   console.log(2)
+        //   cartesian = viewer.camera.pickEllipsoid(movement.position,
+        //     ellipsoid); //movement.endPosition
+        //   if (cartesian) {
+        //     //将笛卡尔坐标转换为地理坐标
+        //     var cartographic = window.bmgl.Cartographic.fromCartesian(cartesian);
+        //     longitudeString = window.bmgl.Math.toDegrees(cartographic.longitude).toFixed(
+        //       3);
+        //     latitudeString = window.bmgl.Math.toDegrees(cartographic.latitude).toFixed(3);
+        //     //获取相机高度
+        //     height = Math.ceil(viewer.camera.positionCartographic.height);
+        //     mouse_state.innerText =
+        //       `左键双击 ：( 经度: ${longitudeString.toFixed(5)},纬度:  ${latitudeString.toFixed(5)} , 相机高度:  ${height}  )`;
+        //   } else {
+        //     mouse_state.innerText = '';
+        //   }
+        // }, window.bmgl.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+        // 鼠标平移
+
+        //鼠标平移触发事件
+        handler.setInputAction(function (movement) {
+          var p = window.bmgl.Cartographic.fromCartesian(viewer.camera.position);
+          cartesian = viewer.camera.pickEllipsoid(movement.position,
+            ellipsoid); //movement.endPosition
+          if (cartesian) {
+            //将笛卡尔坐标转换为地理坐标
+            var cartographic = window.bmgl.Cartographic.fromCartesian(cartesian);
+            longitudeString = window.bmgl.Math.toDegrees(cartographic.longitude);
+              //.toFixed(3);
+            latitudeString = window.bmgl.Math.toDegrees(cartographic.latitude);
+              //.toFixed(3);
+            //获取相机高度
+            height = Math.ceil(viewer.camera.positionCartographic.height);
+            mouse_state.innerText =
+              `左键抬起 ： 经度: ${longitudeString.toFixed(5)},纬度:    ${latitudeString.toFixed(5)} , 相机高度:  ${height}  `;
+          } else {
+            mouse_state.innerText = '';
+          }
+          _self.level =  Math.round(_self.D + (_self.A - _self.D) / (1 + Math.pow(height / _self.C, _self.B)));
+          _self.center = {lng:window.bmgl.Math.toDegrees(p.latitude),lat:window.bmgl.Math.toDegrees(p.longitude)};
+          _self.$emit('changeZoom', _self.level)
+          // console.log(_self.level,_self.center)
+        }, window.bmgl.ScreenSpaceEventType.LEFT_DOWN);
+        // 鼠标缩进触发事件
+        handler.setInputAction(function (wheelment) {
+          var p = window.bmgl.Cartographic.fromCartesian(viewer.camera.position);
+          height = Math.ceil(viewer.camera.positionCartographic.height);
+          mouse_state.innerText = `相机高度: ${height} (米)`;
+          let position = {
+            lng: window.bmgl.Math.toDegrees(p.longitude),
+            lat: window.bmgl.Math.toDegrees(p.latitude)
+          };
+          // 高度转化成2D的地图级别
+          _self.level =  Math.round(_self.D + (_self.A - _self.D) / (1 + Math.pow(height / _self.C, _self.B)));
+          _self.center = position;
+          _self.$emit('changeZoom', _self.level)
+          // console.log(_self.level,_self.center)
+        }, window.bmgl.ScreenSpaceEventType.WHEEL);
+
+        // 地图调整角度触发事件
+        viewer.camera.changed.addEventListener(function (e) {
+          // console.log("event");
+          var p = window.bmgl.Cartographic.fromCartesian(viewer.camera.position);
+          _self.level =  Math.round(_self.D + (_self.A - _self.D) / (1 + Math.pow(p.height / _self.C, _self.B)));
+          _self.center = {lng:window.bmgl.Math.toDegrees(p.latitude),lat:window.bmgl.Math.toDegrees(p.longitude)};
+          _self.$emit('changeZoom', _self.level)
+          // console.log(_self.level,_self.center)
+          // console.log("-----------");
+        })
+
+
+        // 渲染所有风机、塔、拐点标记点位
+        // console.log(this.mapData.allPointInfo)
+        if (this.mapData.allPointInfo !== null && this.mapData.allPointInfo !== undefined) {
+
+          let data = this.mapData.allPointInfo
+          for (let item of data.fan) {
+            viewer.entities.add({
+              position: bmgl.Cartesian3.fromDegrees(Number(item.longitudeFan), Number(item.latitudeFan)),
+              billboard:{
+                heightReference: bmgl.HeightReference.CLAMP_TO_GROUND,
+                image:'/img/fengji.png',
+                scale: 0.6
+              },
+            });
+          }
+          for (let coordinatesList of data.coordinatesList) {
+            for (let item of coordinatesList) {
+              if (item.length > 0) {
+                let latlngs = []
+                for (let coor of item) {
+                  latlngs.push(Number(coor.longitude))
+                  latlngs.push(Number(coor.latitude))
+                }
+                viewer.entities.add({
+                  polygon: {
+                    hierarchy: bmgl.Cartesian3.fromDegreesArray(latlngs),
+                    extrudedHeight:0,
+                    perPositionHeight: true,
+                    material: bmgl.Color.CYAN.withAlpha(0.1),
+                    outline: true,
+                    outlineColor: bmgl.Color.CYAN
+                  }
+                });
+              }
+            }
+          }
+
+          // 项目或者场站id
+
+          let id = this.mapData.id
+
+          for (let item of data.towerList) {
+            let marker = viewer.entities.add({
+              position: bmgl.Cartesian3.fromDegrees(Number(item.longitude), Number(item.latitude)),
+              billboard:{
+                heightReference: bmgl.HeightReference.CLAMP_TO_GROUND,
+                image:'/largeScreenImg/project.png',
+                scale: 0.15
+              },
+            });
+            // 悬浮动作
+            // marker.on('mouseover', function (e) {
+            //   console.log(item)
+              // if (item.type === 'project') {
+              //   marker.bindTooltip('<div>测风塔名称：' + item.towerName + '</div>' + '<div>经度：' + item.longitude + '</div>' + '<div>纬度：' + item.latitude + '</div>',
+              //     {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
+              // } else {
+              //   marker.bindTooltip('<div>测风塔名称：' + item.towerName + '</div>' + '<div>经度：' + item.longitude + '</div>' + '<div>纬度：' + item.latitude + '</div>',
+              //     {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
+              // }
+
+            // })
+            // marker.on('mouseout', function () {
+            //   marker.bindTooltip().closeTooltip();
+            // })
+            // console.log(item.projectId)
+            // let projectId = item.projectId.find(w=>w.id===id)
+            // 点击动作
+            // marker.on('click', function (e) {
+            //   if(projectId !== undefined && projectId !== null){
+            //     if (projectId.type === 'project') {
+            //       let project = {projectId: id, equipmentNo: item.towerNo}
+            //       sessionStorage.setItem("emailWindTowerInfo", JSON.stringify(project))
+            //       _self.$store.dispatch('equipmentInfo/emailWindTowerInfo', JSON.stringify(project))
+            //       _self.$router.push({path: "/homepage/emailResourcesInfo"})
+            //     } else {
+            //       let station = {stationId: id, equipmentNo: item.towerNo}
+            //       sessionStorage.setItem("realWindTowerInfo", JSON.stringify(station))
+            //       _self.$store.dispatch('equipmentInfo/realWindTowerInfo', JSON.stringify(station))
+            //       _self.$router.push({path: "/homepage/realResourcesInfo"})
+            //     }
+            //   }else{
+            //     if (item.projectId[0].type === 'project') {
+            //       let project = {projectId: item.projectId[0].id, equipmentNo: item.towerNo}
+            //       sessionStorage.setItem("emailWindTowerInfo", JSON.stringify(project))
+            //       _self.$store.dispatch('equipmentInfo/emailWindTowerInfo', JSON.stringify(project))
+            //       _self.$router.push({path: "/homepage/emailResourcesInfo"})
+            //     } else {
+            //       let station = {stationId: item.projectId[0].id, equipmentNo: item.towerNo}
+            //       sessionStorage.setItem("realWindTowerInfo", JSON.stringify(station))
+            //       _self.$store.dispatch('equipmentInfo/realWindTowerInfo', JSON.stringify(station))
+            //       _self.$router.push({path: "/homepage/realResourcesInfo"})
+            //     }
+            //   }
+            // })
+
+
+
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+#container {
+  width: 100%;
+  height: calc(90vh);
+}
+
+#mouse_state {
+  position: absolute;
+  bottom: 0;
+  right: 5%;
+  background-color: rgb(160, 160, 160);
+  border: 1px solid rgb(89, 103, 116);
+  color: rgba(51, 51, 51, 1);
+  padding: 0 5px;
+}
+</style>

neim-ui/src/views/largeScreenPage/components/bigeHeatMap.vue

@@ -66,6 +66,7 @@ export default {
       bigemap.then(() => {
         // window.BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
         //window.BM.Config.HTTP_URL = 'http://10.124.252.243:9000';
+
         window.BM.Config.HTTP_URL = process.env.VUE_APP_GIS_API;
         let ip1 = process.env.VUE_APP_GIS_API;
         let ip2 = 'http://49.4.78.194:17143';

neim-ui/src/views/largeScreenPage/components/bigeHeatSunMap.vue

@@ -67,6 +67,7 @@ export default {
         // window.BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
         // window.BM.Config.HTTP_URL = 'http://192.168.1.181:9000';
         // window.BM.Config.HTTP_URL = 'http://10.124.252.243:9000';
+
         window.BM.Config.HTTP_URL = process.env.VUE_APP_GIS_API;
         let ip1 = process.env.VUE_APP_GIS_API;
         let ip2 = 'http://49.4.78.194:17143';

neim-ui/src/views/largeScreenPage/index.vue

@@ -2,12 +2,15 @@
   <div style="height:calc(100vh);width:100%;background: #000">
     <div class="page largeScreeanHomePage">
       <div class="timeBox">{{ time }}</div>
-      <div class="kaiguanBox"><img src="../../../public/largeScreenImg/kaiguan.png" style="width: 30px;height: 30px" @click="pushZaiXian()"/></div>
+      <div class="kaiguanBox"><img src="../../../public/largeScreenImg/kaiguan.png" style="width: 30px;height: 30px"
+                                   @click="pushZaiXian()"/></div>
+      <div class="mapImg"><img src="../../../public/largeScreenImg/tupian.png" style="width: 30px;height: 30px"
+                               @click="clickBtu('mapImg')"/></div>
       <div class="topTiltle">
         <img
-            class="titleImg"
-            referrerpolicy="no-referrer"
-            src="../../assets/largeScreenImg/index/heilongjiangshengfengziyuangaikuang.png"
+          class="titleImg"
+          referrerpolicy="no-referrer"
+          src="../../assets/largeScreenImg/index/heilongjiangshengfengziyuangaikuang.png"
         />
       </div>
       <div class="btuGroup">
@@ -28,9 +31,9 @@
 
           <div class="branckTitleBg">
             <img
-                class="tiltleLeftSign"
-                referrerpolicy="no-referrer"
-                src="../../assets/largeScreenImg/index/tiltleLeftSign.png"
+              class="tiltleLeftSign"
+              referrerpolicy="no-referrer"
+              src="../../assets/largeScreenImg/index/tiltleLeftSign.png"
             />
             <span class="branckTitle">黑龙江省风光资源概况</span>
           </div>
@@ -39,7 +42,7 @@
           </div>
         </div>
         <div class="mapBtuBg">
-          <div id="mapBtuOne" class="mapBtu mapBtuBefore" @click="clickBtu('mapBtuOne')">
+          <div id="mapBtuOne" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuOne')">
             <span class="mapBtuText">地形图</span>
           </div>
           <!--          <div id="mapBtuTwo" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuTwo')">-->
@@ -54,6 +57,11 @@
           <div id="mapBtuFive" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuFive')">
             <span class="mapBtuText">光资源分布图</span>
           </div>
+
+          <div id="mapImg" class="mapBtu mapBtuBefore" v-show="false"></div>
+        </div>
+        <div v-if="mapMark === 'mapImg'">
+          <img src="../../../public/largeScreenImg/mapImg.png"/>
         </div>
         <div v-if="mapMark === 'mapBtuOne'">
           <bige-map ref="childMethod" :mapValue="mapValue" @changeZoom="changeZoom"/>
@@ -77,18 +85,19 @@ import bigeMap from "@/views/largeScreenPage/components/bigeMap";
 import bigeHeatMap from "@/views/largeScreenPage/components/bigeHeatMap";
 import bigeHeatSunMap from "@/views/largeScreenPage/components/bigeHeatSunMap";
 import zaiXianBigeMap from "@/views/largeScreenPage/components/zaiXianBigeMap";
+
 import {provincialEnergyInfo} from "@/api/biz/dataQuery/largeScreenPage";
 
 export default {
   name: "index",
   components: {
-    bigeMap, bigeHeatMap, bigeHeatSunMap,zaiXianBigeMap
+    bigeMap, bigeHeatMap, bigeHeatSunMap, zaiXianBigeMap
   },
   data() {
     return {
       BM: null,
       Bmap: null,
-      rightShow:false,//右侧信息在七级以上才会显示
+      rightShow: false,//右侧信息在七级以上才会显示
       velocityLayer: null,
       leavel: {},
       latlngs: [[[0.0, 0.0], [0.0, 0.0]]],
@@ -96,7 +105,7 @@ export default {
       mTime: null,
       code: 230000,
       //==============
-      mapMark: 'mapBtuOne',
+      mapMark: 'mapImg',
       timer: null,
       time: '',
       resourcesOverview: '黑龙江处于高纬度地区，日照强度较大，太阳能转换率较高，为开发太阳能源提供了有理条件。特别是大兴安岭一带常年受到东亚西风带影响，具有风速大，气候干燥特点，与同维度地图相比，风资源更丰富，利于风能资源的开发与利用。',
@@ -118,8 +127,8 @@ export default {
     this.timer = setInterval(this.formatTime, 1000 * 60)
   },
   methods: {
-    changeZoom(val){
-      this.rightShow = val>=7
+    changeZoom(val) {
+      this.rightShow = val >= 7
     },
     getInfo() {
       this.mapValue = {
@@ -128,7 +137,7 @@ export default {
         center: [],//中心坐标
         allStationInfo: null,//场站坐标
       }
-      this.rightShow = this.$refs.childMethod.level !== null && this.$refs.childMethod.level !== undefined && this.$refs.childMethod.level>=7
+      // this.rightShow = this.$refs.childMethod.level !== null && this.$refs.childMethod.level !== undefined && this.$refs.childMethod.level >= 7
       provincialEnergyInfo().then(res => {
         this.resourcesOverview = res.data.resourcesOverview
       }).catch(err => {
@@ -141,28 +150,31 @@ export default {
     pushNext() {
       this.$router.push({path: "/homepage/provincialEnergyStations"})
     },
-    pushZaiXian(){
-      if(this.mapMark === 'mapBtuOne'){
+    pushZaiXian() {
+      if (this.mapMark === 'mapBtuOne') {
         let center = this.$refs.childMethod.center
         let level = this.$refs.childMethod.level
         this.mapValue = {
           params: new Date(),
-          level: level === ''?null:level,//地图层级
-          center: center.length === 0?[]:[center.lat,center.lng],//中心坐标
+          level: level === '' ? null : level,//地图层级
+          center: center.length === 0 ? [] : [center.lat, center.lng],//中心坐标
           allStationInfo: null,//场站坐标
         }
         this.mapMark = 'mapBtu'
       }
     },
     clickBtu(id) {
-      console.log(this.$refs.childMethod)
-      let center = this.$refs.childMethod.center
-      let level = this.$refs.childMethod.level
-      this.mapValue = {
-        params: new Date(),
-        level: level === ''?null:level,//地图层级
-        center: center.length === 0?[]:[center.lat,center.lng],//中心坐标
-        allStationInfo: null,//场站坐标
+      let center = []
+      let level = 6
+      if (this.$refs.childMethod !== undefined) {
+        center = this.$refs.childMethod.center
+        level = this.$refs.childMethod.level
+        this.mapValue = {
+          params: new Date(),
+          level: level === '' ? null : level,//地图层级
+          center: center.length === 0 ? [] : [center.lat, center.lng],//中心坐标
+          allStationInfo: null,//场站坐标
+        }
       }
       this.mapMark = id
       let clickItem = document.getElementById(id)
@@ -351,10 +363,18 @@ export default {
   align-items: center;
   margin-left: 20%;
 }
-.kaiguanBox{
+
+.kaiguanBox {
   cursor: pointer;
   position: absolute;
   left: 22%;
   top: .5%;
 }
+
+.mapImg {
+  cursor: pointer;
+  position: absolute;
+  left: 24%;
+  top: .5%;
+}
 </style>