<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>
VUE+OPENLAYER系列三:天地图
最新推荐文章于 2024-08-06 15:29:56 发布