【09】openlayers 图片图层

效果：

 

 创建地图：

var map = new ol.Map({
    //设置显示地图的视图
    view: new ol.View({
        projection:'EPSG:4326',//投影方式
        center: [108, 34],//定义初始显示位置
        zoom: 3 ,//定义地图显示层级
    }),
    //创建地图图层
    layers: [
        //创建一个使用Open Street Map地图源的瓦片图层
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    //让id为map的div作为地图的容器
    target: 'map',
    //控件初始默认不显示
    controls:ol.control.defaults({
        attribution: false,
        zoom: false
    }).extend([])
});

创建图片图层：

//静态图片资源
let source = new ol.source.ImageStatic({
    url: 'lib/time.jpg',//图片网址
    projection: 'EPSG:4326',//投影
    imageExtent: [100,30,102,32]//图像坐标[minLon,minLat,maxLon,maxLat]
})
//wms资源
let wmsSource = new ol.source.ImageWMS({
    url: "https://ahocevar.com/geoserver/wms",
    params: { LAYERS: "ne:ne" },
    serverType: "geoserver",
    crossOrigin: "anonymous"
});
let imageLayer = new ol.layer.Image({
    source: source,//该层的来源
    zIndex:1,//图层渲染的Z索引,默认按加载顺序叠加
    extent:[100,30,102,32],//图层渲染范围，可选值，默认渲染全部
    visible:true,//是否显示，默认为true
    opacity:1,//透明度，默认为1
})
map.addLayer(imageLayer)

图片图层关于map的方法：

//添加图片图层
map.addLayer(imageLayer)
//删除图片图层
map.removeLayer(imageLayer)

图片图层自身方法：

//获取-设置，渲染范围
imageLayer.getExtent()
imageLayer.setExtent([100,30,104,40])
//获取-设置，最大级别
imageLayer.getMaxZoom()
imageLayer.setMaxZoom(18)
//获取-设置，最小级别
imageLayer.getMinZoom()
imageLayer.setMinZoom(2)
//获取-设置，透明度
imageLayer.getOpacity()
imageLayer.setOpacity(0.9)
//获取-设置，图层源
imageLayer.getSource()
imageLayer.setSource(source)
//获取-设置，是否可见
imageLayer.getVisible()
imageLayer.setVisible(true)
//获取-设置，图层的Z-index
imageLayer.getZIndex()
imageLayer.setZIndex(2)

//绑定事件-取消事件 type事件类型，listener函数体
imageLayer.on(type,listener)
imageLayer.un(type,listener)