<template>
    <div>
        <div>這是天地圖，很快</div>
        <div id="map"></div>
        <div>
            <button @click="change_img">切換影像底圖</button>
            <button @click="change_vec">切換街道底圖</button>
            <button @click="change_ter">切換地形底圖</button>
        </div>
    </div>
</template>

<script>
    import Map from 'ol/Map'
    import View from 'ol/View'
    import TileLayer from 'ol/layer/Tile'
    import XYZ from 'ol/source/XYZ'
    export default {
        name: 'XiamenMap',
        data () {
            return {
                map: null,
                tk: 'XXXXXXXXXXXXXXXXXXXXXX'   //這裡換成你自己的key，要去申請
            }
        },
        mounted () {
            var view =new View({
                //center: transform([118.11, 24.49], "EPSG:4326", "EPSG:3857"),
                center: [118.11, 24.49],
                zoom: 12,
                projection: 'EPSG:4326'
            })
            this.map = new Map({
                target: 'map',
                layers: [
                    new TileLayer({
                        source: new XYZ({
                            url:  'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk='+this.tk
                        })
                    }),
                    new TileLayer({
                        source: new XYZ({
                            url:  'http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk='+this.tk
                        })
                    })
                ],
                view: view
            })
        },
        methods:{
            change_img (){
                var map_img = new TileLayer({
                    source: new XYZ({
                        url:  'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk='+this.tk
                    })
                });

                var map_cia = new TileLayer({
                    source: new XYZ({
                        url:  'http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk='+this.tk
                    })
                });

                this.map.addLayer(map_img);
                this.map.addLayer(map_cia);
            },
            change_vec(){
                var map_cva= new TileLayer({
                    source: new XYZ({
                        url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk='+this.tk
                    })
                });
                var map_vec =new TileLayer({
                    source: new XYZ({
                        url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk='+this.tk
                    })
                });

                this.map.addLayer(map_vec);
                this.map.addLayer(map_cva);
                //console.log(this.map.getLayers());
            },
            change_ter(){
                var map_ter =new TileLayer({
                    source: new XYZ({
                        url: 'http://t0.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk='+this.tk
                    })
                });
                var map_cta =new TileLayer({
                    source: new XYZ({
                        url:  'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk='+this.tk
                    })
                });
                this.map.addLayer(map_ter);
                this.map.addLayer(map_cta);
            }
        }
    }
</script>

<style scoped>
    #map{height: 600px;width: 100%}
</style>