在 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）。

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

数字非常高，仅在小数点后几位不同。

为了呈现可见的、比例良好的区域，我必须去除地图数据两侧的 "empty miles"。

我该怎么做？

Answer 1

有很多不同的选择：

在 svg 元素上使用 viewBox 属性，例如viewBox="48.229 16.352 0.001 0.001"（注意：Safari 似乎对这些非常小的宽度有一点问题）
使用 transform 和适当的 translate 和 scale
在生成多边形之前转换坐标。 - 和 * 应该足够了。

在 svg 上绘制 OpenStreetMap 项目

Draw OpenStreetMap items on svg

javascript

svg

openstreetmap