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