创建新仓库
This commit is contained in:
343
src/renderer/components/dialog/flyToLocation.vue
Normal file
343
src/renderer/components/dialog/flyToLocation.vue
Normal file
@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<div class="flyToLocation" id="flyToLocationPopup">
|
||||
<div class="title" id="titles">
|
||||
<span class="content">
|
||||
坐标定位
|
||||
<span class="closeBox">
|
||||
<span @click="cancel">✕</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="is84 == 'EPSG:4326'">
|
||||
<div class="name" style="height: 0;">
|
||||
<el-divider></el-divider>
|
||||
</div>
|
||||
<div class="name">
|
||||
<span>经度：</span>
|
||||
<el-input type="number" size="small" class="public" @input="(val) => lngNum(val)" v-model="lng" :max="180"
|
||||
:min="-180" />
|
||||
</div>
|
||||
<div class="name">
|
||||
<span>纬度：</span>
|
||||
<el-input type="number" size="small" class="public" @input="(val) => latNum(val)" v-model="lat" :max="90"
|
||||
:min="-90" />
|
||||
</div>
|
||||
<div class="name">
|
||||
<span>定位：</span>
|
||||
<el-button size="small" @click="submit">
|
||||
<i class="el-icon-location-outline el-icon--left"></i>
|
||||
跳转</el-button>
|
||||
</div>
|
||||
<div class="name" style="height: 0;">
|
||||
<el-divider></el-divider>
|
||||
</div>
|
||||
<!-- <div class="name">
|
||||
<span>高度：</span>
|
||||
<input class="public" @input="a" v-model="alt" />
|
||||
</div>-->
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="name" style="height: 0;">
|
||||
<el-divider></el-divider>
|
||||
</div>
|
||||
<div class="name">
|
||||
<span>x：</span>
|
||||
<input type="number" class="public" v-model="x" />
|
||||
</div>
|
||||
<div class="name">
|
||||
<span>y：</span>
|
||||
<input type="number" class="public" v-model="y" />
|
||||
</div>
|
||||
<div class="name">
|
||||
<span>定位：</span>
|
||||
<el-button size="small" @click="submit">
|
||||
<i class="el-icon-location-outline el-icon--left"></i>
|
||||
跳转</el-button>
|
||||
</div>
|
||||
<div class="name" style="height: 0;">
|
||||
<el-divider></el-divider>
|
||||
</div>
|
||||
<!-- <div class="name">
|
||||
<span>高度：</span>
|
||||
<input class="public" @input="a" v-model="alt" />
|
||||
</div>-->
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-button size="small" type="danger" @click="cancel">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { setMove } from "../myHeaderAll/systemPopup/js/moveDiv";
|
||||
|
||||
export default {
|
||||
name: "flyToLocation",
|
||||
data() {
|
||||
return {
|
||||
lng: 0,
|
||||
lat: 0,
|
||||
alt: null,
|
||||
x: 0,
|
||||
y: 0,
|
||||
is84: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
setMove("titles", "flyToLocationPopup");
|
||||
},
|
||||
|
||||
methods: {
|
||||
lngNum(val) {
|
||||
// 最大只能输入数字180
|
||||
if (val > 180) {
|
||||
this.lng = 180;
|
||||
return;
|
||||
}
|
||||
// 最小只能输入数字-180
|
||||
if (val < -180) {
|
||||
this.lng = -180;
|
||||
return;
|
||||
}
|
||||
},
|
||||
latNum(val) {
|
||||
// 最大只能输入数字90
|
||||
if (val > 90) {
|
||||
this.lat = 90;
|
||||
return;
|
||||
}
|
||||
// 最小只能输入数字-90
|
||||
if (val < -90) {
|
||||
this.lat = -90;
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
cancel() {
|
||||
console.log();
|
||||
this.$changeComponentShow(".flyToLocationBox", false);
|
||||
this.lng = 0;
|
||||
this.lat = 0;
|
||||
if (window.earthPlaceMap) {
|
||||
window.earthPlaceMap.forEach((item) => {
|
||||
item.remove();
|
||||
});
|
||||
window.earthPlaceMap.clear();
|
||||
}
|
||||
},
|
||||
init(data) {
|
||||
console.log("init", data);
|
||||
this.is84 = data;
|
||||
},
|
||||
submit() {
|
||||
let positions;
|
||||
|
||||
if (window.earthPlaceMap === undefined) {
|
||||
window.earthPlaceMap = new Map();
|
||||
}
|
||||
if (window.earthPlaceMap.size) {
|
||||
window.earthPlaceMap.forEach((item) => {
|
||||
item.remove();
|
||||
});
|
||||
window.earthPlaceMap.clear();
|
||||
}
|
||||
if (this.is84 == "EPSG:4326") {
|
||||
console.log(this.lng, this.lat);
|
||||
if (this.lng === '' || this.lat === '') {
|
||||
this.$message.warning("经度纬度不能为空");
|
||||
return;
|
||||
}
|
||||
if (Number(this.lng) !== NaN && Number(this.lat) !== NaN) {
|
||||
// let id = new YJ.Tools().randomString();
|
||||
positions = { lng: this.lng, lat: this.lat, alt: this.alt };
|
||||
}
|
||||
} else {
|
||||
if (Number(this.x) !== NaN && Number(this.y) !== NaN) {
|
||||
let tool = new YJ.Tools();
|
||||
let result = tool.convert(
|
||||
[{ x: this.x, y: this.y }],
|
||||
this.$store.state.systemSetting.system.coordinate,
|
||||
"EPSG:4326"
|
||||
);
|
||||
let point = result.points[0];
|
||||
positions = { lng: point.x, lat: point.y, alt: point.z };
|
||||
}
|
||||
}
|
||||
let id = "12333fsfsajkhdjwu8877";
|
||||
let params = {
|
||||
id,
|
||||
positions,
|
||||
billboard: {
|
||||
show: true,
|
||||
image:
|
||||
"http://localhost:" +
|
||||
window.staticPort +
|
||||
"/" +
|
||||
"GEMarker1/A-location.png",
|
||||
},
|
||||
show: true,
|
||||
label: {
|
||||
show: true,
|
||||
text: "目标点",
|
||||
// fontSize: 6,
|
||||
color: "#FFF200FF",
|
||||
},
|
||||
heightMode: 2
|
||||
};
|
||||
let entity = new YJ.Obj.BillboardObject(window.Earth1, params);
|
||||
entity.entity.billboard.heightReference = 1;
|
||||
entity.entity.label.heightReference = 1;
|
||||
window.earthPlaceMap.set(id, entity);
|
||||
entity.flyTo({
|
||||
orientation: {
|
||||
heading: Cesium.Math.toRadians(0.0),
|
||||
pitch: Cesium.Math.toRadians(-89.0),
|
||||
roll: Cesium.Math.toRadians(0.0),
|
||||
},
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.flyToLocation {
|
||||
width: 15vw;
|
||||
top: 12vh;
|
||||
left: 14vh;
|
||||
border: 1.5px solid;
|
||||
backdrop-filter: blur(2px);
|
||||
background: linear-gradient(0deg, #00ffff33 0%, #00ffff00 100%),
|
||||
rgba(0, 0, 0, 0.6);
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
border-image: linear-gradient(to bottom,
|
||||
rgb(0, 255, 255) 6.25%,
|
||||
rgb(0, 200, 255) 100%) 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.el-input__inner{
|
||||
padding: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.el-divider--horizontal {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-divider {
|
||||
background-color: rgba(204, 204, 204, 0.2);
|
||||
}
|
||||
|
||||
.closeBox {
|
||||
right: 0;
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 26px;
|
||||
border-radius: 0 0 0 90%;
|
||||
background: #00ffff8f;
|
||||
|
||||
&>span {
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
|
||||
font-family: 'alimamashuheiti';
|
||||
|
||||
&:hover {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 93%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
height: 30px;
|
||||
margin: 10px 0;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: rgba(230, 247, 255, 1);
|
||||
|
||||
.el-button {
|
||||
color: #fff;
|
||||
background: rgba(0, 255, 255, 0.2);
|
||||
border-color: rgba(0, 255, 255, .5);
|
||||
}
|
||||
}
|
||||
|
||||
.public {
|
||||
width: 10vw;
|
||||
height: 100%;
|
||||
outline: 0;
|
||||
// background: rgba(0, 0, 0, 0.4);
|
||||
// padding-left: 6px;
|
||||
// box-sizing: border-box;
|
||||
// color: white;
|
||||
// border-radius: 5px;
|
||||
// margin-left: 5px;
|
||||
// border: 1px solid rgba(0, 255, 255, 0.5);
|
||||
|
||||
.el-input__inner {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
border-color: rgba(0, 255, 255, .5);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 10px 0;
|
||||
margin-top: 25px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
|
||||
.el-button {
|
||||
color: #fff;
|
||||
background: rgba(0, 255, 255, 0.2);
|
||||
border-color: rgba(0, 255, 255, .5);
|
||||
}
|
||||
|
||||
.space {
|
||||
margin: 0 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flyToLocation::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: -1.5px;
|
||||
top: -6px;
|
||||
width: 70.5px;
|
||||
height: 6px;
|
||||
opacity: 1;
|
||||
background: aqua;
|
||||
clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 6px, 0 6px);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user