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 回答