<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="clearMap()">清除</button>
            <button @click="calculation('distance')">测距</button>
            <button @click="calculation('area')">侧面积</button>
            <button @click="test('初始视角')">初始视角</button>
            <button @click="test('浦江游览码头')">浦江游览码头</button>
            <button @click="test('对江轮渡码头')">对江轮渡码头</button>
            <button @click="test('浦江游览航线')">浦江游览航线</button>
            <button @click="test('对江轮渡航线')">对江轮渡航线</button>
            <button @click="test('船舶定位')">单船定位</button>
            <button @click="test('船舶撒点')">船舶</button>
            <button @click="test('码头泊位')">码头泊位</button>
            <button @click="test('航道')">航道</button>
            <button @click="test('锚地')">锚地</button>
            <button @click="test('掉头区')">掉头区</button>
            <button @click="test('警戒区')">警戒区</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,setCamera,addLayer} from "@/utils/map/ArcgisUtil"
    import {pjylLine, djldLine,djldLineAll,onePjylPortLocation,oneDjldPortLocation} from '@/utils/map/WaterPassenger'
    import {setBoat, setBoatPath, onLocationBoat, locationBoat} from '@/utils/map/Boat'
    import {setCenter} from '@/utils/map/Common'
    import {addLayerByName,closeAllLayer} from '@/utils/map/Layer'

    export default {
        name: "MapHome",
        data(){
            return{
                mapExtent:'',
                calculateFinish: false,
                showBoat: false,
                isShowPjylPort:false,
                isShowDjldPort:false,
                isShowPjylLine:false,
                isShowDjldLine:false,
                isShowBoat:false,
                isShowPortLayer:false,
                isShowJjqLayer:false,
                isShowDtqLayer:false,
                isShowMdLayer:false,
                isShowSsfwqLayer:false,
                isShowHbLayer:false,
                isShowHdLayer:false,
                isShowDbsLayer:false,
                isShowBmLayer:false,
            }
        },
        mounted(){
            //加载地图控件
            initBridge();
            setCenter();
        },
        methods:{
            fullExtent(){fullExtent()},
            calculation(type){calculation(type)},
            clearMap(){
                // clearMap()
                clearMap({is_draw: false, is_search:true, layers: []})
            },
            // 测试方法
            test(value){
                switch (value) {
                    case '浦江游览码头':
                        this.isShowPjylPort = !this.isShowPjylPort
                        onePjylPortLocation({
                            'portName':'金陵东路轮渡码头',
                            'mapx':'2360.10554497',
                            'mapy':'794.13869415'
                        },this.isShowPjylPort)
                        break
                    case '对江轮渡码头':
                        this.isShowDjldPort = !this.isShowDjldPort
                        oneDjldPortLocation({
                            'portName':'闵行轮渡站',
                            'mapx':'-4562.25034385326',
                            'mapy':'-26256.4229700345'
                        },this.isShowDjldPort)
                        break
                    case '浦江游览航线':
                        this.isShowPjylLine = !this.isShowPjylLine
                        pjylLine(this.isShowPjylLine)
                        break
                    case '对江轮渡航线':
                        this.isShowDjldLine = !this.isShowDjldLine
                        // djldLine('歇宁线',this.isShowDjldLine)
                        djldLineAll(this.isShowDjldLine)
                        break
                    case '船舶撒点':
                        this.isShowBoat = !this.isShowBoat
                        setBoat(this.isShowBoat)
                        break
                    case '船舶轨迹':
                        setBoatPath()
                        break
                    case '船舶定位':
                        locationBoat('412374820')
                        break
                    case '初始视角':
                        setCenter();
                        break
                    case '码头泊位':
                        this.isShowPortLayer = !this.isShowPortLayer
                        addLayerByName('mt',this.isShowPortLayer)
                        break
                    case '警戒区':
                        this.isShowJjqLayer = !this.isShowJjqLayer
                        addLayerByName('jjq',this.isShowJjqLayer)
                        break
                    case '掉头区':
                        this.isShowDtqLayer = !this.isShowDtqLayer
                        addLayerByName('dtq',this.isShowDtqLayer)
                        break
                    case '锚地':
                        this.isShowMdLayer = !this.isShowMdLayer
                        addLayerByName('md',this.isShowMdLayer)
                        break
                    case '水上综合服务器':
                        this.isShowSsfwqLayer = !this.isShowSsfwqLayer
                        addLayerByName('sszh',this.isShowSsfwqLayer)
                        break
                    case '航标':
                        this.isShowHbLayer = !this.isShowHbLayer
                        addLayerByName('hb',this.isShowHbLayer)
                        break
                    case '航道':
                        this.isShowHdLayer = !this.isShowHdLayer
                        addLayerByName('hd',this.isShowHdLayer)
                        break
                    case '水下地形':
                        this.isShowDbsLayer = !this.isShowDbsLayer
                        addLayerByName('sxdx',this.isShowDbsLayer)
                        break
                    case '白膜':
                        this.isShowBmLayer = !this.isShowBmLayer
                        addLayerByName('bm',this.isShowBmLayer)
                        break
                    case '关闭全部图层':
                        closeAllLayer()
                        break
                    default:
                }
            },
        }
    }
</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;
        left: 10px;
        width: 100px;
        height: 500px;
    }
</style>