如何使用我自己的座標

Question

我想添加一個折線和繪製動畫沿着我的折線產生類似this添加折線的OpenLayers 3。

在他們的榜樣但是似乎他們已經編碼的折線，而我真的不能似乎找到這樣或任何方法如何產生與實際位置數據編碼折線任何例子。

我有以下位置數組：

[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。