【Openlayers】OL中加載矢量切片，可有效解決大數據量的問題

1.首先我們對矢量數據進行切片 可使用tilestache 

win7下使用TileStache生成geojson格式的Tiles

這個是預先切好的數據
也可以實時去獲取切片數據（使用OL-- utfgrid）詳見http://blog.perrygeo.net/2012/02 ... ers-and-tilestache/

2.下面講下在Openlayers中如何加載預先切好的數據

  添加OL的策略拓展文件 OpenLayers.Strategy.Grid.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投影

    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渲染的）：