语义功能添加

suerprisePlus

2024-08-05 30e393df7b1d89c4172a7f4bec6e80e2dc00c373

 src/views/visual/mapView/lineRoaming.vue

@@ -1,7 +1,7 @@
<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">
    <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="请选择">
@@ -20,6 +20,15 @@
                    <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>
@@ -27,7 +36,8 @@
<script>
import Popup from '@/components/Tool/Popup.vue';
import {
    zhangzitou_selectAllLine
    zhangzitou_selectAllLine,
    zhangzitou_selectAll
} from '@/api/mapView/map.js'
import WKT from 'terraformer-wkt-parser';
export default {
@@ -42,6 +52,7 @@
            value: '',
            value1: '',
            roamLine: null,
            flyRoamOption: [],
        };
    },

@@ -89,10 +100,22 @@
                    }
                })
                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 => {
@@ -109,16 +132,51 @@
        },
        setLineOption1Chagne() {
            this.roamLine = this.value1;
            console.log(this.lineOption1);
        },
        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 = 1;
                // 弹窗数据
                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(){
@@ -134,4 +192,29 @@
};
</script>

<style></style>
<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>