<template>
|
<div class="collectionPanel">
|
<div class="menutop">
|
<div class="menuback" @click="back">
|
<i class="el-icon-arrow-left"></i><span>返回</span>
|
</div>
|
<div class="menutitle">位置</div>
|
</div>
|
<div class="collectionContainer">
|
<!-- <el-tabs type="border-card">
|
<el-tab-pane label="收藏" v-if="dataSc.length !== 0">
|
<div class="collectionItem" v-for="(item, index) in dataSc" :key="index"
|
@click="goScPoint(item.position)">
|
<i class="el-icon-star-off"></i>
|
{{ item.name }}
|
<span style="float: right; margin-right: 0.2rem" v-on:click.stop="deleteSc(index)"><i
|
class="el-icon-delete"></i></span>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="收藏" v-else>
|
<div class="collectionItem" style="text-align: center">暂无数据！</div>
|
</el-tab-pane>
|
<el-tab-pane label="定位">
|
<div class="collectionItem" v-for="(item, index) in dataPosition" :key="index" @click="flyTo(item.geo)">
|
<i class="el-icon-location-outline"></i>{{ item.name }}
|
</div>
|
</el-tab-pane>
|
</el-tabs> -->
|
<el-radio-group v-model="selectedType">
|
<el-radio-button label="sc">收藏</el-radio-button>
|
<el-radio-button label="dw">定位</el-radio-button>
|
</el-radio-group>
|
|
<div class="scContainer" v-if="selectedType == 'sc'">
|
<div v-if="dataSc.length !== 0">
|
<div class="title"><span>收藏列表</span></div>
|
<div class="collectionItem" v-for="(item, index) in dataSc" :key="index"
|
@click="goScPoint(item.position)">
|
<img src="@/assets/img/collection/sc.png" />
|
<span>{{ item.name }}</span>
|
<span style="float: right; margin-right: 0.2rem" v-on:click.stop="deleteSc(index)"><i
|
class="el-icon-delete"></i></span>
|
</div>
|
</div>
|
<div class="emptyContainer" v-else>
|
<span>暂无数据！</span>
|
<img src="@/assets/img/collection/empty.png" />
|
</div>
|
</div>
|
<div class="dwContainer" v-else>
|
<div class="title"><span>定位列表</span></div>
|
<div class="collectionItem" v-for="(item, index) in dataPosition" :key="index" @click="flyTo(item.geo)">
|
<img src="@/assets/img/collection/scdw.png" /><span>{{ item.name }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
window.flyPoint = null;
|
import store from "@/utils/store2.js";
|
import { createPointMarker,flyToPoint } from '@/utils/map2.js'
|
export default {
|
name: 'CollectionPanel',
|
data() {
|
return {
|
dataSc: [],//收藏数据
|
dataPosition: [
|
{ name: "亦庄文化园", geo: "POINT(116.497869 39.813206)" },
|
{ name: "北京经开壹中心", geo: "POINT(116.562533 39.78587)" },
|
{ name: "汇通大厦", geo: "POINT(116.508368 39.79346)" },
|
],//定位数据
|
selectedType: 'sc'
|
}
|
},
|
mounted() {
|
this.dataSc = window.locations || [];
|
},
|
methods: {
|
goScPoint(position) {
|
store.setLocationCollectionShow(false);
|
sgworld.Viewer.camera.flyTo({
|
destination: position.destination,
|
duration: 3,
|
maximumHeight: 20000,
|
pitchAdjustHeight: 1500,
|
orientation: {
|
heading: position.orientation.heading,
|
pitch: position.orientation.pitch,
|
roll: position.orientation.roll,
|
},
|
});
|
},
|
flyTo(geo) {
|
store.setLocationCollectionShow(false);
|
let arr = geo.substring(6, geo.length - 1).split(' ');
|
let coords = [Number(arr[0]), Number(arr[1])]
|
flyToPoint(coords)
|
let layer = createPointMarker(coords, null);
|
window.map.addLayer(layer)
|
|
|
// let degrees = this.getPosition(geo);
|
// flyPoint && Viewer.entities.remove(flyPoint);
|
// sgworld.Navigate.flyToPointsInterest({
|
// destination: Cesium.Cartesian3.fromDegrees(
|
// degrees[0],
|
// degrees[1],
|
// 3000
|
// ),
|
// });
|
// flyPoint = Viewer.entities.add({
|
// position: Cesium.Cartesian3.fromDegrees(degrees[0], degrees[1]),
|
// billboard: {
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
// scale: 1,
|
// image: window.SmartEarthRootUrl + "/Workers/image/mark.png",
|
// heightReference: 1,
|
// disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
// },
|
// });
|
},
|
deleteSc(index) {
|
this.$confirm("删除该收藏点, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
this.dataSc.splice(index, 1);
|
// 把位置信息添加到缓存中
|
window.setLocations(this.dataSc);
|
// 从缓存中取出当前所有位置信息
|
this.dataSc = window.locations;
|
this.$message({ message: "删除成功！", duration: 1500, type: "success" });
|
})
|
.catch(() => {
|
this.$message({ type: "info", duration: 1500, message: "已取消删除" });
|
});
|
},
|
getPosition(geo) {
|
let p = geo && geo.replace("POINT(", "").replace(")", "");
|
return p.split(" ");
|
},
|
back() {
|
store.setLocationCollectionShow(false);
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
.collectionPanel {
|
position: absolute;
|
color: black;
|
width: 100%;
|
height: 100%;
|
background-color: white;
|
z-index: 1001;
|
}
|
|
.collectionContainer {
|
margin-top: 0.2rem;
|
padding: 0.1rem;
|
}
|
|
.emptyContainer {
|
margin-top: 0.2rem;
|
text-align: center;
|
}
|
|
.emptyContainer img {
|
width: 100%;
|
}
|
|
.scContainer {
|
margin-top: 0.2rem;
|
}
|
|
.dwContainer {
|
margin-top: 0.2rem;
|
}
|
|
.el-tabs--border-card /deep/ .el-tabs__header {
|
background-color: lightgray;
|
border-radius: 0.05rem;
|
}
|
|
.el-tabs {
|
position: absolute;
|
height: 80%;
|
width: 95%;
|
margin-left: 2.5%;
|
border-radius: 0.05rem;
|
}
|
|
.el-tabs /deep/ .el-tabs__nav-wrap {
|
border-top-left-radius: 0.05rem;
|
border-top-right-radius: 0.05rem;
|
}
|
|
.el-tabs /deep/ .el-tabs__item {
|
padding: 0 0.2rem;
|
height: 0.3rem;
|
line-height: 0.3rem;
|
font-size: 0.14rem;
|
}
|
|
.el-tabs /deep/ .el-tabs__content {
|
height: 90%;
|
overflow: scroll;
|
}
|
|
.title {
|
height: 0.4rem;
|
line-height: 0.4rem;
|
font-size: 16px;
|
border-bottom: 1px solid #E5E5E6;
|
}
|
|
.title span {
|
padding-left: 10px;
|
}
|
|
.collectionItem {
|
/* font-size: 0.16rem; */
|
/* background-color: rgb(228, 227, 227); */
|
/* margin-bottom: 0.1rem; */
|
height: 0.4rem;
|
line-height: 0.4rem;
|
/* border-radius: 0.05rem; */
|
padding-left: 0.1rem;
|
border-bottom: 1px solid #E5E5E6;
|
}
|
|
.collectionItem img {
|
width: 0.16rem;
|
}
|
|
.collectionItem span {
|
padding-left: 10px;
|
}
|
|
/deep/ .el-radio-button .el-radio-button__inner {
|
width: 184px !important;
|
}
|
</style>
|
