OpenLayer切换天地图底图

OpenLayer切换天地图底图

1.HTML代码

<el-button type="primary" @click="change_img">影像</el-button>
<el-button type="primary" @click="change_vec">街道</el-button>
<el-button type="primary" @click="change_ter">地形</el-button>

2.js代码

// 影像
change_img (){
    let img = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url:  'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=key'
        })
    });
    let cia = new ol.layer.Tiler({
        source: new XYZ({
            url:  "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=key"
        })
    });
    this.map.addLayer(img);
    this.map.addLayer(cia);
},
// 街道
change_vec (){
    let img = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url:  'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=key'
        })
    });
    let cia = new ol.layer.Tiler({
        source: new XYZ({
            url:  "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=key"
        })
    });
    this.map.addLayer(img);
    this.map.addLayer(cia);
},
// 地形
change_ter (){
    let img = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url:  'http://t4.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=key'
        })
    });
    let cia = new ol.layer.Tiler({
        source: new XYZ({
            url:  "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=key"
        })
    });
    this.map.addLayer(img);
    this.map.addLayer(cia);
},
全部评论

相关推荐

07-15 12:15
门头沟学院 Java
点赞 评论 收藏
分享
能干的三文鱼刷了10...:公司可能有弄嵌入式需要会画pcb的需求,而且pcb能快速直观看出一个人某方面的实力。看看是否有面试资格。问你问题也能ai出来,pcb这东西能作假概率不高
点赞 评论 收藏
分享
Lorn的意义:你这标个前端是想找全栈吗?而且项目确实没什么含金量,技术栈太少了,边沉淀边找吧 现在学院本想就业好一点四年至少得高三模式两年加油吧
点赞 评论 收藏
分享
评论
1
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务