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

Question

使用 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 显示要更新的点。有没有办法做到这一点？我是否需要在 vectorSource 中的 ajax 的 "success" 中添加一些 ajax？有例子吗？

Answer 1

好的，所以终于成功了。在 ajax 的成功里面添加：

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

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

How to pass GeoJson data to a div out of the map

html

ajax

jquery

openlayers