概述

在 Openlayers 中，計(jì)算兩點(diǎn)之間的距離，通常會用到ol/sphere模塊。ol/sphere模塊主要用于處理與球體（特別是地球球體）相關(guān)的數(shù)學(xué)和幾何計(jì)算。而長度測量主要用到ol/sphere中的getDistance函數(shù)。

getDistance函數(shù)用于計(jì)算地球表面兩點(diǎn)之間的距離，通常用于經(jīng)緯度坐標(biāo)。計(jì)算的是球面上兩點(diǎn)之間的大圓距離（即通過球體表面兩個點(diǎn)的最短路徑距離）。其返回值的單位是米 (m)

實(shí)踐

效果展示

繪制

結(jié)果

實(shí)現(xiàn)思路

繪制曲線可以采用 Openlayers 中的ol/interaction模塊的Draw類

實(shí)例化 Draw

this.draw = new Draw({
  source: this.vectorLayer?.getSource(),
  type: "LineString",
  style: this.lineStyle,
});
this.map.addInteraction(this.draw);

監(jiān)聽 this.draw 的 drawstart 方法

this.draw.on("drawstart", this.handleMeasureLineStart.bind(this));

在handleMeasureLineStart回調(diào)方法中，接受一個evt對象，該對象包含繪制的feature以及坐標(biāo)coordinate。效果圖一中，在選擇第一個點(diǎn)后，拖動鼠標(biāo)，會實(shí)時顯示當(dāng)前鼠標(biāo)表示的點(diǎn)與起點(diǎn)之間的距離，這個邏輯就是在該回調(diào)中實(shí)現(xiàn)的。

監(jiān)聽繪制的 feature 的 change 事件

this.listenGeometryChange = feature.getGeometry().on("change", (evt) => {
  /*..處理邏輯..*/
});

通過evt.target獲取當(dāng)前幾何對象geometry，通過該幾何對象的getFirstCoordinate()方法獲取第一個點(diǎn)標(biāo)記為起點(diǎn)，getLastCoordinate()方法獲取最后一個點(diǎn)標(biāo)記為終點(diǎn)。而繪制路線的轉(zhuǎn)折點(diǎn)可以通過幾何對象的getCoordinates()方法獲取，這個方法包含首尾兩端的點(diǎn)。

計(jì)算坐標(biāo)距離

最前面提到通過ol/sphere的getDistance()方法計(jì)算兩點(diǎn)之間的距離，而在上一步中可以得到所有折線段的坐標(biāo)，循環(huán)調(diào)用getDistance方法，（需要注意的是如果當(dāng)前坐標(biāo)系不是經(jīng)緯度的話，就需要轉(zhuǎn)換）。就可以得到每段折線的距離。相加就是總長。但實(shí)際上例子中的總長是調(diào)用sphere.getLength(geometry)方法獲取的，參數(shù)是幾何對象。

• sphere.getLength()方法是用于計(jì)算球體表面上沿大圓弧的距離。其參數(shù)可以是ol/geom/LineString | ol/geom/Polygon | ol/geom/MultiLineString | ol/geom/MultiPolygon的實(shí)例。
• geometry 是一個表示線（如 LineString）或面（如 Polygon）的幾何對象。該幾何對象可以是包含多個點(diǎn)的路徑，或者是一個閉合的面。
• 對于一個 LineString（線），getLength 計(jì)算的是從第一個點(diǎn)到最后一個點(diǎn)之間的球面大圓距離。
• 對于 Polygon（面），getLength 計(jì)算的是邊界線的球面長度。如果是多邊形，則計(jì)算其外環(huán)的長度。

總結(jié)

Openlayers 中提供了內(nèi)置模塊ol/sphere用于計(jì)算距離，繪制幾何對象時，可以通過監(jiān)聽獲取當(dāng)前幾何對象的關(guān)鍵值。

到此這篇關(guān)于Openlayers實(shí)現(xiàn)長度測量的文章就介紹到這了,更多相關(guān)Openlayers長度測量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論