openlayers切换图层的几种方法

openlayers切换图层的几种方法

const gaode = new ol.layer.Tile({
    title: "vector",
    source: new ol.source.XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
    wrapX: false
    })
});
const image = new ol.layer.Tile({
    title: "image",
    source: new ol.source.XYZ({
    url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
    wrapX: false
    }),
})

实例化上图

/* 实例化地图 */
const map = new ol.Map({
    target: "map",
    layers: [gaode, image],
    view: new ol.View({
        /* 设置中心点 */
        center: [50, 30],
        /* 设置放大级别 */
        zoom: 6,
        /* 设置坐标的参考系 */
        projection: "EPSG:4326"
    })
})

这里创建了两个瓦片图层，gaode和image，接下来将以鼠标单击切换图层为例，从以下几个角度来分析实现这两个图层的切换 

1.控制透明度 opacity

由于实例化地图时的瓦片堆叠，默认能看到的图层为image，图层的opacity值默认为1，可以通过修改opacity的值来显示/隐藏image图层

map.on("click", () => {
    let opacity = image.getOpacity();
    if(opacity){
        image.setOpacity(0)
    }else{
        image.setOpacity(1)
    }
})

2.控制层级zindex

控制image图层的zindex，zindex==-1时，gaode图层将显示

map.on("click", () => {
    let val = image.getZIndex();
    if (!val) {
        image.setZIndex(-1)
    } else {
        image.setZIndex(0)
    }
})

3.切换图层的visible属性

修改图层的visible属性，visible属性的值为布尔值，默认为true

map.on("click", () => {
    let visible = image.getVisible();
    image.setVisible(!visible);
})

4.直接删除或添加图层

使用map的添加和移除图层的方法addLayer,removeLayer

let isToggle = true
map.on("click", () => {
    isToggle = !isToggle;
    if (isToggle) {
        map.addLayer(image)
    } else {
        map.removeLayer(image)
    }
})