javascript - 在 svg 上绘制 OpenStreetMap 项目

Question

来自 OpenStreetMap 的区域被转换为一个数组，其中包含要在浏览器中的 SVG 上绘制的所有区域的坐标。

[
  "48.2290963 16.3522533",
  "48.2294087 16.3521388",
  "48.2294249 16.3525140",
  "48.2297088 16.3523572",
  "48.2298889 16.3523674",
  "48.2299063 16.3528332",
  "48.2293137 16.3529256",
  "48.2293106 16.3525268",
  "48.2291061 16.3525292",
  "48.2291009 16.3523838",
  "48.2290963 16.3522533"
]

该数组包含该区域的所有顶点(每个子数组的第一个元素是 x 坐标，第二个元素是 y)。

如果我生成 <svg>与 <polygons>其中points=""属性用上面数组的值填充，没有任何可见的，这是合乎逻辑的:

数字非常高，仅最后一位小数有所不同。

为了渲染可见的、比例良好的区域，我必须去除 map 数据两侧的“空英里”。

我该怎么做？

Answer 1

有许多不同的选项:

• 在 svg 元素上使用 viewBox 属性，例如viewBox="48.229 16.352 0.001 0.001"(注意:Safari 似乎在处理像这样的非常小的宽度时存在一些问题)

• 使用带有适当翻译和缩放的变换

• 在生成多边形之前转换坐标。 - 和 * 应该足够了。