OpenLayers如何計算LineString距離？

Question

使用 OpenLayers 6.5.0 和 OpenStreetMap。 如何計算路線距離？ 我根據坐標創建了 LineString。 在接下來的步驟中，我使用ol.sphere.getLength()和lineString.getLength()但我得到了奇怪的結果。

我嘗試將坐標轉換為 .gpx 文件並將其導入在線 gpx 距離計算器，結果約為 4.39 公里。

鏈接到 jsfiddle： https://jsfiddle.net/re02Lnx7/2/

代碼片段：

 var locations = [ [15.94606, 51.57557], [15.94602, 51.57572], [15.94604, 51.57576], [15.946, 51.57581], [15.94588, 51.57586], [15.94567, 51.57591], [15.94543, 51.57597], [15.94527, 51.57602], [15.94513, 51.57605], [15.94502, 51.57607], [15.94497, 51.57609], [15.94499, 51.57609], [15.94497, 51.57611], [15.94501, 51.57616], [15.94525, 51.57636], [15.94538, 51.57648], [15.94548, 51.57662], [15.94558, 51.57675], [15.94568, 51.57688], [15.94578, 51.57702], [15.94589, 51.57712], [15.94597, 51.57724], [15.94604, 51.57735], [15.94611, 51.57743], [15.94614, 51.57748], [15.94615, 51.57752], [15.94618, 51.5776], [15.94621, 51.57771], [15.94627, 51.57784], [15.94636, 51.57796], [15.94645, 51.57809], [15.94653, 51.57825], [15.94661, 51.57839], [15.9467, 51.57852], [15.94679, 51.57865], [15.94687, 51.57878], [15.94695, 51.5789], [15.94703, 51.579], [15.94707, 51.57907], [15.9471, 51.57912], [15.94713, 51.57916], [15.94718, 51.57923], [15.94725, 51.57933], [15.94732, 51.57945], [15.9474, 51.57957], [15.94747, 51.57969], [15.94754, 51.57981], [15.94763, 51.57994], [15.9477, 51.58006], [15.94776, 51.58014], [15.94783, 51.58016], [15.94796, 51.58012], [15.94812, 51.58001], [15.94828, 51.57991], [15.9484, 51.57983], [15.94852, 51.57973], [15.94863, 51.57964], [15.9487, 51.57955], [15.9488, 51.57948], [15.94891, 51.57942], [15.94907, 51.57939], [15.94923, 51.57935], [15.9494, 51.57931], [15.94955, 51.57925], [15.94967, 51.57921], [15.94971, 51.57919], [15.94973, 51.57916], [15.94966, 51.5791], [15.94956, 51.57898], [15.94942, 51.57884], [15.9493, 51.5787], [15.9492, 51.57857], [15.94912, 51.57841], [15.94904, 51.57825], [15.94894, 51.5781], [15.94884, 51.57796], [15.94875, 51.57781], [15.94864, 51.57767], [15.94853, 51.57754], [15.94843, 51.57742], [15.94834, 51.57728], [15.94826, 51.57714], [15.94817, 51.57701], [15.94807, 51.57689], [15.94801, 51.57681], [15.94803, 51.57679], [15.94804, 51.57678], [15.94812, 51.57671], [15.94827, 51.57666], [15.94849, 51.57658], [15.94876, 51.57648], [15.94904, 51.57637], [15.9493, 51.57626], [15.94956, 51.57617], [15.94988, 51.57604], [15.95012, 51.57595], [15.95026, 51.57589], [15.95033, 51.57586], [15.95039, 51.57583], [15.9505, 51.5758], [15.95064, 51.57574], [15.95076, 51.5757], [15.95079, 51.57569], [15.95079, 51.5757], [15.9508, 51.57567], [15.95073, 51.57558], [15.95059, 51.57546], [15.95042, 51.57529], [15.95025, 51.57511], [15.95007, 51.57492], [15.94989, 51.57473], [15.94969, 51.57453], [15.9495, 51.57434], [15.94932, 51.57416], [15.94915, 51.574], [15.94893, 51.57391], [15.94879, 51.57375], [15.94867, 51.5736], [15.94858, 51.57352], [15.94847, 51.57349], [15.94835, 51.57344], [15.9482, 51.57336], [15.94806, 51.57326], [15.94795, 51.57314], [15.94789, 51.57301], [15.94788, 51.57288], [15.94787, 51.57273], [15.94785, 51.57259], [15.94784, 51.57245], [15.94783, 51.5723], [15.94782, 51.57216], [15.94781, 51.57204], [15.94776, 51.57193], [15.9476, 51.57186], [15.94738, 51.57182], [15.9471, 51.57178], [15.9468, 51.57177], [15.94651, 51.57174], [15.94619, 51.57172], [15.94588, 51.5717], [15.94558, 51.57169], [15.94526, 51.5717], [15.94492, 51.57172], [15.94457, 51.57173], [15.94422, 51.57174], [15.94388, 51.57173], [15.94353, 51.57169], [15.94318, 51.57164], [15.94285, 51.5716], [15.94253, 51.57156], [15.9422, 51.57152], [15.94188, 51.57148], [15.9416, 51.57146], [15.94134, 51.57146], [15.94108, 51.5715], [15.94084, 51.57158], [15.94064, 51.5717], [15.94045, 51.57183], [15.9402, 51.57193], [15.93992, 51.572], [15.93962, 51.57208], [15.93931, 51.57216], [15.93901, 51.57224], [15.9387, 51.57232], [15.93839, 51.5724], [15.93808, 51.57248], [15.93779, 51.57255], [15.93749, 51.57263], [15.93719, 51.57272], [15.93695, 51.5728], [15.9367, 51.57288], [15.93646, 51.57296], [15.9363, 51.57301], [15.93625, 51.57305], [15.93628, 51.57317], [15.93631, 51.57332], [15.93634, 51.57346], [15.93642, 51.57359], [15.93651, 51.57372], [15.93657, 51.57389], [15.93654, 51.57407], [15.93646, 51.57425], [15.93639, 51.57445], [15.93636, 51.57464], [15.93635, 51.57481], [15.93636, 51.57497], [15.9364, 51.57514], [15.93646, 51.57531], [15.93651, 51.57548], [15.93656, 51.57565], [15.93661, 51.57581], [15.93667, 51.57598], [15.93671, 51.57614], [15.93677, 51.57631], [15.93684, 51.57649], [15.93691, 51.57666], [15.93697, 51.57682], [15.93705, 51.57699], [15.93715, 51.57714], [15.93725, 51.57731], [15.93735, 51.57747], [15.93746, 51.57764], [15.93756, 51.57781], [15.93767, 51.57798], [15.93776, 51.57814], [15.93786, 51.57829], [15.93797, 51.57844], [15.93807, 51.57859], [15.93819, 51.57874], [15.9383, 51.57887], [15.93839, 51.57898], [15.93845, 51.57904], [15.93849, 51.57906], [15.93855, 51.57907], [15.93866, 51.57904], [15.9388, 51.57901], [15.93895, 51.579], [15.93907, 51.57909], [15.93921, 51.57923], [15.93933, 51.57939], [15.93943, 51.57953], [15.93953, 51.57966], [15.93961, 51.57977], [15.93968, 51.57985], [15.93977, 51.57988], [15.93992, 51.57981], [15.94014, 51.57972], [15.94037, 51.57963], [15.94061, 51.57953], [15.94084, 51.57944], [15.94099, 51.57939], [15.94105, 51.57936], [15.9411, 51.57933], [15.94123, 51.57927], [15.94147, 51.57919], [15.94179, 51.57909], [15.9421, 51.57898], [15.94238, 51.57888], [15.94266, 51.57878], [15.94295, 51.57868], [15.94323, 51.57858], [15.94349, 51.57848], [15.94373, 51.57838], [15.94399, 51.57827], [15.94424, 51.57819], [15.94451, 51.57809], [15.94478, 51.578], [15.94504, 51.57791], [15.9453, 51.57782], [15.94555, 51.57773], [15.94579, 51.57764], [15.946, 51.57756], [15.94622, 51.57747], [15.94645, 51.57739], [15.94669, 51.5773], [15.94693, 51.57722], [15.94717, 51.57713], [15.9474, 51.57705], [15.94759, 51.57697], [15.94778, 51.57689], [15.94799, 51.57681], [15.94814, 51.57676], [15.9482, 51.5767], [15.94814, 51.57662], [15.94805, 51.57652], [15.94795, 51.57641], [15.94786, 51.57629], [15.94777, 51.57618], [15.94765, 51.57607], [15.9475, 51.57598], [15.94732, 51.57592], [15.94711, 51.57588], [15.9469, 51.57584], [15.94671, 51.57579], [15.94653, 51.57574], [15.94636, 51.57568], [15.94617, 51.57566], [15.94605, 51.57565], [15.94602, 51.57566], [15.94603, 51.57566], [15.94603, 51.57567], [15.94604, 51.57567], [15.94605, 51.57567], [15.94608, 51.57567], [15.94612, 51.57567], [15.94613, 51.57566], [15.94614, 51.57566] ]; var lineString = new ol.geom.LineString(locations) var lineLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [new ol.Feature({ geometry: lineString, name: 'Line' })] }), style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'red', opacity: 0.5, width: 5 }) }) }); var view = new ol.View({ projection: 'EPSG:4326', center: [15.94616, 51.57555], zoom: 13 }); var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), lineLayer ], target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), view: view }); console.log(ol.sphere.getLength(lineString)); console.log(lineString.getLength());

 body, html, .map { width: 100%; height: 100%; margin: 0; padding: 0; }

 <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js "></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css"> <div id="map" class="map"></div>

Answer 1

由於您的投影不是默認的 EPSG:3857，您必須在ol.sphere.getLength()中指定投影

 var locations = [ [15.94606, 51.57557], [15.94602, 51.57572], [15.94604, 51.57576], [15.946, 51.57581], [15.94588, 51.57586], [15.94567, 51.57591], [15.94543, 51.57597], [15.94527, 51.57602], [15.94513, 51.57605], [15.94502, 51.57607], [15.94497, 51.57609], [15.94499, 51.57609], [15.94497, 51.57611], [15.94501, 51.57616], [15.94525, 51.57636], [15.94538, 51.57648], [15.94548, 51.57662], [15.94558, 51.57675], [15.94568, 51.57688], [15.94578, 51.57702], [15.94589, 51.57712], [15.94597, 51.57724], [15.94604, 51.57735], [15.94611, 51.57743], [15.94614, 51.57748], [15.94615, 51.57752], [15.94618, 51.5776], [15.94621, 51.57771], [15.94627, 51.57784], [15.94636, 51.57796], [15.94645, 51.57809], [15.94653, 51.57825], [15.94661, 51.57839], [15.9467, 51.57852], [15.94679, 51.57865], [15.94687, 51.57878], [15.94695, 51.5789], [15.94703, 51.579], [15.94707, 51.57907], [15.9471, 51.57912], [15.94713, 51.57916], [15.94718, 51.57923], [15.94725, 51.57933], [15.94732, 51.57945], [15.9474, 51.57957], [15.94747, 51.57969], [15.94754, 51.57981], [15.94763, 51.57994], [15.9477, 51.58006], [15.94776, 51.58014], [15.94783, 51.58016], [15.94796, 51.58012], [15.94812, 51.58001], [15.94828, 51.57991], [15.9484, 51.57983], [15.94852, 51.57973], [15.94863, 51.57964], [15.9487, 51.57955], [15.9488, 51.57948], [15.94891, 51.57942], [15.94907, 51.57939], [15.94923, 51.57935], [15.9494, 51.57931], [15.94955, 51.57925], [15.94967, 51.57921], [15.94971, 51.57919], [15.94973, 51.57916], [15.94966, 51.5791], [15.94956, 51.57898], [15.94942, 51.57884], [15.9493, 51.5787], [15.9492, 51.57857], [15.94912, 51.57841], [15.94904, 51.57825], [15.94894, 51.5781], [15.94884, 51.57796], [15.94875, 51.57781], [15.94864, 51.57767], [15.94853, 51.57754], [15.94843, 51.57742], [15.94834, 51.57728], [15.94826, 51.57714], [15.94817, 51.57701], [15.94807, 51.57689], [15.94801, 51.57681], [15.94803, 51.57679], [15.94804, 51.57678], [15.94812, 51.57671], [15.94827, 51.57666], [15.94849, 51.57658], [15.94876, 51.57648], [15.94904, 51.57637], [15.9493, 51.57626], [15.94956, 51.57617], [15.94988, 51.57604], [15.95012, 51.57595], [15.95026, 51.57589], [15.95033, 51.57586], [15.95039, 51.57583], [15.9505, 51.5758], [15.95064, 51.57574], [15.95076, 51.5757], [15.95079, 51.57569], [15.95079, 51.5757], [15.9508, 51.57567], [15.95073, 51.57558], [15.95059, 51.57546], [15.95042, 51.57529], [15.95025, 51.57511], [15.95007, 51.57492], [15.94989, 51.57473], [15.94969, 51.57453], [15.9495, 51.57434], [15.94932, 51.57416], [15.94915, 51.574], [15.94893, 51.57391], [15.94879, 51.57375], [15.94867, 51.5736], [15.94858, 51.57352], [15.94847, 51.57349], [15.94835, 51.57344], [15.9482, 51.57336], [15.94806, 51.57326], [15.94795, 51.57314], [15.94789, 51.57301], [15.94788, 51.57288], [15.94787, 51.57273], [15.94785, 51.57259], [15.94784, 51.57245], [15.94783, 51.5723], [15.94782, 51.57216], [15.94781, 51.57204], [15.94776, 51.57193], [15.9476, 51.57186], [15.94738, 51.57182], [15.9471, 51.57178], [15.9468, 51.57177], [15.94651, 51.57174], [15.94619, 51.57172], [15.94588, 51.5717], [15.94558, 51.57169], [15.94526, 51.5717], [15.94492, 51.57172], [15.94457, 51.57173], [15.94422, 51.57174], [15.94388, 51.57173], [15.94353, 51.57169], [15.94318, 51.57164], [15.94285, 51.5716], [15.94253, 51.57156], [15.9422, 51.57152], [15.94188, 51.57148], [15.9416, 51.57146], [15.94134, 51.57146], [15.94108, 51.5715], [15.94084, 51.57158], [15.94064, 51.5717], [15.94045, 51.57183], [15.9402, 51.57193], [15.93992, 51.572], [15.93962, 51.57208], [15.93931, 51.57216], [15.93901, 51.57224], [15.9387, 51.57232], [15.93839, 51.5724], [15.93808, 51.57248], [15.93779, 51.57255], [15.93749, 51.57263], [15.93719, 51.57272], [15.93695, 51.5728], [15.9367, 51.57288], [15.93646, 51.57296], [15.9363, 51.57301], [15.93625, 51.57305], [15.93628, 51.57317], [15.93631, 51.57332], [15.93634, 51.57346], [15.93642, 51.57359], [15.93651, 51.57372], [15.93657, 51.57389], [15.93654, 51.57407], [15.93646, 51.57425], [15.93639, 51.57445], [15.93636, 51.57464], [15.93635, 51.57481], [15.93636, 51.57497], [15.9364, 51.57514], [15.93646, 51.57531], [15.93651, 51.57548], [15.93656, 51.57565], [15.93661, 51.57581], [15.93667, 51.57598], [15.93671, 51.57614], [15.93677, 51.57631], [15.93684, 51.57649], [15.93691, 51.57666], [15.93697, 51.57682], [15.93705, 51.57699], [15.93715, 51.57714], [15.93725, 51.57731], [15.93735, 51.57747], [15.93746, 51.57764], [15.93756, 51.57781], [15.93767, 51.57798], [15.93776, 51.57814], [15.93786, 51.57829], [15.93797, 51.57844], [15.93807, 51.57859], [15.93819, 51.57874], [15.9383, 51.57887], [15.93839, 51.57898], [15.93845, 51.57904], [15.93849, 51.57906], [15.93855, 51.57907], [15.93866, 51.57904], [15.9388, 51.57901], [15.93895, 51.579], [15.93907, 51.57909], [15.93921, 51.57923], [15.93933, 51.57939], [15.93943, 51.57953], [15.93953, 51.57966], [15.93961, 51.57977], [15.93968, 51.57985], [15.93977, 51.57988], [15.93992, 51.57981], [15.94014, 51.57972], [15.94037, 51.57963], [15.94061, 51.57953], [15.94084, 51.57944], [15.94099, 51.57939], [15.94105, 51.57936], [15.9411, 51.57933], [15.94123, 51.57927], [15.94147, 51.57919], [15.94179, 51.57909], [15.9421, 51.57898], [15.94238, 51.57888], [15.94266, 51.57878], [15.94295, 51.57868], [15.94323, 51.57858], [15.94349, 51.57848], [15.94373, 51.57838], [15.94399, 51.57827], [15.94424, 51.57819], [15.94451, 51.57809], [15.94478, 51.578], [15.94504, 51.57791], [15.9453, 51.57782], [15.94555, 51.57773], [15.94579, 51.57764], [15.946, 51.57756], [15.94622, 51.57747], [15.94645, 51.57739], [15.94669, 51.5773], [15.94693, 51.57722], [15.94717, 51.57713], [15.9474, 51.57705], [15.94759, 51.57697], [15.94778, 51.57689], [15.94799, 51.57681], [15.94814, 51.57676], [15.9482, 51.5767], [15.94814, 51.57662], [15.94805, 51.57652], [15.94795, 51.57641], [15.94786, 51.57629], [15.94777, 51.57618], [15.94765, 51.57607], [15.9475, 51.57598], [15.94732, 51.57592], [15.94711, 51.57588], [15.9469, 51.57584], [15.94671, 51.57579], [15.94653, 51.57574], [15.94636, 51.57568], [15.94617, 51.57566], [15.94605, 51.57565], [15.94602, 51.57566], [15.94603, 51.57566], [15.94603, 51.57567], [15.94604, 51.57567], [15.94605, 51.57567], [15.94608, 51.57567], [15.94612, 51.57567], [15.94613, 51.57566], [15.94614, 51.57566] ]; var lineString = new ol.geom.LineString(locations) var lineLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [new ol.Feature({ geometry: lineString, name: 'Line' })] }), style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'red', opacity: 0.5, width: 5 }) }) }); var view = new ol.View({ projection: 'EPSG:4326', center: [15.94616, 51.57555], zoom: 13 }); var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), lineLayer ], target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), view: view }); console.log(ol.sphere.getLength(lineString, {projection: 'EPSG:4326'})); console.log(lineString.getLength());

 body, html, .map { width: 100%; height: 100%; margin: 0; padding: 0; }

 <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js "></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css"> <div id="map" class="map"></div>

最好使用 EPSG:3857 視圖來匹配 OSM 基礎 map

 var locations = [ [15.94606, 51.57557], [15.94602, 51.57572], [15.94604, 51.57576], [15.946, 51.57581], [15.94588, 51.57586], [15.94567, 51.57591], [15.94543, 51.57597], [15.94527, 51.57602], [15.94513, 51.57605], [15.94502, 51.57607], [15.94497, 51.57609], [15.94499, 51.57609], [15.94497, 51.57611], [15.94501, 51.57616], [15.94525, 51.57636], [15.94538, 51.57648], [15.94548, 51.57662], [15.94558, 51.57675], [15.94568, 51.57688], [15.94578, 51.57702], [15.94589, 51.57712], [15.94597, 51.57724], [15.94604, 51.57735], [15.94611, 51.57743], [15.94614, 51.57748], [15.94615, 51.57752], [15.94618, 51.5776], [15.94621, 51.57771], [15.94627, 51.57784], [15.94636, 51.57796], [15.94645, 51.57809], [15.94653, 51.57825], [15.94661, 51.57839], [15.9467, 51.57852], [15.94679, 51.57865], [15.94687, 51.57878], [15.94695, 51.5789], [15.94703, 51.579], [15.94707, 51.57907], [15.9471, 51.57912], [15.94713, 51.57916], [15.94718, 51.57923], [15.94725, 51.57933], [15.94732, 51.57945], [15.9474, 51.57957], [15.94747, 51.57969], [15.94754, 51.57981], [15.94763, 51.57994], [15.9477, 51.58006], [15.94776, 51.58014], [15.94783, 51.58016], [15.94796, 51.58012], [15.94812, 51.58001], [15.94828, 51.57991], [15.9484, 51.57983], [15.94852, 51.57973], [15.94863, 51.57964], [15.9487, 51.57955], [15.9488, 51.57948], [15.94891, 51.57942], [15.94907, 51.57939], [15.94923, 51.57935], [15.9494, 51.57931], [15.94955, 51.57925], [15.94967, 51.57921], [15.94971, 51.57919], [15.94973, 51.57916], [15.94966, 51.5791], [15.94956, 51.57898], [15.94942, 51.57884], [15.9493, 51.5787], [15.9492, 51.57857], [15.94912, 51.57841], [15.94904, 51.57825], [15.94894, 51.5781], [15.94884, 51.57796], [15.94875, 51.57781], [15.94864, 51.57767], [15.94853, 51.57754], [15.94843, 51.57742], [15.94834, 51.57728], [15.94826, 51.57714], [15.94817, 51.57701], [15.94807, 51.57689], [15.94801, 51.57681], [15.94803, 51.57679], [15.94804, 51.57678], [15.94812, 51.57671], [15.94827, 51.57666], [15.94849, 51.57658], [15.94876, 51.57648], [15.94904, 51.57637], [15.9493, 51.57626], [15.94956, 51.57617], [15.94988, 51.57604], [15.95012, 51.57595], [15.95026, 51.57589], [15.95033, 51.57586], [15.95039, 51.57583], [15.9505, 51.5758], [15.95064, 51.57574], [15.95076, 51.5757], [15.95079, 51.57569], [15.95079, 51.5757], [15.9508, 51.57567], [15.95073, 51.57558], [15.95059, 51.57546], [15.95042, 51.57529], [15.95025, 51.57511], [15.95007, 51.57492], [15.94989, 51.57473], [15.94969, 51.57453], [15.9495, 51.57434], [15.94932, 51.57416], [15.94915, 51.574], [15.94893, 51.57391], [15.94879, 51.57375], [15.94867, 51.5736], [15.94858, 51.57352], [15.94847, 51.57349], [15.94835, 51.57344], [15.9482, 51.57336], [15.94806, 51.57326], [15.94795, 51.57314], [15.94789, 51.57301], [15.94788, 51.57288], [15.94787, 51.57273], [15.94785, 51.57259], [15.94784, 51.57245], [15.94783, 51.5723], [15.94782, 51.57216], [15.94781, 51.57204], [15.94776, 51.57193], [15.9476, 51.57186], [15.94738, 51.57182], [15.9471, 51.57178], [15.9468, 51.57177], [15.94651, 51.57174], [15.94619, 51.57172], [15.94588, 51.5717], [15.94558, 51.57169], [15.94526, 51.5717], [15.94492, 51.57172], [15.94457, 51.57173], [15.94422, 51.57174], [15.94388, 51.57173], [15.94353, 51.57169], [15.94318, 51.57164], [15.94285, 51.5716], [15.94253, 51.57156], [15.9422, 51.57152], [15.94188, 51.57148], [15.9416, 51.57146], [15.94134, 51.57146], [15.94108, 51.5715], [15.94084, 51.57158], [15.94064, 51.5717], [15.94045, 51.57183], [15.9402, 51.57193], [15.93992, 51.572], [15.93962, 51.57208], [15.93931, 51.57216], [15.93901, 51.57224], [15.9387, 51.57232], [15.93839, 51.5724], [15.93808, 51.57248], [15.93779, 51.57255], [15.93749, 51.57263], [15.93719, 51.57272], [15.93695, 51.5728], [15.9367, 51.57288], [15.93646, 51.57296], [15.9363, 51.57301], [15.93625, 51.57305], [15.93628, 51.57317], [15.93631, 51.57332], [15.93634, 51.57346], [15.93642, 51.57359], [15.93651, 51.57372], [15.93657, 51.57389], [15.93654, 51.57407], [15.93646, 51.57425], [15.93639, 51.57445], [15.93636, 51.57464], [15.93635, 51.57481], [15.93636, 51.57497], [15.9364, 51.57514], [15.93646, 51.57531], [15.93651, 51.57548], [15.93656, 51.57565], [15.93661, 51.57581], [15.93667, 51.57598], [15.93671, 51.57614], [15.93677, 51.57631], [15.93684, 51.57649], [15.93691, 51.57666], [15.93697, 51.57682], [15.93705, 51.57699], [15.93715, 51.57714], [15.93725, 51.57731], [15.93735, 51.57747], [15.93746, 51.57764], [15.93756, 51.57781], [15.93767, 51.57798], [15.93776, 51.57814], [15.93786, 51.57829], [15.93797, 51.57844], [15.93807, 51.57859], [15.93819, 51.57874], [15.9383, 51.57887], [15.93839, 51.57898], [15.93845, 51.57904], [15.93849, 51.57906], [15.93855, 51.57907], [15.93866, 51.57904], [15.9388, 51.57901], [15.93895, 51.579], [15.93907, 51.57909], [15.93921, 51.57923], [15.93933, 51.57939], [15.93943, 51.57953], [15.93953, 51.57966], [15.93961, 51.57977], [15.93968, 51.57985], [15.93977, 51.57988], [15.93992, 51.57981], [15.94014, 51.57972], [15.94037, 51.57963], [15.94061, 51.57953], [15.94084, 51.57944], [15.94099, 51.57939], [15.94105, 51.57936], [15.9411, 51.57933], [15.94123, 51.57927], [15.94147, 51.57919], [15.94179, 51.57909], [15.9421, 51.57898], [15.94238, 51.57888], [15.94266, 51.57878], [15.94295, 51.57868], [15.94323, 51.57858], [15.94349, 51.57848], [15.94373, 51.57838], [15.94399, 51.57827], [15.94424, 51.57819], [15.94451, 51.57809], [15.94478, 51.578], [15.94504, 51.57791], [15.9453, 51.57782], [15.94555, 51.57773], [15.94579, 51.57764], [15.946, 51.57756], [15.94622, 51.57747], [15.94645, 51.57739], [15.94669, 51.5773], [15.94693, 51.57722], [15.94717, 51.57713], [15.9474, 51.57705], [15.94759, 51.57697], [15.94778, 51.57689], [15.94799, 51.57681], [15.94814, 51.57676], [15.9482, 51.5767], [15.94814, 51.57662], [15.94805, 51.57652], [15.94795, 51.57641], [15.94786, 51.57629], [15.94777, 51.57618], [15.94765, 51.57607], [15.9475, 51.57598], [15.94732, 51.57592], [15.94711, 51.57588], [15.9469, 51.57584], [15.94671, 51.57579], [15.94653, 51.57574], [15.94636, 51.57568], [15.94617, 51.57566], [15.94605, 51.57565], [15.94602, 51.57566], [15.94603, 51.57566], [15.94603, 51.57567], [15.94604, 51.57567], [15.94605, 51.57567], [15.94608, 51.57567], [15.94612, 51.57567], [15.94613, 51.57566], [15.94614, 51.57566] ]; var lineString = new ol.geom.LineString(locations).transform('EPSG:4326', 'EPSG:3857') var lineLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [new ol.Feature({ geometry: lineString, name: 'Line' })] }), style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'red', opacity: 0.5, width: 5 }) }) }); var view = new ol.View({ center: ol.proj.fromLonLat([15.94616, 51.57555]), zoom: 13 }); var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), lineLayer ], target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), view: view }); console.log(ol.sphere.getLength(lineString)); console.log(lineString.getLength());

 body, html, .map { width: 100%; height: 100%; margin: 0; padding: 0; }

 <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js "></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css"> <div id="map" class="map"></div>