344 lines
7.9 KiB
Vue
344 lines
7.9 KiB
Vue
<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 size="small" class="public" @input="(val) => lngNum(val)" v-model="lng" :max="180"
|
||
:min="-180" />
|
||
</div>
|
||
<div class="name">
|
||
<span>纬度：</span>
|
||
<el-input 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>
|
||
<el-input size="small" class="public" v-model="x" />
|
||
</div>
|
||
<div class="name">
|
||
<span>y：</span>
|
||
<el-input size="small" 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>
|