javascript - 如何使用我自己的坐标向 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);

我已经更新了你的 fiddle here .