在JSON檔案中的坐標之間畫線

我有一個保存資料的 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 })
  })
});

這是我一直在嘗試使用的示例：使用 OpenLayers 在兩點之間畫線

uj5u.com熱心網友回復：

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

標籤：javascript 开放层 打开街道地图

上一篇：如何根據定義的屬性過濾和排序物件？

下一篇：Javascript.為什么第一次點擊不起作用但第二次點擊正常？