OpenLayers解决大数据量的问题

1.首先我们对矢量数据进行切片 可使用tilestache

http://www.openlayers.cn/forum.php?mod=viewthread&tid=141这个是预先切好的数据

也可以实时去获取切片数据（使用OL-- utfgrid）详见http://blog.perrygeo.net/2012/02 ... ers-and-tilestache/

2.下面讲下在Openlayers中如何加载预先切好的数据

添加OL的策略拓展文件 OpenLayers.Strategy.Grid.js

Grid.zip

加载图层：

[代码]js代码：

    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();

下面说下要注意的几点：

1.默认下tilestache切出的数据是按EPSG：900913投影切的

所以我这里的map也是EPSG：900913投影

[代码]js代码：

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

加载geojson切片：

可以看下这切数据

鼠标移到图标上时高亮（图标是后台geoserver渲染的）：