Как добавить маркеры динамически

Question

Мне просто нужны маркеры в OpenLayers для динамического изменения. Я не знаю, как это сделать ..

цикла console.debug(response.i) выход

[Object { lat="36.15900011", lon="-115.17205183"}, 
Object { lat="36.15899561", lon="-115.17276155"}] 

К сожалению для оклейки полного кода здесь ..

<script type="text/javascript"> 
    $.ajax({ 
     url:'parser', success:function(response){ 
     $(document).ready(function(){ 
      console.debug('hello') 
      var jsonlen = response.length; 
      for (var i=0; i<=jsonlen; i++){ 
      console.debug(response.i) 
      } 
      console.debug(response) 
      // icon feature started 
      var vectorSource = new ol.source.Vector({ 
      // empty vector 
      }) 
      var iconFeature = new ol.Feature({ 
      geometry: new ol.geom.Point(ol.proj.transform([80.2700, 13.0839], 'EPSG:4326', 'EPSG:3857')), 
      name:'Null Island', 
      population: 4000, 
      rainfall:500 
      }) 
      vectorSource.addFeature(iconFeature); 

      //create the style 
      var iconStyle = new ol.style.Style({ 
      image: new ol.style.Icon(/**@type {olx.style.IconOptions}*/({ 
       anchor: [0.5, 46], 
       anchorXUnits: 'fraction', 
       anchorYUnits: 'pixels', 
       opacity: 0.75, 
       src: 'http://ol3js.org/en/master/examples/data/icon.png' 
      })) 
      }); 

      // add the feature vector to the layer vector, 
      // and apply a style to whole layer 
      var vectorLayer = new ol.layer.Vector({ 
      source: vectorSource, 
      style: iconStyle 
      }); 
      var map = new ol.Map({ 
      layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), 
        vectorLayer], 
      target: document.getElementById('map'), 
      view: new ol.View({ 
       center: [0, 0], 
       zoom: 3 
      }) 
      }); 


     }) 
     } 
    }) 
</script> 

выше коды один маркер работает fine

Answer 1

Не зная, что представляет собой ваш json, сложно разобрать ваш ответ. Я бы изменил структуру вашего кода, чтобы сначала создать все, а затем в обработчике успеха ajax либо добавить новые функции в ваш источник, либо очистить источник, либо добавить новые функции.

Я предполагаю, что ваш ответ содержит множество функций. В вашем примере есть два точечных объекта, в приведенном ниже коде предполагается, что они должны образовывать линию, которая может быть любой длины. Если вы действительно вставили весь ответ, удалите второй цикл и просто создайте точку геометрии точки для преобразования и перехода к этой функции.

<script type="text/javascript"> 

//create the source, layer, icon, map and view first 

var vectorSource = new ol.source.Vector({ 
    // empty vector 
}) 


//create the style 
var iconStyle = new ol.style.Style({ 
    image: new ol.style.Icon(/**@type {olx.style.IconOptions}*/({ 
     anchor: [0.5, 46], 
     anchorXUnits: 'fraction', 
     anchorYUnits: 'pixels', 
     opacity: 0.75, 
     src: 'http://ol3js.org/en/master/examples/data/icon.png' 
    })) 
}); 

// and apply a style to whole layer 
var vectorLayer = new ol.layer.Vector({ 
    source: vectorSource, 
    style: iconStyle 
}); 

var map = new ol.Map({ 
    layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), 
     vectorLayer], 
    target: document.getElementById('map'), 
    view: new ol.View({ 
     center: [0, 0], 
     zoom: 3 
    }) 
}); 

$.ajax({ 
    url:'parser', 
    success:function(response){ 
     $(document).ready(function(){ 

      var jsonlen = response.length; 

      // a loop that handles each feature 
      for (var i=0; i<=jsonlen; i++){ 
       console.debug(response.i) 
       //now create your new feature here 
       var coordinates = []; 
       for (var j=0; j<response.i.length; j++){ 
        //this loop adds the pairs of coordinates to an array to make our linestring geometry 
        coordinates.push(ol.proj.transform([+response.i.j.lon, +response.i.j.lat], 'EPSG:4326', 'EPSG:3857')); 
       } 
       var line = new ol.geom.LineString(coordinates); 
       var feature = new ol.Feature({ 
        geometry: line, 
        id: i 
       }); 
       vectorSource.addFeature(feature); 
      } 

     }) 
     } 
    }) 
</script> 

Одна окончательная идея заключается в том, что если вы контролируете сервер, почему не проходят надлежащий формате GeoJSON, я использую https://github.com/jmikola/geojson в PHP для создания в формате GeoJSON, который может быть считан ol.source.GeoJSON источником.