소개

지리원 고도 타일 을 사용하여 브라우저에서 직접 등고선을 그립니다.

고도 데이터(2차원 배열)에 대해 CONREC 과 같은 알고리즘을 이용하여 벡터 데이터를 생성, 그려가는 것이 일반적이라고 생각합니다만, 이 기사에서는 2차원 배열로부터 직접 등고선 래스터 이미지를 생성하는 방법을 소개합니다.

데모

데모 htps : // bl. 오크스. rg / f 여과 또는 t / 등 w / 또는 c7에 74534에 1c9에 b68b95487d0df5465 /

소스 htps : // st. 기주 b. m / f 여과 또는 t / 또는 c7 74534 1c9 e b68b95487d0df5465

해설

기본

전고 지리원 고도 타일과 Leaflet로 만든 CS 입체도 에서는 고도 데이터를 취득해 곡률·경사를 계산해 화상을 합성하고 있었습니다만, 하고 있는 것은 거의 변함이 없습니다. 곡률·경사 대신에 등고선을 계산했을 뿐입니다.

등고선

앞에서 언급했듯이 일반적으로 2 차원 배열에서 벡터 데이터를 생성합니다. 고도 데이터가 거칠고 픽셀이 밀집된 경우 이러한 방법이 효과적입니다. 그러나 지리원 고도 타일은 매우 조밀합니다. 예를 들어 줌 레벨 14 이하에서 지도를 표시한 상태라면 화면의 모든 픽셀에 대해 고도 값을 알 수 있다는 수준에서 조밀한 데이터가 정비되어 있습니다.

여기서, 다음과 같은 a,b,c,d 의 4 개의 픽셀로 이루어진 그리드에 대해서, 고도치 10 의 등고선을 그려 싶다고 합니다.

a = 20, b = 0 인 경우, a와 b 사이에 등고선이 통과합니다

a = 20, c = 0 인 경우, a와 c 사이에 등고선이 통과합니다

a = 20, d = 0 인 경우, a와 d 사이에 등고선이 통과합니다

벡터의 경우는 여기에서 등고선의 경로를 보다 상세하게 계산하게 됩니다만, 래스터의 경우는 단순히 a 를 채우기만 합니다. 위의 데모에서 실제로 등고선의 채우기 판정을 실시하고 있는 것은 이하와 같은 루틴입니다.

logic.js

// dem を取得
var dem = xhr.responseText.split(/[,\n]/).map(function(a) {
  return Math.floor(parseFloat(a) / 100);
});
var ctx = canvas.getContext("2d");
var img = ctx.createImageData(0x100, 0x100);
for (var i = 0; i <= 0xffff; i++) {
  if ((i & 0xff) === 0xff || (i & 0xff00) === 0xff00)
    continue;
  if (dem[i] !== dem[i + 1] || dem[i] !== dem[i + 0x100] || dem[i] !== dem[i + 0x101]) {
    img.data[i * 4 + 0] = 0xff;
    img.data[i * 4 + 1] = 0xff;
    img.data[i * 4 + 2] = 0xff;
    img.data[i * 4 + 3] = dem[i] % 5 === 0 ? 0xff : 0x70;
  }
}
ctx.putImageData(img, 0, 0);

오른쪽, 아래, 오른쪽 아래 셀의 값과 자신의 값을 비교하여 자신을 채울지 여부를 판정한다는 것이므로 어려운 계산은 하지 않습니다. 스마트폰에서도 동작하는 레벨의 부하입니다. 등고선의 개수가 증가해도 비교적 영향이 적을 것입니다.

요약

해발 타일에서 등고선을 그리는 방법을 소개했습니다. 표고 타일이 조밀하게 정비되어 있기 때문에 가능한 치트라는 느낌도 있지만 비교적 고속으로 등고선을 그리는 것이 가능합니다. 좋은 사용지가 있으면 응용해 보세요.