Openlayers實現(xiàn)面積測量的方法
概述
在 Openlayers 中面積的量測和長度的測量大同小異,都需要借助于ol/sphere模塊,不同的是長度計算是調用ol/sphere模塊的getLength方法,而面積則需要調用getArea方法。
如果還不清楚如何在 Openlayers 中計算長度,可以參考Openlayers實現(xiàn)長度測量
實踐
效果

代碼分析
同長度測量一樣,監(jiān)聽draw類的實例對象的drawstart方法,然后監(jiān)聽當前繪制的幾何對象的change事件,在這個監(jiān)聽回調函數(shù)中調用ol/sphere的getArea方法獲取經(jīng)緯度
this.draw.on("drawstart", ({ feature }) => {
this.listener = feature.getGeometry().on("change", (evt) => {
const geom = evt.target;
const area = getArea(geom);
});
});ol/sphere的getArea方法
getArea方法用于計算地球表面上幾何形狀的面積,并且考慮了球體的曲率,這意味著它并不是計算平面上的面積,而是計算球面上閉合路徑所圍成的面積。
參數(shù)
geometry (ol/geom/Polygon | ol/geom/MultiPolygon):
- geometry 是一個幾何對象,通常是 Polygon(多邊形)或者 MultiPolygon(多個多邊形的集合)。
- 對于 Polygon,它表示一個閉合的區(qū)域,getArea 計算的是該區(qū)域的球面面積。
- 對于 MultiPolygon,計算的是多個多邊形的總球面面積。
返回值
getArea方法返回的是一個數(shù)值,其單位是平方米。
ol/sphere實用 API 介紹
除了已經(jīng)提到的getLength、getArea和getDistance方法外,ol/sphere模塊還提供了許多其它實用的 API 方法。如下介紹:
getClosestPoint
計算一點到球面上某幾何形狀的最近點。
Sphere.getClosestPoint(geometry, point);
containsCoordinate
判斷一個點是否在球面上某幾何形狀內(nèi)。
Sphere.containsCoordinate(geometry, point);
getBearing
計算從一個點到另一個點的方位角(即從第一個點到第二個點的航向角)。方位角是指沿著大圓航線,連接這兩個點的方向。
Sphere.getBearing([lon1, lat1], [lon2, lat2]);
getIntersection
計算兩條大圓弧(球面上的兩條最短路徑)之間的交點。如果相交,則返回交點,否則返回null
Sphere.getIntersection( [lon1, lat1], [lon2, lat2], [lon3, lat3], [lon4, lat4] );
isFlat
判斷一個幾何對象是否為平面(即判斷其是否位于球面的某個平面上)。如果幾何對象包含任何曲率,isFlat 返回 false;如果對象的坐標位于平面上,返回 true。
Sphere.isFlat(geometry);
isValid
判斷一個幾何對象是否有效。這對于確保幾何對象在球面坐標系中是有效的非常有用。
Sphere.isValid(geometry);
getEnvelope
獲取幾何對象的包圍盒(Bounding Box),即可以包圍該幾何對象的最小矩形框。對于球面幾何,返回的是一個近似的矩形包圍盒。返回幾何對象的包圍盒,表示為最小的經(jīng)緯度矩形。
Sphere.getEnvelope(geometry);
到此這篇關于Openlayers實現(xiàn)面積測量的文章就介紹到這了,更多相關Openlayers面積測量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
教你用Uniapp實現(xiàn)微信小程序的GPS定位打卡
地圖組件用于展示地圖,而定位API只是獲取坐標,請勿混淆兩者,下面這篇文章主要給大家介紹了關于如何使用Uniapp實現(xiàn)微信小程序的GPS定位打卡的相關資料,需要的朋友可以參考下2022-11-11
JS中‘hello’與new String(‘hello’)引出的問題詳解
這篇文章主要給大家介紹了關于JS中'hello'與new String('hello')引出的問題的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考借鑒,下面隨著小編來一起學習學習吧2018-08-08
點擊button獲取text內(nèi)容并改變樣式的js實現(xiàn)
這篇文章主要介紹了點擊button獲取text內(nèi)容并改變樣式的js實現(xiàn),經(jīng)測試非常實用,需要的朋友可以參考下2014-09-09

