<template>
|
<Popup ref="pop" top="20px" left="calc(100% - 600px)" :title="title" @close="close(true)" width="400px"
|
:maxHeight="'500px'" @cancel="close(false)">
|
<div class="menuBox1" style="height: 480px">
|
<el-form ref="form" label-width="80px">
|
<el-form-item label="线路:">
|
<el-select v-model="value" @chagne="setLineOptionChagne" placeholder="请选择">
|
<el-option v-for="item in lineOption" :key="item.value" :label="item.name" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="线路:">
|
<el-select v-model="value1" placeholder="请选择">
|
<el-option v-for="item in lineOption1" :key="item.value" :label="item.name" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="mini" @click="setRoamStart">开始漫游</el-button>
|
<el-button size="mini" @click="setRoamStop">结束漫游</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="romContent" v-show="flyRoamOption.length != 0">
|
<table>
|
<tr v-for="(item, index) in flyRoamOption" :key="index">
|
<td> {{ item.line }}</td>
|
<td> {{ item.name }}</td>
|
<td> {{ item.type }}</td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from '@/components/Tool/Popup.vue';
|
import {
|
zhangzitou_selectAllLine,
|
zhangzitou_selectAll
|
} from '@/api/mapView/map.js'
|
import WKT from 'terraformer-wkt-parser';
|
export default {
|
name: 'location',
|
components: { Popup },
|
data() {
|
return {
|
title: '线路漫游',
|
lineOption: [],
|
lineOption1: [],
|
lineObj: null,
|
value: '',
|
value1: '',
|
roamLine: null,
|
flyRoamOption: [],
|
};
|
},
|
|
|
methods: {
|
// 关闭弹窗
|
close(isCloseBtn, removeLayer = true) {
|
// 重置data值
|
Object.assign(this.$data, this.$options.data());
|
!isCloseBtn && this.$refs.pop.close();
|
},
|
// 打开弹窗
|
open() {
|
this.close(true);
|
this.$refs.pop.open();
|
this.romaLineStart();
|
},
|
romaLineStart() {
|
zhangzitou_selectAllLine({
|
limit: 100000,
|
page: 1
|
}).then((response) => {
|
if (response.data.code != 200) return
|
this.lineOption = [];
|
this.lineObj = response.data.result.pois;
|
this.lineObj.map(item => {
|
if (this.lineOption.length == 0) {
|
this.lineOption.push({
|
name: item.line,
|
value: item.line
|
})
|
} else {
|
const n = this.lineOption.filter(r => {
|
if (r.name == item.line) {
|
return r
|
}
|
|
})
|
if (n.length == 0) {
|
this.lineOption.push({
|
name: item.line,
|
value: item.line
|
})
|
}
|
}
|
})
|
this.value = this.lineOption[0].value
|
|
this.setLineOptionChagne();
|
})
|
},
|
setRoamPoint() {
|
zhangzitou_selectAll({
|
limit: 100000,
|
page: 1,
|
line: this.value
|
}).then(response => {
|
if (response.data.code != 200) return
|
this.flyRoamOption = response.data.result.pois;
|
})
|
},
|
setLineOptionChagne() {
|
this.setRoamPoint();
|
const a = this.value
|
this.lineOption1 = [];
|
this.lineObj.map(item => {
|
if (item.line == a) {
|
this.lineOption1.push({
|
name: item.name,
|
value: item.geom,
|
})
|
}
|
})
|
this.value1 = this.lineOption1[0].value;
|
this.setLineOption1Chagne();
|
|
},
|
setLineOption1Chagne() {
|
this.roamLine = this.value1;
|
},
|
setRoamStart() {
|
if (!this.roamLine) return;
|
const obj = WKT.parse(this.roamLine).coordinates[0]
|
var degreesArr = obj.reduce((combined, current) => combined.concat(current), []);
|
|
const sgworld = earthCtrl;
|
var url = SmartEarthRootUrl + "Workers/Model/xiaoche.glb";
|
const routeData = {
|
"geometry": {
|
"type": "LineString",
|
"coordinates": degreesArr
|
}
|
}
|
// const fly = sgworld.factory.createDynamicObject(routeData, url, shuj);
|
earthCtrl.factory.getFlyData(degreesArr, data => {
|
data.showPoint = false;
|
data.showLine = true;
|
data.mode = 0;
|
// 弹窗数据
|
window.PathAnimationData = {
|
flyData: data,
|
positionEndCallback: (res) => {
|
|
}
|
};
|
|
window.PathAnimationData.winIndex = layer.open({
|
type: 2,
|
title: '路径动画',
|
shade: false,
|
area: ['0px', '0px'],
|
offset: 'r',
|
skin: 'other-class',
|
content: SmartEarthRootUrl + 'Workers/path/Path.html',
|
end: function () {
|
PathAnimationData.fly && PathAnimationData.fly.exit();
|
}
|
});
|
layer.style(window.PathAnimationData.winIndex
|
, {
|
display: 'none'
|
}
|
)
|
})
|
},
|
setRoamStop() {
|
window.PathAnimationData.fly && window.PathAnimationData.fly.exit();
|
},
|
|
|
|
|
|
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.menuBox1 {
|
height: 500px;
|
width: 100%;
|
display: flex;
|
|
flex-direction: column;
|
|
.romContent {
|
flex: 1;
|
|
overflow: auto;
|
|
table {
|
width: 100%;
|
}
|
|
td {
|
font-family: microsoft yahei;
|
font-size: 16px;
|
text-align: center;
|
padding: 10px 20px;
|
}
|
}
|
}
|
</style>
|
