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