tile-join을 사용하여 무거운 geojson을 XYZ tile로 변환하고 GitHub에서 호스팅하는 방법

요 전날, note 에 대만 정부가 마스크 실시간 재고 상황을 공개하고 며칠 만에 50 개 이상의 앱이 폭탄 라고 하는 기사를 썼습니다만, 그 때에 벡터 타일 신이신 @hfu 씨로부터 아래와 같은 코멘트를 받았습니다.



대만 정부의 굉장함에 대해서는 서두의 기사를 읽어 주셨으면 합니다만, 이번은 GeoJSON의 처리에 대해서 쓰고 싶습니다.
첫째, 여기에 언급된 GeoJSON 파일 여기 . 확실히 8M 가까이 있습니다.

hfu 씨가 쓴 것처럼 tippecanoe 로 mbtiles 벡터 타일화해 mapbox 에 업로드 하는 것으로 Mapbox Studio 등으로부터도 데이터 소스로서 사용할 수 있습니다만, 가능하면 무료로 하고 싶은 곳입니다. 그래서 더욱 멋진 신탁이.



이것이다! 그래서 바로 실행에 옮겨 보았습니다.

이런 느낌의 맵을 표시할 수 있습니다.


URL은 여기
htps : //는 lsk. 기주 b. 이오 / p는 r 마시에 s - 치 s / 어서 x. HTML

GeoJSON에서 XYZ 타일 만들기

자세한 것은 github (을)를 보실 수 있으면 좋겠습니다만, 이하의 처리를 CircleCI 경유로 실시하고 있습니다

tippecanoe 설치

다음 Rakefile 실행

task :default do
sh "curl https://raw.githubusercontent.com/kiang/pharmacies/master/json/points.json | tippecanoe -f -o pharmacies.mbtiles --base-zoom=2"
sh "tile-join --output-to-directory=zxy --force --no-tile-compression --no-tile-size-limit pharmacies.mbtiles"
end

gh-pages 브랜치에 push

중요한 것은 Rakefile 부분이지만 먼저 GeoJSON을 다운로드하고 tippecanoe 명령을 사용하여 .mbtiles 파일을 생성하는 것입니다. --base-zoom=2 를 붙이지 않으면, 마음대로 끌어 버렸습니다.
그런 다음 tile-join 명령으로 XYZ 타일을 만듭니다. --output-to-directory 옵션을 사용하여 XYZ 파일의 출력 대상을 지정할 수 있습니다.

덧붙여서, 이 처리는 1분마다 CircleCI의 cron 트리거로 실행되고 있습니다. 자세한 내용은 .circleci/config.yml을 참조하십시오.

XYZ 타일 보기

Mapbox-GL JS 를 사용하고 있는 경우, 이하와 같은 기술로 호출할 수 있습니다.

map.on('load', function() {
  map.addLayer({
        "id": "pharmacies",
        "type": "circle",
        "source": {
            "type": "vector",
            "tiles": ["https://halsk.github.io/pharmacies-tiles/zxy/{z}/{x}/{y}.pbf"],
            "maxzoom": 14
        },
        "source-layer": "pharmacies",
        "paint": {
            'circle-radius': 5,
            "circle-stroke-width": 1,
            // color circles by ethnicity, using a match expression
            'circle-color': [
                "case",
                [
                    ">",
                    ["get", "mask_adult"],
                    200
                ],
                "hsl(252, 91%, 42%)",
                [
                    ">",
                    ["get", "mask_adult"],
                    100
                ],
                "hsl(65, 97%, 57%)",
                [
                    "<",
                    ["get", "mask_adult"],
                    101
                ],
                "hsl(0, 98%, 53%)",
                "#000000"
            ]
        }
    })
});

tiles 그런데 GitHub Pages 의 URL 를 지정하고 있는 것이군요.circle-color 의 지정에서는, 재고의 수마다 빨강, 노랑, 파랑으로 색을 나누고 있습니다.

실은, 아직 몇가지 신경이 쓰이는 Issue하고 싶은 일 이 몇개인가 있습니다만, 그쪽에 대해서는 또 이번.

파일을 분할하고 XYZ 벡터 타일화함으로써 무거운 GeoJSON을 가볍게 할 수 있었습니다.

이 데이터 소스는 아직 8M 정도이므로 그대로도 사용할 수 있습니다만, 보다 큰 데이터를 취급하는 경우, 이러한 방법도 검토해 봐 주면 좋지 않을까요.

hfu 씨, 감사합니다!