<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>