Как добавить полилинию в OpenLayers 3, используя мои собственные координаты

Question

Я пытаюсь добавить полилинию и нарисовать анимацию вдоль моей полилинии, чтобы создать что-то вроде this.

В их примере, однако, кажется, что они уже закодировали свою полилинию, и я действительно не могу найти какой-либо метод для этого или какие-либо примеры того, как генерировать закодированную полилинию с фактическими данными местоположения.

Я следующий массив местоположение:

[53.44241609, 6.84913974, 53.44241894, 6.84913726, 53.44242156, 6.84913385, 53.44242473, 6.84913076, 53.44242859, 6.84912721, 53.44243324, 6.84912446, 53.44243724, 6.84912303, 53.44243994, 6.84912206, 53.44244199, 6.84911994, 53.44244474, 6.84911928, 53.44244757, 6.8491193, 53.44245181, 6.84911968, 53.44245596, 6.84912085, 53.44246139, 6.84912072, 53.4424669, 6.84912142, 53.44247222, 6.84912279, 53.4424778, 6.84912454, 53.44248644, 6.84912644, 53.44249062, 6.84912761, 53.44249409, 6.84913057, 53.44249746, 6.84913362, 53.44250197, 6.84913592, 53.44250901, 6.84913629, 53.44251198, 6.84913792, 53.44251293, 6.84913988, 53.44251458, 6.84914126, 53.44251596, 6.8491434, 53.44251778, 6.84914727, 53.44251988, 6.8491501, 53.44252248, 6.8491531, 53.44252517, 6.84915473, 53.44252316, 6.84915181, 53.44252377, 6.84915124, 53.4425233, 6.84914949, 53.44252341, 6.84914848, 53.44252276, 6.84914827, 53.44252397, 6.84914868, 53.4425216, 6.84914477, 53.44252001, 6.84914287, 53.44252107, 6.84914273, 53.44251986, 6.84913869, 53.44251841, 6.84913463, 53.44251482, 6.84912822, 53.44251525, 6.84912649, 53.4425148, 6.84912465, 53.44251483, 6.84912049, 53.44251625, 6.84911749, 53.44251677, 6.84911403, 53.4425187, 6.84910978, 53.44252028, 6.84910694, 53.44252218, 6.84910622, 53.44252457, 6.84910649, 53.44252783, 6.84910729, 53.44253168, 6.84910888, 53.44253668, 6.84910943, 53.44254088, 6.84910976, 53.44254363, 6.84910898, 53.44254612, 6.84910996, 53.44254803, 6.84910946, 53.44255004, 6.84910945, 53.44255416, 6.84910766, 53.44256019, 6.84910343, 53.44256469, 6.84909908, 53.44256753, 6.84909764, 53.44257106, 6.84909639]; 

Я попытался отформатировать его много различных способов, в надежде, что OpenLayers мог понять его при попытке кодировать его:

[{lat: 53.44241609, lng: 6.84913974}, {lat: 53.44241894, lng: 6.84913726}, {lat: 53.44242156, lng: 6.84913385}, {lat: 53.44242473, lng: 6.84913076}, {lat: 53.44242859, lng: 6.84912721}, {lat: 53.44243324, lng: 6.84912446}, {lat: 53.44243724, lng: 6.84912303}, {lat: 53.44243994, lng: 6.84912206}, {lat: 53.44244199, lng: 6.84911994}, {lat: 53.44244474, lng: 6.84911928}, {lat: 53.44244757, lng: 6.8491193}, {lat: 53.44245181, lng: 6.84911968}, {lat: 53.44245596, lng: 6.84912085}, {lat: 53.44246139, lng: 6.84912072}, {lat: 53.4424669, lng: 6.84912142}, {lat: 53.44247222, lng: 6.84912279}, {lat: 53.4424778, lng: 6.84912454}, {lat: 53.44248644, lng: 6.84912644}, {lat: 53.44249062, lng: 6.84912761}, {lat: 53.44249409, lng: 6.84913057}, {lat: 53.44249746, lng: 6.84913362}, {lat: 53.44250197, lng: 6.84913592}, {lat: 53.44250901, lng: 6.84913629}, {lat: 53.44251198, lng: 6.84913792}, {lat: 53.44251293, lng: 6.84913988}, {lat: 53.44251458, lng: 6.84914126}, {lat: 53.44251596, lng: 6.8491434}, {lat: 53.44251778, lng: 6.84914727}, {lat: 53.44251988, lng: 6.8491501}, {lat: 53.44252248, lng: 6.8491531}, {lat: 53.44252517, lng: 6.84915473}, {lat: 53.44252316, lng: 6.84915181}, {lat: 53.44252377, lng: 6.84915124}, {lat: 53.4425233, lng: 6.84914949}, {lat: 53.44252341, lng: 6.84914848}, {lat: 53.44252276, lng: 6.84914827}, {lat: 53.44252397, lng: 6.84914868}, {lat: 53.4425216, lng: 6.84914477}, {lat: 53.44252001, lng: 6.84914287}, {lat: 53.44252107, lng: 6.84914273}, {lat: 53.44251986, lng: 6.84913869}, {lat: 53.44251841, lng: 6.84913463}, {lat: 53.44251482, lng: 6.84912822}, {lat: 53.44251525, lng: 6.84912649}, {lat: 53.4425148, lng: 6.84912465}, {lat: 53.44251483, lng: 6.84912049}, {lat: 53.44251625, lng: 6.84911749}, {lat: 53.44251677, lng: 6.84911403}, {lat: 53.4425187, lng: 6.84910978}, {lat: 53.44252028, lng: 6.84910694}, {lat: 53.44252218, lng: 6.84910622}, {lat: 53.44252457, lng: 6.84910649}, {lat: 53.44252783, lng: 6.84910729}, {lat: 53.44253168, lng: 6.84910888}, {lat: 53.44253668, lng: 6.84910943}, {lat: 53.44254088, lng: 6.84910976}, {lat: 53.44254363, lng: 6.84910898}, {lat: 53.44254612, lng: 6.84910996}, {lat: 53.44254803, lng: 6.84910946}, {lat: 53.44255004, lng: 6.84910945}, {lat: 53.44255416, lng: 6.84910766}, {lat: 53.44256019, lng: 6.84910343}, {lat: 53.44256469, lng: 6.84909908}, {lat: 53.44256753, lng: 6.84909764}, {lat: 53.44257106, lng: 6.84909639}, {lat: 53.44257482, lng: 6.84909654}, {lat: 53.44257861, lng: 6.84909769}] 

[[53.44241609, 6.84913974], [53.44241894, 6.84913726], [53.44242156, 6.84913385], [53.44242473, 6.84913076], [53.44242859, 6.84912721], [53.44243324, 6.84912446], [53.44243724, 6.84912303], [53.44243994, 6.84912206], [53.44244199, 6.84911994], [53.44244474, 6.84911928], [53.44244757, 6.8491193], [53.44245181, 6.84911968], [53.44245596, 6.84912085], [53.44246139, 6.84912072], [53.4424669, 6.84912142], [53.44247222, 6.84912279], [53.4424778, 6.84912454], [53.44248644, 6.84912644], [53.44249062, 6.84912761], [53.44249409, 6.84913057], [53.44249746, 6.84913362], [53.44250197, 6.84913592], [53.44250901, 6.84913629], [53.44251198, 6.84913792], [53.44251293, 6.84913988], [53.44251458, 6.84914126], [53.44251596, 6.8491434], [53.44251778, 6.84914727], [53.44251988, 6.8491501], [53.44252248, 6.8491531], [53.44252517, 6.84915473], [53.44252316, 6.84915181], [53.44252377, 6.84915124], [53.4425233, 6.84914949], [53.44252341, 6.84914848], [53.44252276, 6.84914827], [53.44252397, 6.84914868], [53.4425216, 6.84914477], [53.44252001, 6.84914287], [53.44252107, 6.84914273], [53.44251986, 6.84913869], [53.44251841, 6.84913463], [53.44251482, 6.84912822], [53.44251525, 6.84912649], [53.4425148, 6.84912465], [53.44251483, 6.84912049], [53.44251625, 6.84911749], [53.44251677, 6.84911403], [53.4425187, 6.84910978], [53.44252028, 6.84910694], [53.44252218, 6.84910622], [53.44252457, 6.84910649], [53.44252783, 6.84910729], [53.44253168, 6.84910888], [53.44253668, 6.84910943], [53.44254088, 6.84910976], [53.44254363, 6.84910898], [53.44254612, 6.84910996], [53.44254803, 6.84910946], [53.44255004, 6.84910945], [53.44255416, 6.84910766], [53.44256019, 6.84910343], [53.44256469, 6.84909908], [53.44256753, 6.84909764], [53.44257106, 6.84909639], [53.44257482, 6.84909654], [53.44257861, 6.84909769]] 

Но безуспешно. Моя процедура генерации кодирования полилинии было следующее (Ни работы, как я намерен их):

var locations = //Input either of above data types.. 
var polyline = ol.format.Polyline.encodeDeltas(locations, 2); 
// or 
var polyline = ol.format.Polyline.encodeFloats(locations); 

я создал этот fiddle со всеми тремя типами данных в нем, а также линии я попытался используйте для кодирования моей полилинии.

Что я делаю неправильно?

Answer 1

Я думаю, что пример feature-move-animation вводит вас в заблуждение. Нет необходимости использовать ol.format.PolyLine, чтобы программно создать полилинию. Вместо этого, вы просто создать функцию с геометрией полилинии и добавить, что ваш вектор источник:

// Your loctations 
var locations = [[53.44241609, 6.84913974], [53.44241894, 6.84913726], [53.44242156, 6.84913385] /* ... */ ]]; 

// OpenLayers uses [lon, lat], not [lat, lon] for coordinates 
locations.map(function(l) { 
    return l.reverse(); 
}); 

var polyline = new ol.geom.LineString(locations); 
// Coordinates need to be in the view's projection, which is 
// 'EPSG:3857' if nothing else is configured for your ol.View instance 
polyline.transform('EPSG:4326', 'EPSG:3857'); 

var feature = new ol.Feature(polyline); 
var source = new ol.source.Vector(); 
source.addFeature(feature); 

Я обновил свою скрипку here.

Answer 2

Вы можете взять свой первый массив координат, но вы должны переключить свои координаты на [lon, lat] формат (вместо [lat, lon]). Вы можете использовать эту функцию, чтобы переключить координаты соответственно:

function getLonLatCoordinateArray(coordArrayWithLatLonFormat){ 
    // create new coord array 
    lonLatCoordArray = []; 
    for (i = 0; i < coordArrayWithLatLonFormat.length; i++){ 
    lonLatCoordArray[i] = [coordArrayWithLatLonFormat[i][1], coordArrayWithLatLonFormat[i][0]] 
    } 
    return lonLatCoordArray; 
} 

Ваша проекция должна быть скорректирована на 'EPSG: 4326':

projection: ol.proj.get('EPSG:4326')

Смотрите обновленный fiddle.