最近研究了下向量切片的實現思路，

首先，切圖工具選擇TileStache，網址：http://www.tilestache.org/

下載安裝過程根據說明即可，安裝的時候需要依賴mapnik（mapnik-win-v2.2.0），否則無法進行向量切圖

python setup.py install

配置資訊可參考官網API：http://www.tilestache.org/doc/

切圖工具的使用：開啟根目錄下的tilestache.cfg檔案，裡面有向量切圖的配置資訊，修改後的配置資訊如下：

{
  "cache":
   {
    "name": "Disk",
    "path": "/tmp/stache",
    "umask": "0000",
    "dirs": "portable",
    "gzip": ["xml", "json"]
  },

然後增加節點資訊：

"beijing_pts":
{
      "provider": {"name": "vector", "driver": "shapefile",
                   "parameters": {"file":"E:\\tmp\\gjzd.shp"}, 
  "properties": { "adcode": "adcode"}
                  }
    }

預設把切圖存在了執行命令的根目錄下的tmp資料夾裡，shp的路徑是絕對路徑，否則報錯，屬性資訊也要注意下，目前屬性無法成功匯出，以後有時間繼續研究

執行切圖的命令：

python ./scripts/tilestache-seed.py -c tilestache.cfg -l beijing_pts -b 39.79 114.25 42.83 118.25 -e geojson 11 13 14 15

切圖結果如下：（找了一個切其他圖層的截圖湊合）

存在的問題：

1.單個圖層的切圖？

2.屬性怎麼匯出？

下面介紹LeafLet進行向量切片的載入

利用Leaflet的外掛

//擴充套件了一下，可以支援GeoJSON格式的tile服務
module.exports.geojsonTile = module.exports.extend({
  fetch: function(url, callback){
    var xhr = d3.xhr(url)
      .responseType('json')
      .get(function(err, xhrResponse){
 //if( typeof xhrResponse != 'undefined'){
 callback(err, ( typeof xhrResponse == 'undefined')?null:(xhrResponse.response || xhrResponse)); 
 //}
       
      });


    return xhr.abort.bind(xhr);
  },
  parse: function(data){
    //var tile = new VectorTile( new pbf( new Uint8Array(data) ) );


    return {geojson: data};
  }
});

然後進行呼叫：

(new Hoverboard.geojsonTile('http://localhost:8090/chinasite/stache/beijing_pts/{z}/{x}/{y}.geojson',{hidpiPolyfill: true}))

  .render('geojson')

    .fill(colors.water)

.stroke(0.5, 'rgba(0,0,0,0.0)')

.addTo(map);

事件暫時還未研究，上圖是1.8w的點資料，出來的效果，比較流暢，底層是通過canvas繪製的每個瓦片的內容