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座標、2番目はyです）。

私はpoints=""属性は、上記の配列の値で満たされている<polygons>で<svg>を生成する場合、何が論理的である、見えません：

数字は非常に高く、唯一の最後の小数点以下の桁が異なります。

地図上の目に見えてきれいな領域をレンダリングするには、マップデータの横にある「空きマイル」を削除する必要があります。

どうすればよいですか？

Answer 1

さまざまなオプションがあります。

• は、例えば、svg要素にviewBox属性を使用しますviewBox="48.229 16.352 0.001 0.001"（NB：Safariはこれらのような非常に小さな幅の問題のビットを持っているようです）

• 適切translateとscale

• とtransformを使用するポリゴンを生成する前に座標変換します。 -と*で十分です。