效果:
创建地图:
//创建地图 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)',//线条颜色 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)