在 JSON 文件的坐标之间画线

Question

我有一个 JSON 保存数据：

var myData = [
  {
    "ID": 1,
    "DeviceSerialNumber": "941",
    "Latitude": 64.19219207763672,
    "Longitude": 28.963903427124023,
  },
  {
    "ID": 2,
    "DeviceSerialNumber": "9416",
    "Latitude": 65.34219207763672,
    "Longitude": 29.543903427124023,
  },
  {
    "ID": 3,
    "DeviceSerialNumber": "9416ba6",
    "Latitude": 66.34219207763672,
    "Longitude": 28.543903427124023,
  },
]

我可以使用以下代码在地图上绘制点：

function loadData(data) {

  var adataSource = new ol.source.Vector();

  // transform the geometries into the view's projection
  var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');

  // loop over the items in the response
  for (var i = 0; i < data.length; i++) {

    //create a new feature with the item as the properties
    var feature = new ol.Feature(data[i]);

    // add a name property for later ease of access
    feature.set('name', data[i].DeviceSerialNumber);

    // create an appropriate geometry and add it to the feature
    var coordinate = transform([parseFloat(data[i].Longitude), parseFloat(data[i].Latitude)]);
    var geometry = new ol.geom.Point(coordinate);
    feature.setGeometry(geometry);

    // add the feature to the source
    dataSource.addFeature(feature);
  }

  return dataSource;
}

var vectorLayer = new ol.layer.Vector({
  source: loadData(myData),
  visible: true,
  style: new ol.style.Style({
    image: new ol.style.Circle( /** @type {olx.style.IconOptions} */({
      radius: 5,
      fill: new ol.style.Fill({
        color: '#266ca6'
      })
    }))
  })
});

不过我想根据坐标画一条路线=线。所以这条路线将从第一个坐标开始绘制，然后直到下一个坐标，然后是下一个坐标等等......我试图以这种方式修改我的代码，但我没有在我的地图上获得任何路线。我做错了什么？

//loads data from a json file and creates features
function loadData(data) {

  var dataSource = new ol.source.Vector();

  // transform the geometries into the view's projection
  var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');

  // loop over the items in the response
  for (var i = 0; i < data.length; i++) {

    //create a new feature with the item as the properties
    var feature = new ol.Feature(data[i]);

    // add a name property for later ease of access
    feature.set('name', data[i].DeviceSerialNumber);

    // create an appropriate geometry and add it to the feature
    var coordinate = transform([parseFloat(data[i].Longitude), parseFloat(data[i].Latitude)]);
    var geometry = new ol.geom.LineString(coordinate);
    feature.setGeometry(geometry);

    // add the feature to the source
    dataSource.addFeature(feature);
  }

  return dataSource;
}

var vectorLayer = new ol.layer.Vector({
  source: loadData(myData),
  visible: true,
  style: new ol.style.Style({
    fill: new ol.style.Fill({ color: '#00FF00', weight: 4 }),
    stroke: new ol.style.Stroke({ color: '#00FF00', width: 2 })
  })
});

这是我一直在尝试使用的示例：Draw line between two points using OpenLayers

Answer 1

LineString 需要一个包含所有坐标的特征

  var coordinates = [];
  for (var i = 0; i < data.length; i++) {
    var coordinate = transform([parseFloat(data[i].Longitude), parseFloat(data[i].Latitude)]);
    coordinates.push(coordinate);
  }
  var feature = new ol.Feature();
  var geometry = new ol.geom.LineString(coordinates);
  feature.setGeometry(geometry);

  // add the feature to the source
  dataSource.addFeature(feature);

在 JSON 文件的坐标之间画线

Draw lines between coordinates from JSON file

javascript

openlayers

openstreetmap