3

非現実世界の地図を生成するための最良のアプローチについて頭を悩ませようとしています。Leaflet マップ ( http://leafletjs.com )と対話できるのと同じ方法で対話できる、基本的に何千ものブロックのセットを作成したいクライアントがいます。

Leaflet の使用方法は理解しています。ブロックの GeoJSON ファイルを作成して空のタイルセットにマップするのが最善の方法だと思いますが、GeoJSON ファイルを生成する最善の方法を見つけるのに苦労しています。

これが私が表示できるようにしたいものの大まかなイメージです。ブロックはズーム可能であり、ズームアウトすると、最終的にはるかに大きな画像が形成されます。ブロックは猫の形をしているかもしれませんが、各ブロックを個別にズームインしてホバー/クリックすることができます:

ここに画像の説明を入力

過去に GeoJSON ファイルを使用して州/国を描画するためにこれを行ったことがありますが、これらのファイルは常に他のソースから取得してきました。これらのブロック/ブロックを構築する GeoJSON ファイルを生成する方法について何か提案はありますか?

4

1 に答える 1

3

グリッドを作成するには、GeoJSON MultiPolygon http://wiki.geojson.org/GeoJSON_draft_version_6#MultiPolygonを使用できます。

非現実的なマップ (画像のみ) の場合、次のコードを使用して Leaflet のグリッドを生成しました。

var countX = 10; //cells by x
var countY = 10; //cells by y
var cellWidth = mapWidth / countX;
var cellHeight = mapHeight / countY;

var coordinates = [],
    c = {x: 0, y: mapHeight}, //cursor
    //top-left/top-right/bottom-right/bottom-left
    tLx, tLy,   tRx, tRy,
    bRx, bRy,   bLx, bLy;

// build coordinates array, from top-left to bottom-right
// count by row
for(var iY = 0; iY < countY; iY++){
  // count by cell in row
  for(var iX = 0; iX < countX; iX++){
    tLx = bLx = c.x;
    tLy = tRy = c.y;
    tRx = bRx =c.x + cellWidth;
    bRy = bLy = c.y - cellHeight;
    var cell = [
      // top-left/top-right/bottom-right/bottom-left/top-left
      [tLx, tLy], [tRx, tRy], [bRx, bRy], [bLx, bLy], [tLx, tLy]
    ];
    coordinates.push(cell);
    // refresh cusror for cell
    c.x = c.x + cellWidth;
  }
  // refresh cursor for row
  c.x = 0;
  c.y = c.y - cellHeight;
}

var grid = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type:  'MultiPolygon',
        coordinates: [coordinates]
      }
    }
  ]
};
// add grid to map
L.geoJson(grid).addTo(map);

イベントを各セルにバインドするには、ドキュメントhttp://leafletjs.com/reference.html#geojsonに素晴らしい例があります

于 2013-04-25T16:52:35.317 に答える