在svg上绘制OpenStreetMap项目

问题描述：

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

[ 
    "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=""属性充满了阵列的上述值，没有什么是可见的，这是合乎逻辑：

的数字是非常高的，仅在过去的小数位数不同。

为了呈现可见的，比例合适的区域，我将不得不去掉地图数据两侧的“空行程”。

我该怎么做？

答

有许多不同的选项：

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

在svg上绘制OpenStreetMap项目

相关推荐