suerprisePlus
2024-07-30 e5e65bb50cbfb973f98191993ab559767eff7a53
src/views/visual/mapView/lineRoaming.vue
@@ -1,19 +1,26 @@
<template>
    <Popup ref="pop" top="20px" left="calc(100% - 600px)" :title="title" @close="close(true)" width="300px" :maxHeight="'700px'" @cancel="close(false)">
         <div class="menuBox">
            <el-form ref="form"   label-width="80px">
              <el-form-item label="线路:">
              </el-form-item>
              <el-form-item label="线路:">
              </el-form-item>
              <el-form-item>
                <el-button size="mini" >开始漫游</el-button>
                <el-button size="mini" >结束漫游</el-button>
              </el-form-item>
    <Popup ref="pop" top="20px" left="calc(100% - 600px)" :title="title" @close="close(true)" width="300px"
        :maxHeight="'700px'" @cancel="close(false)">
        <div class="menuBox">
            <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>
        </div>
    </Popup>
</template>
@@ -22,20 +29,26 @@
import {
    zhangzitou_selectAllLine
} 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,
        };
    },
    methods: {
        // 关闭弹窗
        close(isCloseBtn, removeLayer = true) {
            //   removeLayer && this.removeImageLayer();
            // 重置data值
            Object.assign(this.$data, this.$options.data());
            !isCloseBtn && this.$refs.pop.close();
@@ -46,14 +59,77 @@
            this.$refs.pop.open();
            this.romaLineStart();
        },
        romaLineStart(){
            zhangzitou_selectAllLine({
        romaLineStart() {
            zhangzitou_selectAllLine({
                limit: 100000,
                page: 1
            }).then((response)=>{
                console.log(response);
            }).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();
            })
        },
        setLineOptionChagne() {
            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), []);
            earthCtrl.factory.getFlyData(degreesArr, data => {
                data.showPoint = false;
                data.showLine = true;
                data.mode = 1;
            })
        },
        setRoamStop(){
        },
    },
};
</script>