Jquery 如何将GeoJson数据传递到地图外的div

Jquery 如何将GeoJson数据传递到地图外的div,jquery,html,ajax,openlayers,Jquery,Html,Ajax,Openlayers,使用OpenLayers3,我在地图上动态显示来自geojson的点,这取决于地图的扩展,这很好。见下面的代码: var geoJSONFormat = new ol.format.GeoJSON(); var vectorSource = new ol.source.Vector({ loader: function(extent) { var url = 'restaurant-geojson.php' + '?bbox=' + extent.join(',') ;

使用OpenLayers3,我在地图上动态显示来自geojson的点,这取决于地图的扩展,这很好。见下面的代码:

var geoJSONFormat = new ol.format.GeoJSON();
var vectorSource = new ol.source.Vector({
    loader: function(extent) {
        var url = 'restaurant-geojson.php' + '?bbox=' + extent.join(',') ;
       $.ajax({
           url: url,
           success: function(data) {
               var features = geoJSONFormat.readFeatures(data);
               vectorSource.addFeatures(features);
           }
       }); 
    },
    strategy: ol.loadingstrategy.bbox
});
var vector = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
        image: new ol.style.Circle({
            radius:6,
            stroke: new ol.style.Stroke({
                color: 'rgba(0, 0, 255, 1.0)',
                width: 2
            }),  
        })
    })
});
var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var map = new ol.Map({
    layers: [raster, vector],
    target: document.getElementById('map'),
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [-79.80,22.10],
      maxZoom: 19,
      zoom: 12
    })
  });

  map.getView().on('change:resolution', function(evt){
    vectorSource.clear();

  });
现在我还想在地图的一个div中显示这些点的数据。因此,每次加载时创建矢量源,然后在缩放或平移贴图上,我希望显示点的div也被更新。 有没有办法做到这一点? 我是否需要在我的矢量源ajax的成功中添加一些ajax?
你有什么例子吗?

好的,所以最后终于做到了。在ajax的成功中,只需添加:

$.each(data.features, function (key, val) {
      geometry = val.geometry; 
      properties = val.properties;
      $("#name").append('<div>' + properties.name +'</div>'); 
    });