전 지구를 10m 단위로 쪼개는 방법

https://github.com/mapbox/tilebelt

GitHub - mapbox/tilebelt: simple tile utilities

 

tileBelt를 사용해야 한다.

 

https://github.com/lunaStratos/react-map/blob/master/src/map/MapMapbox.jsx

GitHub - lunaStratos/react-map: 리액트로 만든 구글지도, mapbox 다룬 거 모음

의 코드중에 다음부분이 있다.

 

 //브라우져 지도의 남서쪽, 북동쪽 좌표
    const ne = map.current.getBounds().getNorthEast();
    const sw = map.current.getBounds().getSouthWest();

    const tile = tilebelt.pointToTile(ne.lng, ne.lat, process.env.REACT_APP_ZOOMLEVEL);
    const bbox = tilebelt.tileToBBOX(tile);

    const offset = [bbox[2] - bbox[0], bbox[3] - bbox[1]];        // Tile 한변의 길이 구하는 부분

    // Grid 만드는 2중 for문
    for (let i = sw.lng - offset[0]; i <= ne.lng + offset[0]; i += offset[0]) {     // 0: longitude, 1: latitude
      for (let j = sw.lat - offset[1]; j <= ne.lat + offset[1]; j += offset[1]) {
        const _tile = tilebelt.pointToTile(i, j, process.env.REACT_APP_ZOOMLEVEL);
        const _geoJson = tilebelt.tileToGeoJSON(_tile).coordinates;
        onScreenJson.coordinates.push(_geoJson);
        onScreenJson.quadKeys.push(tilebelt.tileToQuadkey(_tile));
      }
    }

    const geometryJson = setGeometryJson(onScreenJson.coordinates);

    // 타일 라인 레이어 생성
    if (map.current.getSource("tileData") === undefined) {

      map.current.addSource("tileData", {
        type: "geojson",
        data: geometryJson
      });

      map.current.addLayer({
        id: "tile_layer",
        type: "line",
        source: "tileData",
        layout: {
          "line-join": "round",
          "line-cap": "round"
        },
        paint: {
          "line-color": "#222222",
          "line-width": 1,
          "line-opacity": 0.3
        },
        minzoom: 17
      });

    } else { // map.current.getSource("tileData") !== undefined
      map.current.getSource("tileData").setData(geometryJson);
    }

 

이중 for문으로 grid를 만드는게 핵심이다.