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;
}

您的地图投影应调整为＆＃39; EPSG：4326＆＃39;：

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

请参阅更新后的fiddle。

如何使用我自己的坐标

2 个答案: