<template>
    <div id="map_div">
        <iframe id="i_map" name="i_map" frameborder="0" style="width: 100%; height: 100%;"></iframe>
        <div id="tool_div">
            <button @click="fullExtent()">全景</button>
            <button @click="calculation('distance')">测距</button>
            <button @click="calculation('area')">侧面积</button>
            <button @click="clearMap()">清除</button>
            <button @click="test('浦江游览码头')">浦江游览码头</button>
            <button @click="test('浦江游览航线')">浦江游览航线</button>
            <button @click="test('对江轮渡航线')">对江轮渡航线</button>
            <button @click="test('船舶撒点')">船舶撒点</button>
            <button @click="test('船舶定位')">船舶定位</button>
        </div>
    </div>
</template>

<script>
    import {initBridge,fullExtent,calculation,clearMap} from "@/utils/map/ArcgisUtil"
    import {pjylLine, djldLine} from '@/utils/map/WaterPassenger'
    import {setBoat, setBoatPath, onLocationBoat, locationBoat} from '@/utils/map/Boat'

    export default {
        name: "MapHome",
        data(){
            return{
                mapExtent:'',
                calculateFinish: false,
                showBoat: false,
            }
        },
        mounted(){
            //加载地图控件
            initBridge();
        },
        methods:{
            fullExtent(){fullExtent()},
            calculation(type){calculation(type)},
            clearMap(){clearMap()},
            // 测试方法
            test(value){
                switch (value) {
                    case '浦江游览码头':
                        pjylPortLocation({
                            'portName':'东方明珠旅游码头',
                            'mapx':'2360.10554497',
                            'mapy':'794.13869415'
                        })
                        break
                    case '浦江游览航线':
                        pjylLine()
                        break
                    case '对江轮渡航线':
                        djldLine('歇宁线')
                        break
                    case '船舶撒点':
                        setBoat()
                        break
                    case '船舶轨迹':
                        setBoatPath()
                        break
                    case '船舶定位':
                        locationBoat('413810782')
                        break
                }
            },
        }
    }
</script>

<style scoped>
    #map_div{
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    #tool_div {
        display: none;
        background-color: #cccccc;
        z-index: 10;
        position: absolute;
        top: 10px;
        right: 10px;
        width: 100px;
        height: 500px;
    }
</style>