Jquery 如何将GeoJson数据传递到地图外的div
使用OpenLayers3,我在地图上动态显示来自geojson的点,这取决于地图的扩展,这很好。见下面的代码: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(',') ;
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>');
});