Leaflet: ๊ฒน์น˜๋Š” GeoJSON MultiPolygon ๋‹ค๊ฐํ˜•์ด ์ฑ„์›Œ์ง€์ง€ ์•Š์Œ

์— ๋งŒ๋“  2015๋…„ 08์›” 21์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: Leaflet/Leaflet

์ด๊ฒƒ์ด #3498๊ณผ ๊ด€๋ จ์ด ์žˆ๋Š”์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์ง€๋งŒ ์—ฌ๊ธฐ์—์„œ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

Leaflet 0.7.3์˜ GeoJSON MultiPolygon์— ๋ถ€๋ถ„์ ์œผ๋กœ ๊ฒน์น˜๋Š” ๋‘ ๊ฐœ์˜ ๋‹ค๊ฐํ˜•์ด ์žˆ๋Š” ๊ฒฝ์šฐ ๊ฒน์น˜๋Š” ์˜์—ญ์ด ์ฑ„์›Œ์ง‘๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋งˆ์Šคํ„ฐ์—์„œ๋Š” ๊ฒน์น˜๋Š” ์˜์—ญ์ด ์ฑ„์›Œ์ง€์ง€ ์•Š๊ณ  ๊ฒน์น˜์ง€ ์•Š๋Š” ์˜์—ญ์ด ์ฑ„์›Œ์ง‘๋‹ˆ๋‹ค.

๋‹ค์Œ์€ GeoJSON์˜ ์˜ˆ์ž…๋‹ˆ๋‹ค.

{
  "geometry": {
    "type": "MultiPolygon", 
    "coordinates": [
      [
        [
          [
            11.96485, 
            55.8434
          ], 
          [
            11.868584, 
            55.8284
          ], 
          [
            11.837216, 
            55.8925
          ], 
          [
            11.863167, 
            55.915432
          ], 
          [
            11.936167, 
            55.896618
          ], 
          [
            11.964784, 
            55.858032
          ]
        ]
      ], 
      [
        [
          [
            11.868584, 
            55.8284
          ], 
          [
            11.761567, 
            55.81378
          ], 
          [
            11.726833, 
            55.896
          ], 
          [
            11.782117, 
            55.928215
          ], 
          [
            11.8749, 
            55.92655
          ], 
          [
            11.863167, 
            55.915432
          ], 
          [
            11.936167, 
            55.896618
          ], 
          [
            11.964784, 
            55.858032
          ], 
          [
            11.96485, 
            55.8434
          ]
        ]
      ]
    ]
  }, 
  "type": "Feature", 
  "properties": {}
}

์•ˆ๋ถ€ ์ธ์‚ฌ,
์ œ์Šคํผ

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

ํด๋ฆฌ๊ณค ์Šคํƒ€์ผ ์˜ต์…˜์—์„œ fillRule: 'nonzero' ๋ฅผ ์„ค์ •ํ•ด ๋ณด์„ธ์š”. https://github.com/Leaflet/Leaflet/pull/2834 , https://developer.mozilla.org/docs/Web/SVG/Attribute/fill-rule ๋ฐ https://mourner.github.io/ ๋„ ์ฐธ์กฐ ํ•˜์„ธ์š”. Leaflet/reference.html#path -fillrule

์‹œ๋„ํ•œ ํ›„ ์—ฌ๊ธฐ์— ์‘๋‹ตํ•˜์‹ญ์‹œ์˜ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

ํด๋ฆฌ๊ณค ์Šคํƒ€์ผ ์˜ต์…˜์—์„œ fillRule: 'nonzero' ๋ฅผ ์„ค์ •ํ•ด ๋ณด์„ธ์š”. https://github.com/Leaflet/Leaflet/pull/2834 , https://developer.mozilla.org/docs/Web/SVG/Attribute/fill-rule ๋ฐ https://mourner.github.io/ ๋„ ์ฐธ์กฐ ํ•˜์„ธ์š”. Leaflet/reference.html#path -fillrule

์‹œ๋„ํ•œ ํ›„ ์—ฌ๊ธฐ์— ์‘๋‹ตํ•˜์‹ญ์‹œ์˜ค.

๋„์›€์„ ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. fillRule: 'nonzero'๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ fillRule์ด 'nonzero'(์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๊ฐ€ ๋ ˆ์ด์–ด์— ์—ฐ๊ฒฐ๋˜์–ด ์žˆ๋‹ค๊ณ  ๊ฐ€์ •)๊ฐ€ ์•„๋‹ ๋•Œ ๊ฒน์น˜๋Š” ์˜์—ญ์„ ํด๋ฆญํ•˜๋Š” ๊ฒƒ๋„ ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์ ๋„ ์–ธ๊ธ‰ํ•ด์•ผ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

fillRule: 'nonzero'๊ฐ€ "multipolygon" ์œ ํ˜• ๊ธฐ๋Šฅ์— ๋Œ€ํ•ด 'evenodd'๋ณด๋‹ค ๋” ๋‚˜์€ ๊ธฐ๋ณธ๊ฐ’์ธ์ง€ ์—ฌ๋ถ€๋ฅผ ๊ณ ๋ คํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๋ฌธ์ œ๋ฅผ ์ข…๋ฃŒํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

์นœ์• ํ•˜๋Š”,
์ œ์Šคํผ

์ง€๊ธˆ์€ 'evenodd' ๋ฅผ ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ๋‘๊ฒ ์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰