前言

在地圖上渲染一層類似于經(jīng)緯線的網(wǎng)格層，更有利于準(zhǔn)確的確定區(qū)域，在WGS84坐標(biāo)系下，以度，分，秒為單位，稱之為“經(jīng)緯網(wǎng)”，其網(wǎng)格是以經(jīng)緯線來劃分的。在OpenLayers3中，渲染網(wǎng)格的類是“ol.Graticule”。本文中，我結(jié)合實(shí)例，講解“ol.Graticule”的用法和具體實(shí)現(xiàn)。

示例

初始化一個(gè)網(wǎng)格層，然后將其關(guān)聯(lián)的map對象設(shè)置為map（預(yù)先定義好的），網(wǎng)格層便會在關(guān)聯(lián)的地圖上渲染。初始化網(wǎng)格層可傳的參數(shù)和方法下面會說明，例子如下（完整的例子可以到我的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);

執(zhí)行結(jié)果如下圖：

使用

參數(shù)

初始化“ol.Gracule”時(shí)可調(diào)節(jié)的參數(shù)有四個(gè)（map,maxLines,strokeStyle和targetSize），如下：

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

API

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

• getMap，取得與網(wǎng)格相關(guān)聯(lián)的地圖對象；
• setMap，設(shè)置與網(wǎng)格相關(guān)聯(lián)的地圖對象，網(wǎng)格將在關(guān)聯(lián)的地圖之上渲染；
• getMeridians，取得所有經(jīng)線組成的數(shù)組，每條繪制的經(jīng)線都是“ol.geom.LineString”對象；
• getParallels，取得所有緯線組成的數(shù)組，每條繪制的維線也都是“ol.geom.LineString”對象。

實(shí)現(xiàn)

提供的可配置參數(shù)和API都比較有限，能做的事情也比較有限，接下來我們看看其實(shí)現(xiàn)原理，方便我們對其進(jìn)行定制改寫。要理解一個(gè)類的具體實(shí)現(xiàn)，我們首先要分析其結(jié)構(gòu)，其公私有變量和成員函數(shù)，歸納其內(nèi)部相互調(diào)用關(guān)系，理清脈絡(luò)。“ol.Graticule”的脈絡(luò)如下：

OL3中的類構(gòu)造都使用構(gòu)造函數(shù)模式和原型模式，在構(gòu)造函數(shù)中，除了賦值一些參數(shù)外，最后調(diào)用了“setMap”，setMap會對地圖對象的“POSTCOMPOSE”事件綁定“handlePostCompose_”監(jiān)聽函數(shù)，“handlePostCompose_”做了所有初始化并渲染網(wǎng)格的工作。其中，“createGraticule_”做渲染工作，“addMeridian”和“addParallel”做實(shí)際的渲染經(jīng)線和緯線的工作。

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首先判斷初始化時(shí)是否指定了“map_”參數(shù)，如果指定了，首先解除綁定地圖對象“POSTCOMPOSE”事件的監(jiān)聽函數(shù)“handlePostCompose_”，如果指定新的地圖對象，則對新指定的 map 對象，綁定`POSTCOMPOSE`事件監(jiān)聽函數(shù)“handlePostCompose_”，并調(diào)用 map 對象的 render 方法，最后將地圖對象賦值給“this.map_”。從以上的類脈絡(luò)圖看，“handlePostCompose_”功能是初始化網(wǎng)格并渲染在地圖上，并隨著地圖縮放等操作觸發(fā)的“POSTCOMPOSE”事件，根據(jù)實(shí)際情況重新渲染。

addMeridian_&addParallel_

實(shí)際的渲染工作是由“addMeridian_”和“addParallel_”完成的，我們選擇一個(gè)來進(jìn)行說明，“addMeridian_”將從“getMeridian_”獲得的經(jīng)線添加到“this.meridians_”數(shù)組，“addMeridian_”函數(shù)添加前會判斷經(jīng)線是否在地圖視口內(nèi)，如果是才會添加，“handlePostCompose_”將“this.meridians_”數(shù)組中的經(jīng)線對象（lineString）渲染到地圖之上：vectorContext.drawLineString(line, null)，“getMeridian”實(shí)現(xiàn)如下：
/*** @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方法返回經(jīng)線的坐標(biāo)集合， lineString.setFlatCoordinates方法將lineString坐標(biāo)設(shè)置為flatCoordinates，這樣就完成了一條經(jīng)線的初始化。

總結(jié)

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。