前言

在地圖上渲染一層類似于經緯線的網格層，更有利于準確的確定區域，在WGS84坐標系下，以度，分，秒為單位，稱之為“經緯網”，其網格是以經緯線來劃分的。在OpenLayers3中，渲染網格的類是“ol.Graticule”。本文中，我結合實例，講解“ol.Graticule”的用法和具體實現。

示例

初始化一個網格層，然后將其關聯的map對象設置為map（預先定義好的），網格層便會在關聯的地圖上渲染。初始化網格層可傳的參數和方法下面會說明，例子如下（完整的例子可以到我的GitHub查看）：

var graticuleLayer = new ol.Graticule({// map: map,strokeStyle: new ol.style.Stroke({color: 'rgba(12, 12, 12, 0.8)',width: 0.6}),targetSize: 100});graticuleLayer.setMap(map);

執行結果如下圖：

使用

參數

初始化“ol.Gracule”時可調節的參數有四個（map,maxLines,strokeStyle和targetSize），如下：

• map 參數指定了網格層關聯的地圖對象，也可以不設置該參數，使用其setMap()函數；
• maxLines 指定以地圖中心為參考，左右經線和上下緯線的最大數量，默認值是 100，這表示將繪制200條經線和緯線。需要注意渲染速度會隨著maxLines的變大而下降；
• strokeStyle 指定線的樣式，值是一個“ol.style.Stroke”對象，如果沒有指定該參數，其默認樣式是rgba(0,0,0,0.2)；
• targetSize 指定每個網格覆蓋的區域的大小，單位是像素，默認是100，也就是 10 像素 × 10 像素。

API

“ol.Gracule”對外開放的API也有四個，如下：

• getMap，取得與網格相關聯的地圖對象；
• setMap，設置與網格相關聯的地圖對象，網格將在關聯的地圖之上渲染；
• getMeridians，取得所有經線組成的數組，每條繪制的經線都是“ol.geom.LineString”對象；
• getParallels，取得所有緯線組成的數組，每條繪制的維線也都是“ol.geom.LineString”對象。

實現

提供的可配置參數和API都比較有限，能做的事情也比較有限，接下來我們看看其實現原理，方便我們對其進行定制改寫。要理解一個類的具體實現，我們首先要分析其結構，其公私有變量和成員函數，歸納其內部相互調用關系，理清脈絡。“ol.Graticule”的脈絡如下：

OL3中的類構造都使用構造函數模式和原型模式，在構造函數中，除了賦值一些參數外，最后調用了“setMap”，setMap會對地圖對象的“POSTCOMPOSE”事件綁定“handlePostCompose_”監聽函數，“handlePostCompose_”做了所有初始化并渲染網格的工作。其中，“createGraticule_”做渲染工作，“addMeridian”和“addParallel”做實際的渲染經線和緯線的工作。

setMap

setMap定義如下：

<span style="font-family:Times New Roman;">/*** Set the map for this graticule. The graticule will be rendered on the* provided map.* @param {ol.Map} map Map.* @api*/ ol.Graticule.prototype.setMap = function(map) {if (this.map_) {this.map_.un(ol.render.EventType.POSTCOMPOSE,this.handlePostCompose_, this);this.map_.render();}if (map) {map.on(ol.render.EventType.POSTCOMPOSE,this.handlePostCompose_, this);map.render();}this.map_ = map; };</span>

setMap首先判斷初始化時是否指定了“map_”參數，如果指定了，首先解除綁定地圖對象“POSTCOMPOSE”事件的監聽函數“handlePostCompose_”，如果指定新的地圖對象，則對新指定的 map 對象，綁定`POSTCOMPOSE`事件監聽函數“handlePostCompose_”，并調用 map 對象的 render 方法，最后將地圖對象賦值給“this.map_”。從以上的類脈絡圖看，“handlePostCompose_”功能是初始化網格并渲染在地圖上，并隨著地圖縮放等操作觸發的“POSTCOMPOSE”事件，根據實際情況重新渲染。

addMeridian_&addParallel_

實際的渲染工作是由“addMeridian_”和“addParallel_”完成的，我們選擇一個來進行說明，“addMeridian_”將從“getMeridian_”獲得的經線添加到“this.meridians_”數組，“addMeridian_”函數添加前會判斷經線是否在地圖視口內，如果是才會添加，“handlePostCompose_”將“this.meridians_”數組中的經線對象（lineString）渲染到地圖之上：vectorContext.drawLineString(line, null)，“getMeridian”實現如下：
/*** @param {number} lon Longitude.* @param {number} minLat Minimal latitude.* @param {number} maxLat Maximal latitude.* @param {number} squaredTolerance Squared tolerance.* @return {ol.geom.LineString} The meridian line string.* @param {number} index Index.* @private*/ ol.Graticule.prototype.getMeridian_ = function(lon, minLat, maxLat,squaredTolerance, index) {goog.asserts.assert(lon >= this.minLon_,'lon should be larger than or equal to this.minLon_');goog.asserts.assert(lon <= this.maxLon_,'lon should be smaller than or equal to this.maxLon_');var flatCoordinates = ol.geom.flat.geodesic.meridian(lon,minLat, maxLat, this.projection_, squaredTolerance);goog.asserts.assert(flatCoordinates.length > 0,'flatCoordinates cannot be empty');var lineString = this.meridians_[index] !== undefined ?this.meridians_[index] : new ol.geom.LineString(null);lineString.setFlatCoordinates(ol.geom.GeometryLayout.XY, flatCoordinates);return lineString; };
ol.geom.flatgeodesic.meridian方法返回經線的坐標集合， lineString.setFlatCoordinates方法將lineString坐標設置為flatCoordinates，這樣就完成了一條經線的初始化。

總結

本文總結了“ol.Graticule”的用法和具體實現，openlayers3中的網格支持目前還不是很完善，如果需要更多的功能，要自己去擴展和實現。
文中的實例可以到我的GitHub下載，好的，就寫到這里，有什么問題，可以在文章下面留言或者給我發郵件。

總結

以上是生活随笔為你收集整理的OpenLayers 3 之 添加地图网格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。