使用ol进行底图的切换

使用openLayer进行天地图的显示，以及底图的切换

<template>
    <div>
    <div id="mapDiv" class="mapDiv">
    </div>
    <button @click="change_img">切换影像底图</button>
    <button @click="change_vec">切换街道底图</button>
    <button @click="change_ter">切换地形底图</button>
  </div>

</template>
<script>

import MapInit from '../components/tianditu/Mapinit.js';
import Map from 'ol/Map'
  import View from 'ol/View'
  import TileLayer from 'ol/layer/Tile'
  import OSM from 'ol/source/OSM'
  import XYZ from 'ol/source/XYZ'
  import {fromLonLat} from 'ol/proj.js';

export default ({
    data(){
         return {
        map: null,
        map_img:null,
        map_vec:null,
        map_ter:null,
      }
    },
    methods:{
      
    change_img (){
        var img = new TileLayer({
          source: new XYZ({
            url:  'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你的密钥'
          })
        });
        this.map.addLayer(img)
      },
      change_vec(){
        var map_cva= new TileLayer({
          source: new XYZ({
            url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=你的密钥"
          })
        });
        var map_vec =new TileLayer({
          source: new XYZ({
            url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&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://t4.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=你的密钥"
          })
        });
        var map_cta =new TileLayer({
          source: new XYZ({
            url:  "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=你的密钥"
          })
        });
        this.map.addLayer(map_ter);
        this.map.addLayer(map_cta);
      }
    

    
    },
    mounted() {
        
      var view =new View({
        center: fromLonLat([-0.1275, 51.507222]),
        zoom: 6
      })
       var img = new TileLayer({
          source: new XYZ({
            url:  'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你的密钥'
          })
        });
        
      this.map = new Map({
        target: 'mapDiv',
        layers: [          
         img
        ],
        view: view
      })
       
    }


})
</script>

<style scoped>
 #mapDiv {
  100%;
height:800px;
}

</style>