1. tilestache can be used to segment vector data.
Use tilestache in win7 to generate tiles in geojson format
This is pre-cut data.
You can also obtain slice data in real time (using ol -- utfgrid) See http://blog.perrygeo.net/2012/02... ERs-and-tilestache/
2. The following describes how to load pre-cut data in openlayers.
Add the ol policy extension file openlayers. Strategy. Grid. js
Load layer:
var style = new OpenLayers.Style(); var ruleAmenity = new OpenLayers.Rule({ symbolizer: {fillColor: 'none', strokeOpacity: 0, pointerEvents: 'all'} }); style.addRules([ruleAmenity]); var styleMap = new OpenLayers.StyleMap({ 'default': style, 'select': new OpenLayers.Style({ strokeWidth: 5, strokeColor: "blue", strokeOpacity: 1 }) }); var baseName = "http://localhost/basicmap/data/${z}/${x}/${y}"; format = new OpenLayers.Format.GeoJSON(); strategy = new OpenLayers.Strategy.Grid(); protocol = new OpenLayers.Protocol.HTTP({ url: baseName + ".geojson", format: format }); vectors = new OpenLayers.Layer.Vector("Vector", { strategies: [strategy], protocol: protocol, styleMap:styleMap, projection: new OpenLayers.Projection("EPSG:4326") }); this.map.addLayer(vectors); var options = { hover: true }; var select = new OpenLayers.Control.SelectFeature(vectors, options); this.map.addControl(select); select.activate();
The following points should be noted: 1. By default, tilestache splits data by epsg: 900913, so the map here is also epsg: 900913 projection.
var mapOptions = { maxExtent : new OpenLayers.Bounds(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892), numZoomLevels : 19, maxResolution : 156543.0339, controls: [], units : 'm', projection : "EPSG:900913", displayProjection : new OpenLayers.Projection("EPSG:4326"), theme : 'css/OlTheme/default/style.css' }; this.map = new OpenLayers.Map('map', mapOptions);
Load geojson slices:
You can check the data.
Highlight when you move the mouse over the icon (the icon is rendered by the background geoserver ):