EgisCorp / XDWorld

WebGL 기반 3D GIS 엔진
15 stars 7 forks source link

polygon.createTMCoordPlane 백그라운드 생성 #447

Open suhwna opened 2 weeks ago

suhwna commented 2 weeks ago

엔진 버전 : 2.7.2

문의 내용 :

안녕하세요.

지도 로딩 후, polygon.createTMCoordPlane으로 6개 정도 polygon을 생성합니다.

전부 생성하는데 50초 정도 걸리는데 그 동안에 지도가 멈춰버립니다.

지도가 멈추지 않고 백그라운드에서 생성하게 할 순 없을까요?

사용한 코드입니다.

const BASE_TM_COORD_PLANE = {
    '29200_0001': { ncols: 1294, nrows: 1621, xllcorner: 177767.0273, yllcorner: 278722.7371 },
    '29200_0002': { ncols: 738, nrows: 831, xllcorner: 176435.7515, yllcorner: 279317.89 },
    '48120_0001': { ncols: 1424, nrows: 967, xllcorner: 346823.65625, yllcorner: 292795.125 },
    '48120_0002': { ncols: 1715, nrows: 1373, xllcorner: 348730.53125, yllcorner: 288787.1875 },
    '48120_0003': { ncols: 1428, nrows: 788, xllcorner: 347328.96875, yllcorner: 288846.75 },
    '47110_0001': { ncols: 644, nrows: 1103, xllcorner: 415918.4375, yllcorner: 375222.125 }
};

const polygon = Module.createPolygon(`FLUD_POLYGON_${_id}`);

polygon.createTMCoordPlane({
    llcorner : {
        coordCode : 20,  // 좌표계 5186
        x : xllcorner,
        y : yllcorner
    },
    grid : {
        col : ncols,
        row : nrows,
        cellSize : cellSize
    },
    gab : 21 // 격자 오차 개선
})
avamk2 commented 2 weeks ago

안녕하세요

해당 기능 설계는 가로와 세로 셀 수가 750 이하에서 동작하게 설계되어 있습니다. 그이상 크기에서 메모리 문제가 생깁니다.

createTMCoordPlane API 기능은 지구본에서 매우 큰 격자를 만들어야 될때 구면 왜곡을 줄일려고 만들어진 기능입니다.

일반적으로 작은 영역은 사각형 폴리곤을 만들어서 이미지 맵핑하는 방식으로 가능합니다.

폴리곤 범위는 ix = xllcorner, iy = yllcorner, ax = xllcorner+ cellsize col , ay = yllcorner + cellsize row 위 좌표를 좌표변환 기능을 통해서 https://sandbox.egiscloud.com/code/main.do?id=others_coordinate_conversion

각각의 최소, 최대 lon,lat 좌표를 갖고 옵니다.

이를 아래 샘플처럼 폴리곤을 만든 후에 격자분석 결과 이미지를 적용하면 됩니다. https://sandbox.egiscloud.com/code/main.do?id=object_polygon_rtt_image_changing

suhwna commented 2 weeks ago

답변 감사합니다.

속도는 확실히 빨라졌습니다. 그런데 폴리곤에 맵핑한 이미지에서 이격이 발생합니다.

이전에는 createTMCoordPlane의 gab으로 해결했었는데, 혹시 다른 방법이 있을까요?

현재 사용중인 폴리곤 이미지 매핑 방식입니다.

setFludGridTexture(_polygon) {
        const canvas = document.createElement('canvas');
        const img = this.createGridToRaster(this.gridData, this.#legend, canvas); // 예시) { data : ctx.getImageData(0, 0, w, h).data, width : w, height : h }
        const buffer = Module._malloc(img.data.byteLength + 1);
        Module.writeArrayToMemory(img.data, buffer);

        _polygon.setTextureByte(buffer, img.data.byteLength, canvas.width, canvas.height, true); // 폴리곤에 텍스처 적용
        Module._free(buffer); // 메모리 해제
    }