openlayers wfs maxFeatures and zoomend-event
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js"></script>
<body onload="init()">
<div id="map" class="smallmap"></div>
<div id="panel"></div>
<p>Zoom-Level: <b><span id="zoomlevel">4</span></b>
</p>
</body>
CSS
#map {
width: 400px;
height: 400px;
border: 1px solid #dddddd;
}
.Panel2 {
width: 18px;
height: 54px;
cursor: pointer;
right: 10px;
top: 74px;
}
.firstItemInactive, .secondItemInactive {
background: #30d5c8;
border: 2px solid #075f67;
width: 18px;
height: 18px;
}
.firstItemActive, .secondItemActive {
background: #ffffdd;
border: 2px solid #dddddd;
width: 18px;
height: 18px;
}
JavaScript
var map, refresh;
var layer, wms;
function init() {
map = new OpenLayers.Map('map');
wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
layers: 'basic'
});
refresh = new OpenLayers.Strategy.Refresh({force: true, active: true});
bbox_strategy = new OpenLayers.Strategy.BBOX();
layer = new OpenLayers.Layer.Vector("WFS", {
strategies: [bbox_strategy,refresh],
protocol: new OpenLayers.Protocol.WFS({
url: "http://demo.opengeo.org/geoserver/wfs",
version: "1.1.0",
featureType: "ne_10m_populated_places",
featureNS: "http://openstreemap.org"
})
});
map.addLayers([wms, layer]);
map.setCenter(new OpenLayers.LonLat(146.7, -41.8), 4);
map.events.register('zoomend', this, function (event) {
var zoomLevel = map.getZoom();
if (zoomLevel >8) {
bbox_strategy.update();
layer.protocol.options.maxFeatures = 20
refresh.refresh();
document.getElementById("zoomlevel").innerHTML = zoomLevel;
} else if (zoomLevel >4&&zoomLevel<9) {
bbox_strategy.update();
layer.protocol.options.maxFeatures = 30
refresh.refresh();
document.getElementById("zoomlevel").innerHTML = zoomLevel;
} else {
bbox_strategy.update();
layer.protocol.options.maxFeatures = 10
refresh.refresh();
document.getElementById("zoomlevel").innerHTML = zoomLevel;
}
console.log(zoomLevel);
});
}