|
|
@@ -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>
|
zy
