冲突

liuyg

2021-12-15 ae038d50b068a02c4fe53725095dc952bf75b797

 src/components/campusNav/index.vue

@@ -20,12 +20,12 @@
        <div class="container">
            <div class="tab">
                <ul>
                    <li @click="tabClick"
                    <li @click="tabClick('步行')"
                        :class="{on:tabOneFlag}">
                        <i></i>
                        步行
                    </li>
                    <li @click="tabClick"
                    <li @click="tabClick('驾车')"
                        :class="{on:tabTwoFlag}">
                        <i></i>
                        驾车
@@ -50,7 +50,8 @@
                    </div>
                </div>
                <div>
                    <el-button type="danger">导航</el-button>
                    <el-button @click="startNavigation"
                               type="danger">导航</el-button>
                </div>
            </div>
        </div>
@@ -58,13 +59,18 @@
</template>

<script>
import { mapGetters } from 'vuex'
import axios from 'axios'
export default {
    name: 'campusNav',
    data () {
        return {
            moveFlag: false,
            tabOneFlag: true,
            tabTwoFlag: false
            tabTwoFlag: false,
            DC: null,
            navigationWay: '步行',
            routeLayer: null
        }
    },
    props: {
@@ -74,6 +80,18 @@
        getToName: {
            type: String
        }
    },
    computed: {
        ...mapGetters([
            'viewer',
            // 起点
            'startingPoint',
            // 终点
            'terminus'
        ])
    },
    created () {
        this.DC = global.DC
    },
    methods: {
        move (e) {
@@ -125,9 +143,98 @@
        closeModel () {
            this.$parent.closeCampusNav()
        },
        tabClick () {
        tabClick (param) {
            this.navigationWay = param
            this.tabOneFlag = !this.tabOneFlag
            this.tabTwoFlag = !this.tabTwoFlag
        },
        startNavigation () {
            if (this.routeLayer == null) {
                this.routeLayer = new this.DC.VectorLayer('navigation')
                this.viewer.addLayer(this.routeLayer)
            } else {
                this.routeLayer.clear()
            }
            if (this.startingPoint == null) {
                this.$message('请输入起点！！！')
            }
            if (this.terminus == null) {
                this.$message('请输入终点！！！')
            }

            // var start = this.DC.Transform.transformWGS84ToCartesian()
            const startEntity = new this.DC.Billboard(new this.DC.Position(Number(this.startingPoint[0]), Number(this.startingPoint[1]), Number(this.startingPoint[2])), '/img/navicon/start.png')
            this.routeLayer.addOverlay(startEntity)
            // var end = this.DC.Transform.transformWGS84ToCartesian()
            const endEntity = new this.DC.Billboard(new this.DC.Position(Number(this.terminus[0]), Number(this.terminus[1]), Number(this.terminus[2])), '/img/navicon/end.png')
            this.routeLayer.addOverlay(endEntity)

            var routes = ''

            if (this.navigationWay == '步行') {
                axios.get('https://restapi.amap.com/v3/direction/walking', {
                    params: {
                        origin: `${Number(this.startingPoint[0]).toFixed(6)},${Number(this.startingPoint[1]).toFixed(6)}`,
                        destination: `${Number(this.terminus[0]).toFixed(6)},${Number(this.terminus[1]).toFixed(6)}`,
                        key: '4b3e1db3211054ce5b466407cbb9d221',
                        output: 'json'
                    }
                }).then(res => {
                    res.data.route.paths[0].steps.forEach(item => {
                        item.polyline += ';'
                        routes += item.polyline
                    })

                    routes = routes.substr(0, routes.length - 1)

                    const polyline = new this.DC.Polyline(routes)
                    polyline.setStyle({
                        width: 3,
                        material: new this.DC.PolylineTrailMaterialProperty({
                            color: this.DC.Color.RED,
                            speed: 10
                        }),
                        clampToGround: true
                    })
                    this.routeLayer.addOverlay(polyline)
                    this.viewer.flyTo(this.routeLayer)
                })
            } else {
                axios.get('https://restapi.amap.com/v3/direction/driving', {
                    params: {
                        origin: `${Number(this.startingPoint[0]).toFixed(6)},${Number(this.startingPoint[1]).toFixed(6)}`,
                        destination: `${Number(this.terminus[0]).toFixed(6)},${Number(this.terminus[1]).toFixed(6)}`,
                        key: '4b3e1db3211054ce5b466407cbb9d221',
                        strategy: 2,
                        extensions: 'all',
                        output: 'json'
                    }
                }).then(res => {
                    res.data.route.paths[0].steps.forEach(item => {
                        item.polyline += ';'
                        routes += item.polyline
                    })

                    routes = routes.substr(0, routes.length - 1)

                    const polyline = new this.DC.Polyline(routes)
                    polyline.setStyle({
                        width: 3,
                        material: new this.DC.PolylineTrailMaterialProperty({
                            color: this.DC.Color.RED,
                            speed: 10
                        }),
                        clampToGround: true
                    })
                    this.routeLayer.addOverlay(polyline)
                    this.viewer.flyTo(this.routeLayer)
                })
            }
        },
        clearLayer () {
            if (this.routeLayer != null) {
                this.routeLayer.clear()
            }
        }
    }
}