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