東京都のベクトルタイルマップ作り

ShogoHirasawa commented 2 years ago

完成理想図

.shpから.geojson にQGISで変換

このサイトから.shpをインストールし、QGISで.geojsonに変換

Tokyo_VT.geojson として保存

tippecanoeでベクトルタイル化

以下のコマンドを実行

tippecanoe --no-tile-compression -z20 -Z12 -e Tokyo_VT_dir -y fclass -l Tokyo_VT -ai Tokyo_VT.geojson

オプション -y の部分については、上記で制作したgeojsonの中を見て、fclassを指定することとした。

作ったベクトルタイルを描画

index.htmlに以下のコードを記述

ベクトルタイルは置き場所

ラスタータイルのみであれば描画はされた。ここにベクトルタイルが加わると、描画がされない...。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>東京災害マップ</title>
<meta
  name="viewport"
  content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<script src="maplibre-gl.js"></script>
<link href="maplibre-gl.css" rel="stylesheet" />
<style>
  body {
    margin: 0;
    padding: 0;
  }
  #map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
  }
</style>
</head>
<body>
<div id="map"></div>
<script>
  var map = new maplibregl.Map({
    container: "map", // container id
    style: {
      version: 8,
      sources: {
        "raster-tiles": {
          type: "raster",
          tiles: ["http://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
          tileSize: 256,
          attribution:
            'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>',
        },
        vector: {
          maxzoom: 20,
          minzoom: 12,
          type: "vector",
          tiles: [
            "https://furuhashilab.github.io/2021gsc_ShogoHirasawa/Tokyo_VT/{z}/{x}/{y}.pbf",
          ],
          tileSize: 512,
        },
        dronebird: {
          type: "raster",
          tiles: [
            "https://furuhashilab.github.io/2021gsc_ShogoHirasawa/futakotamagawac_ RT/{z}/{x}/{y}.png",
          ],
          tileSize: 256,
          attribution:
            'Map tiles by <a target="_top" rel="noopener" href="http://furuhashilab.com/">Furuhashi Lab.</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>',
        },
        // evacuationcenter: {
        //   tiles: [
        //     "https://furuhashilab.github.io/2021gsc_ShogoHirasawa/evacuation_center_VT/{z}/{x}/{y}.pbf",
        //   ],
        //   type: "vector",
        // },
      },
      layers: [
        {
          id: "vector",
          type: "fill",
          "source-layer": "fclass",
          source: "vector",
          minzoom: 0,
          maxzoom: 22,
        },
        {
          id: "lowest-background",
          type: "raster",
          source: "raster-tiles",
          minzoom: 0,
          maxzoom: 22,
        },
        {
          id: "dronebird",
          type: "raster",
          source: "dronebird",
          minzoom: 0,
          maxzoom: 22,
        },

        // {
        //   id: "evacuationcenter",
        //   layout: {
        //     "icon-image": "store-icon",
        //   },
        //   paint: {},
        //   source: "evacuationcenter",
        //   source-layer: "setagaya",
        //   type: "symbol",
        //   minzoom: 10,
        //   maxzoom: 22,
        // },
      ],
    },
    center: [139.62756, 35.60882], // starting position
    zoom: 14, // starting zoom
  });
</script>
</body>
</html>


- 画面が白くなり描画されず...
<img width="1389" alt="スクリーンショット 2022-01-28 15 08 25" src="https://user-images.githubusercontent.com/29940264/151496118-d36b3610-4d59-48a9-ad57-dc110ecb9afb.png">

ShogoHirasawa commented 2 years ago

.shpから.geojsonに上手く書き出せていないのかも...

ShogoHirasawa commented 2 years ago

タイルソースの指定が間違っているのかも。ここを参考に少し調べてみる https://docs.mapbox.com/help/glossary/source-layer/

ShogoHirasawa commented 2 years ago

コンソールログをみたら以下の表示がでた。 tilesizeに問題があったらしい

ShogoHirasawa commented 2 years ago

とりあえず、ラスターの上にベクトルタイルを表示させることに成功！

たぶん、geojsonのデータがよくなかったのか、描画位置がいまいち...。次は、geojsonのデータを作り直すところからやりたい

furuhashilab / 2021gsc_ShogoHirasawa