Javascript 在svg上绘制OpenStreetMap项目

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坐标）

如果我使用

生成一个

，其中

points=“”

属性由上面数组的值填充，则任何内容都不可见，这是合乎逻辑的：

数字非常高，只有小数点后几位不同

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

---

如何做到这一点？

有许多不同的选项：

• 使用

  svg

  元素上的

  viewBox

  属性，例如

  viewBox=“48.229 16.352 0.001 0.001”

  （注意：Safari似乎有一点问题，像这样的宽度非常小）

• 使用带有适当的

  translate

  和

  scale

• 在生成多边形之前转换坐标<代码>-和

  *

  应该足够了