1. 首页
  2. 问答
  3. 如何使用我自己的坐标

如何使用我自己的坐标

2017-01-09 86 views
0

我想添加一个折线和绘制动画沿着我的折线产生类似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在所有三种类型的数据，以及行我试图用于编码我的多段线。

我在做什么错？

来源

2017-01-09 Zeliax

回答

4

我认为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。

来源

2017-01-10 08:18:30 ahocevar

+0

干杯。这正是我需要的！ – Zeliax

1

你可以把你的第一个坐标数组，但你必须将坐标切换到[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。

来源

2017-01-10 08:19:03 Lars

相关问题

 相关问题