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

Question

我正在努力思考生成非现实世界地图的最佳方法。我有一个客户想创建一个包含数千个 block 的集合，这些 block 可以以与 Leaflet map (http://leafletjs.com)交互的相同方式进行交互。

我了解如何使用 Leaflet，并且我认为最好的方法是创建一个 GeoJSON 文件，其中包含要映射到空白图 block 集上的 block ，但我无法找出生成 GeoJSON 文件的最佳方法。

这是我希望能够显示的内容的粗略图像。这些 block 将是可缩放的，并最终在您缩小时形成更大的图像。这些 block 可能是猫的形状，但您可以放大并将鼠标悬停在/分别单击每个 block :

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

Answer 1

要制作网格，您可以使用 GeoJSON MultiPolygon http://wiki.geojson.org/GeoJSON_draft_version_6#MultiPolygon

对于非真实 map (只是图像)，我使用以下代码为 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);

要将事件绑定(bind)到每个单元格，文档中有一个很好的示例 http://leafletjs.com/reference.html#geojson