生成要与Leaflet一起使用的GeoJSON网格

Question

我正试图围绕生成非现实世界地图的最佳方法。我有一个客户端，想要创建基本上可以与您进行交互的数千个块的集合，与Leaflet map（http://leafletjs.com）进行交互。

我理解如何使用Leaflet，我认为最好的方法是创建要在空白tileset上映射的块的GeoJSON文件，但是我无法找出生成GeoJSON文件的最佳方法。

这是我希望能够显示的粗略图像。这些块可以缩放，并在缩小时最终形成更大的图像。块可能是猫的形状，但您可以放大并单独悬停/单击每个块：

我过去曾使用GeoJSON文件绘制状态/国家/地区，但我总是从其他来源提取这些文件。关于如何生成这些块的任何建议/构建块的GeoJSON文件？

Answer 1

要制作网格，您可以使用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

中有一个很好的示例