OpenLayers如何计算LineString距离？
OpenLayers how to calculate LineString distance?
使用 OpenLayers 6.5.0 和 OpenStreetMap。如何计算路线距离？我根据坐标创建了 LineString。在接下来的步骤中，我使用 ol.sphere.getLength() 和 lineString.getLength() 但我得到了奇怪的结果。
我尝试将坐标转换为 .gpx 文件并将其导入在线 gpx 距离计算器，结果约为 4,39 公里。
Link 到 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>
由于您的投影不是默认投影 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底图
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>
使用 OpenLayers 6.5.0 和 OpenStreetMap。如何计算路线距离？我根据坐标创建了 LineString。在接下来的步骤中，我使用 ol.sphere.getLength() 和 lineString.getLength() 但我得到了奇怪的结果。
我尝试将坐标转换为 .gpx 文件并将其导入在线 gpx 距离计算器，结果约为 4,39 公里。
Link 到 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>
由于您的投影不是默认投影 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底图
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>