【05】openlayers 网格图层

  • 2020 年 3 月 14 日
  • 笔记

效果:

 创建地图:

//创建地图  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)