[Openlayers] Loading vector slices in ol can effectively solve the problem of large data volume. In win7, tilestache is used to generate tiles in geojson format.

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 ):