【05】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([])
});

網格圖層：Graticule

//網格地圖
let graticule = new ol.layer.Graticule({
    opacity:1,//透明度，默認為1
    visible:true,//是否顯示，默認true
    zIndex:1,//圖層渲染的Z索引,默認按加載順序疊加
    extent:[80,20,120,70],//渲染范圍，默認是渲染全部
    targetSize:100,//單元格像素大小,默認100
    showLabels:true,//為每條刻度線繪制一個帶有各自緯度/經度的標簽,默認true
    strokeStyle: new ol.style.Stroke({//用於繪制刻度線的樣式
        color: 'rgba(255,0,0,1)',//線條顏色
        width: 2,//線條寬度
        lineDash: [4]//虛線模式，默認值為null，無虛線
    })
})
map.addLayer(graticule)

Graticule關於map的方法：

//添加網格圖層
map.addLayer(layer)
//刪除網格圖層
map.removeLayer(layer)

Graticule自身方法：

//獲取-設置，渲染范圍
graticule.getExtent()
graticule.setExtent([100,30,120,35])
//獲取-設置，圖層最大縮放級別
graticule.getMaxZoom()
graticule.setMaxZoom(18)
//獲取-設置，圖層最小縮放級別
graticule.getMinZoom()
graticule.setMinZoom(4)
//獲取-設置，圖層透明度
graticule.getOpacity()
graticule.setOpacity(0.5)
//獲取-設置，圖層可見性
graticule.getVisible()
graticule.setVisible(true)
//獲取-設置，圖層索引
graticule.getZIndex()
graticule.setZIndex(1)