'1'
This commit is contained in:
Yq
commit
ab378b710b
@ -263,10 +263,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog :close-on-click-modal="true" :close-on-press-escape="false" v-model="showImage">
|
||||
<el-dialog :close-on-click-modal="true" :close-on-press-escape="false" v-model="showImage" style="margin-top: 120px !important">
|
||||
<div class="imgeShow" v-show="showImage">
|
||||
<div class="clsoeImageShow" @click="closeImage">X</div>
|
||||
<huan-bao-map-win v-if="showImage" :prjCode="prjCodeByHuanBaoWin"></huan-bao-map-win>
|
||||
<!-- <huan-bao-map-win v-if="showImage" :prjCode="prjCodeByHuanBaoWin"></huan-bao-map-win>-->
|
||||
<huan-bao-map-zzr-win v-if="showImage" :prjCode="prjCodeByHuanBaoWin"></huan-bao-map-zzr-win>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
@ -279,7 +280,8 @@ import BbgCpm from "../../BbgCpm";
|
||||
import {onMounted, ref, reactive, onUnmounted} from "vue";
|
||||
import popover from '../../../common/popover'
|
||||
import diyTable from '@/components/common/diytable/index'
|
||||
import HuanBaoMapWin from "@/components/Map/HuanBaoMap/HuanBaoMapWin.vue";
|
||||
// import HuanBaoMapWin from "@/components/Map/HuanBaoMap/HuanBaoMapWin.vue";
|
||||
import HuanBaoMapZzrWin from "@/components/Map/HuanBaoMap/HuanBaoMapZzrWin.vue"
|
||||
|
||||
import {
|
||||
selHsbpfqkSpecialized,
|
||||
@ -843,7 +845,6 @@ onMounted(() => {
|
||||
width: 2250px;
|
||||
height: 1929px;
|
||||
left: 20.68%;
|
||||
top: -50px;
|
||||
background-color: rgba(1, 18, 27);
|
||||
border: #0A878E 4px solid;
|
||||
border-radius: 16px;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="huan_bao_div" id="huanBaoMap"></div>
|
||||
<div class="huan_bao_div_win" id="huanBaoMap"></div>
|
||||
<div class="tu-li"></div>
|
||||
</template>
|
||||
|
||||
@ -107,7 +107,7 @@ const randomLayerId = () => Date.now().toString(36) + Math.random().toString(36)
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.huan_bao_div {
|
||||
.huan_bao_div_win {
|
||||
width: 2190px;
|
||||
height: 1780px;
|
||||
margin-top: 120px;
|
||||
@ -119,180 +119,6 @@ const randomLayerId = () => Date.now().toString(36) + Math.random().toString(36)
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 311px;
|
||||
height: 83px;
|
||||
background: url("@/assets/bdscreenImg/bBg/安全/nochoice.png") 100% no-repeat;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
font-size: 42px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 83px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.btn1 {
|
||||
left: -100px;
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
left: 350px;
|
||||
}
|
||||
|
||||
.btn3 {
|
||||
left: 800px;
|
||||
}
|
||||
|
||||
.btn4 {
|
||||
left: 1250px;
|
||||
}
|
||||
|
||||
.active {
|
||||
width: 311px;
|
||||
height: 83px;
|
||||
background: url("@/assets/bdscreenImg/bBg/安全/choice.png") 100% no-repeat;
|
||||
}
|
||||
|
||||
.topdia {
|
||||
visibility: hidden;
|
||||
height: 92px;
|
||||
//height: 277px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 82px;
|
||||
//z-index: 100;
|
||||
background: rgba(1, 18, 27, 0.9);
|
||||
border: 1px solid #00EFFE;
|
||||
|
||||
.w1 {
|
||||
width: 310px;
|
||||
height: 92px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 36px;
|
||||
color: #FFFFFF;
|
||||
line-height: 92px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hl {
|
||||
width: 308px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 173, 184, 0.99) 50%, rgba(0, 0, 0, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.animationTop1 {
|
||||
animation-duration: 0s;
|
||||
animation-name: slidein1;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@keyframes slidein1 {
|
||||
0% {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
60% {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
70% {
|
||||
opacity: .3;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
100% {
|
||||
visibility: visible;
|
||||
height: 200px;
|
||||
opacity: 1;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
.animationBottom1 {
|
||||
animation-duration: 1.5s;
|
||||
animation-name: slideout1;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@keyframes slideout1 {
|
||||
0% {
|
||||
visibility: visible;
|
||||
height: 200px;
|
||||
opacity: 1;
|
||||
z-index: 100;
|
||||
}
|
||||
30% {
|
||||
opacity: 0.3;
|
||||
z-index: 0;
|
||||
}
|
||||
40% {
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
100% {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animationTop {
|
||||
animation-duration: 0s;
|
||||
animation-name: slidein;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@keyframes slidein {
|
||||
0% {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
30% {
|
||||
opacity: .3;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
100% {
|
||||
visibility: visible;
|
||||
height: 277px;
|
||||
opacity: 1;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
.animationBottom {
|
||||
animation-duration: 1.5s;
|
||||
animation-name: slideout;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@keyframes slideout {
|
||||
0% {
|
||||
visibility: visible;
|
||||
height: 277px;
|
||||
opacity: 1;
|
||||
z-index: 100;
|
||||
}
|
||||
30% {
|
||||
opacity: .3;
|
||||
z-index: 0;
|
||||
}
|
||||
100% {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tu-li {
|
||||
width: 300px;
|
||||
height: 243px;
|
||||
|
||||
190
src/components/Map/HuanBaoMap/HuanBaoMapZzrWin.vue
Normal file
190
src/components/Map/HuanBaoMap/HuanBaoMapZzrWin.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<!-- 迎检多项目导入展示 -->
|
||||
<template>
|
||||
<div class='huan-bao-map-zzr-win-div' id='zsyZuoBiaoMap'></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref, onMounted, onBeforeUnmount, defineProps} from 'vue'
|
||||
import {TIAN_JING_MASK} from '../js/tian_jin_sd.js'
|
||||
import {TA_MESH_TYPE} from "../js/data.js"
|
||||
import type_icon_green from '../img/type_icon_green.png'
|
||||
import type_icon_red from '../img/type_icon_red.png'
|
||||
// 组件传值
|
||||
const props = defineProps({prjCode: String})
|
||||
|
||||
// 地图, 距离计算插件, 坐标转换, 模型加载器, 加载管理器
|
||||
let map, geometryUtil, convertTask, loading_manager = new THREE.LoadingManager(), loader = new THREE.GLTFLoader(loading_manager)
|
||||
// 页面加载后执行
|
||||
onMounted(() => {
|
||||
initMap()
|
||||
})
|
||||
// 初始化地图
|
||||
const initMap = async () => {
|
||||
let Key = import.meta.env.MODE === 'development' ? '408b7cf3f08a3cc6bc8740239d3f4f43' : import.meta.env.MODE === 'staging' ? '408b7cf3f08a3cc6bc8740239d3f4f43' : '16e40b6373753a25af016b00fe253719'
|
||||
let Secret = import.meta.env.MODE === 'development' ? 'b69d88dfe8c339b4a1e03798c4de909c' : import.meta.env.MODE === 'staging' ? 'b69d88dfe8c339b4a1e03798c4de909c' : 'ff8a70d5b536307598642fe7d9bd190c'
|
||||
await SGMap.tokenTask.login(Key, Secret)
|
||||
await SGMap.plugin(['SGMap.ConvertTask', 'SGMap.RoadNetLayer', 'SGMap.GeometryUtil'])
|
||||
map = new SGMap.Map({container: 'zsyZuoBiaoMap', zoom: 9, minZoom: 9, maxZoom: 19.8, style: 'aegis://styles/aegis/Satellite512', center: [117.39, 39.4]})
|
||||
map.on('style.load', function () {
|
||||
convertTask = new SGMap.ConvertTask()
|
||||
geometryUtil = new SGMap.GeometryUtil()
|
||||
map.setMaxBounds(map.getBounds()) // 显示显示范围
|
||||
new SGMap.RoadNetLayer({map: map, style: "aegis://styles/aegis/Road-v2"}).render() // 路网
|
||||
map.addLayer({
|
||||
id: 'mask', type: 'line', paint: {'line-color': '#00E5EE', 'line-width': 6},
|
||||
source: {type: 'geojson', data: {type: 'FeatureCollection', features: [{type: 'Feature', geometry: {type: 'MultiPolygon', coordinates: [TIAN_JING_MASK]}}]}}
|
||||
}) // 行政区域高亮
|
||||
map.loadImage(type_icon_green, (error, image) => map.addImage('type_icon_green', image))
|
||||
map.loadImage(type_icon_red, (error, image) => map.addImage('type_icon_red', image))
|
||||
loading_manager.onLoad = () => getDrawData()// 模型加载完成后调用获取内容层项目树数据
|
||||
for (let obj of TA_MESH_TYPE) {
|
||||
loader.load(obj.url, gltf => obj.mesh = gltf)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 获取绘制数据
|
||||
const getDrawData = async () => {
|
||||
|
||||
|
||||
// await prjLngLatConvert(prjObj)
|
||||
// prjDraw(prjObj)
|
||||
}
|
||||
|
||||
|
||||
// 项目绘制
|
||||
const prjDraw = prjObj => {
|
||||
const xlCircle = [], xlNumber = [], taNumLayerId = randomLayerId()
|
||||
for (const taObj of prjObj) {
|
||||
const position = [parseFloat(taObj.longitude), parseFloat(taObj.latitude)]
|
||||
xlNumber.push({type: 'Feature', geometry: {type: 'Point', coordinates: position}, properties: {taNumber: taObj.towerNo}})
|
||||
xlCircle.push({
|
||||
type: 'Feature', geometry: {type: 'Point', coordinates: position},
|
||||
properties: {icon: taObj.finished ? 'type_icon_green' : 'type_icon_red', color: taObj.finished ? '#00FF00' : '#FF0000'}
|
||||
})
|
||||
}
|
||||
map.addLayer({// 2D 大塔标
|
||||
id: randomLayerId(), type: 'symbol', maxzoom: 22, minzoom: 17, metadata: {text: '自定义数据'},
|
||||
source: {type: 'geojson', data: {type: 'FeatureCollection', features: xlCircle}},
|
||||
layout: {'icon-image': '{icon}', 'icon-size': 1, 'icon-ignore-placement': true, 'icon-allow-overlap': true, 'icon-anchor': 'center', 'icon-pitch-alignment': 'map'}
|
||||
})
|
||||
map.addLayer({// 2D 小塔标
|
||||
id: randomLayerId(), type: 'circle', maxzoom: 17, minzoom: 8, metadata: {text: '自定义数据'},
|
||||
source: {type: 'geojson', data: {type: 'FeatureCollection', features: xlCircle}},
|
||||
paint: {'circle-radius': 0, 'circle-stroke-color': ['get', 'color'], 'circle-stroke-width': 12, 'circle-pitch-alignment': 'map'}
|
||||
})
|
||||
map.addLayer({// 2D 塔号
|
||||
id: taNumLayerId, type: 'symbol', maxzoom: 22, minzoom: 8,
|
||||
source: {type: 'geojson', data: {type: 'FeatureCollection', features: xlNumber}},
|
||||
paint: {'text-color': '#fff800', 'text-halo-width': 0.1, 'text-halo-color': '#FFFFFF'},
|
||||
layout: {'text-ignore-placement': true, 'text-allow-overlap': true, 'text-field': '{taNumber}', 'text-size': 15, 'text-anchor': 'top'}
|
||||
})
|
||||
|
||||
const prjMap = treeData(prjObj)
|
||||
// 根据线头个数循环找下一个
|
||||
prjMap.forEach((value) => {
|
||||
const ta0 = value
|
||||
console.log(ta0.tensionTowerFlag);
|
||||
const typeObj = TA_MESH_TYPE[ta0.tensionTowerFlag]
|
||||
const mesh = typeObj.mesh.scene.clone()
|
||||
mesh.scale.multiplyScalar(typeObj.scalar)
|
||||
mesh.position.set(0, 0, typeObj.height)
|
||||
const rotation = [...typeObj.rotation]
|
||||
let meshs = [mesh]
|
||||
const one = [value.longitude, value.latitude]
|
||||
for (let i = 0; i < value.children.length; i++) {
|
||||
// 2D
|
||||
const two = [value.children[i].longitude, value.children[i].latitude]
|
||||
map.addLayer({
|
||||
id: randomLayerId(), type: 'line', paint: {'line-color': '#8430db', 'line-width': 5},
|
||||
source: {
|
||||
type: 'geojson', data: {type: 'FeatureCollection', features: [{type: 'Feature', geometry: {type: 'LineString', coordinates: [one, two]}}]}
|
||||
}
|
||||
})
|
||||
// 3D
|
||||
const ta1 = value.children[i]
|
||||
const typeObj1 = TA_MESH_TYPE[ta1.tensionTowerFlag]
|
||||
const length = geometryUtil.distance([parseFloat(ta0.longitude), parseFloat(ta0.latitude)], [parseFloat(ta1.longitude), parseFloat(ta1.latitude)]) * 0.005946
|
||||
const geometryR = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0, typeObj.xHeight), new THREE.Vector3(0, length, typeObj1.xHeight)])
|
||||
const line = new THREE.Line(geometryR, new THREE.LineBasicMaterial(0xFFFF00))
|
||||
line.rotation.z = Math.PI / 180 * (180.022 - getAngle(parseFloat(ta0.longitude), parseFloat(ta0.latitude), parseFloat(ta1.longitude), parseFloat(ta1.latitude)))//Math.PI / 180 *206
|
||||
if (ta0.taskSpecification != '电缆工井施工') {
|
||||
rotation[1] = rotation[1] + line.rotation.z // 根据线角度改变塔角度
|
||||
meshs.push(line)
|
||||
}
|
||||
}
|
||||
mesh.rotation.set(...rotation)
|
||||
if (meshs.length) {
|
||||
map.addLayer(newMeshLayer(randomLayerId(), [parseFloat(ta0.longitude), parseFloat(ta0.latitude)], meshs))
|
||||
}
|
||||
})
|
||||
map.moveLayer(taNumLayerId) // 塔号
|
||||
}
|
||||
|
||||
// 清除地图组件
|
||||
onBeforeUnmount(() => map.remove())
|
||||
|
||||
/**
|
||||
* 项目转换坐标
|
||||
* @param prjData 项目信息
|
||||
*/
|
||||
const prjLngLatConvert = async prjData => {
|
||||
for (let i = 0; i < prjData.length; i += 100) {
|
||||
const batch = prjData.slice(i, i + 100)
|
||||
const convertData = batch.map(item => ([item.longitude, item.latitude]))
|
||||
const result = await convertTask.convertCoord(convertData, {from: 1})
|
||||
// 处理当前批次的数据
|
||||
for (let j = 0; j < batch.length; j++) {
|
||||
try {
|
||||
prjData[i + j].longitude = result[j][0]
|
||||
prjData[i + j].latitude = result[j][1]
|
||||
} catch (e) {
|
||||
console.log(prjData[(i + j)], e)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 坐标转换树结构
|
||||
* @param prjData 项目数据
|
||||
* @returns {Map<any, any>} 树结构数据
|
||||
*/
|
||||
const treeData = prjData => {
|
||||
const map = new Map()
|
||||
prjData.forEach(item => map.set(item.towerNo, {...item, children: []}))
|
||||
prjData.forEach(item => {
|
||||
if (item.upstreamTowerNo != null && map.get(item.upstreamTowerNo) != null) {
|
||||
map.get(item.towerNo).children.push(map.get(item.upstreamTowerNo))
|
||||
}
|
||||
})
|
||||
return map
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
///*引入字体*/
|
||||
//@font-face {
|
||||
// font-family: 'iconfont';
|
||||
// src: url('./iconfont/iconfont.ttf?t=1733817783512') format('truetype');
|
||||
//}
|
||||
|
||||
/*字体样式*/
|
||||
//.iconfont {
|
||||
// font-family: "iconfont" !important;
|
||||
// font-style: normal;
|
||||
// -webkit-font-smoothing: antialiased;
|
||||
// -moz-osx-font-smoothing: grayscale;
|
||||
//}
|
||||
|
||||
|
||||
.huan-bao-map-zzr-win-div {
|
||||
width: 2190px;
|
||||
height: 1780px;
|
||||
margin-top: 120px;
|
||||
margin-left: 26px;
|
||||
}
|
||||
</style>
|
||||
BIN
src/components/Map/img/type_icon_green.png
Normal file
BIN
src/components/Map/img/type_icon_green.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/components/Map/img/type_icon_red.png
Normal file
BIN
src/components/Map/img/type_icon_red.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
10
src/components/Map/js/data.js
Normal file
10
src/components/Map/js/data.js
Normal file
@ -0,0 +1,10 @@
|
||||
// 塔模型类型数据[类别0 {url:模型地址, height:模型地面高度, xHeight:挂线高度, xRadius:挂线半径, scalar:放大倍数, rotation:旋转}]
|
||||
const TA_MESH_TYPE = [
|
||||
{url: '/sgtjzhzxsp/mesh/ta/zhixian/zxt.gltf', height: 0, xHeight: 0.14, xRadius: 0.032, scalar: 0.015, rotation: [Math.PI / 2, 0, 0]},
|
||||
{url: '/sgtjzhzxsp/mesh/ta/naizhang/nzt.gltf', height: 0, xHeight: 0.14, xRadius: 0.032, scalar: 0.015, rotation: [Math.PI / 2, 0, 0]},
|
||||
{url: '/sgtjzhzxsp/mesh/gongjing/gj.gltf', height: 0, xHeight: 0.14, xRadius: 1.032, scalar: 1.05, rotation: [Math.PI / 2, Math.PI / 2, 0]}
|
||||
]
|
||||
|
||||
|
||||
// 导出
|
||||
export {TA_MESH_TYPE}
|
||||
Loading…
Reference in New Issue
Block a user