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中显示这些点的数据。所以每次创建vectorsource时（加载然后再放大或缩放地图）我都希望div显示要更新的点。有没有办法实现这个目标？我是否需要在＆＃34;成功＆＃34;中添加一些ajax？我在矢量源中的ajax？你有什么例子吗？

Answer 1

好的，所以终于成功了。在ajax成功的内部，只需添加：

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

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

1 个答案: