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