Merge pull request #291 from smellman/smellman/vector-tile-support

 #288 ベクターレイヤーを一つに

components/PrintableMap.vue

@@ -154,6 +154,10 @@ export default {
             "tiles": ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', 'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png', 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png'],
             "tileSize": 256,
             "attribution": 'Map data © <a href="http://openstreetmap.org/">OpenStreetMap</a>'
+          },
+          "mapprint": {
+            "type": "vector",
+            "url": `https://kamimap.com/data/${this.map_config.map_id}/tilejson.json`
           }
         },
         "layers": [{

create_tiles.sh

@@ -8,5 +8,4 @@ id=${file%".kml"}
 target="${id}.mbtiles"
 zxy="${id}/zxy"
 mkdir -p "${dir}/$zxy"
-./node_modules/togeojson/togeojson "${dir}/$file" | tippecanoe  -f -o "${dir}/$target" --base-zoom=2 
-tile-join --output-to-directory="${dir}/$zxy" --force --no-tile-compression --no-tile-size-limit "${dir}/$target"
+npx togeojson "${dir}/$file" | tippecanoe  -f -o "${dir}/$target" --base-zoom=2

createtiles.ts

@@ -1,6 +1,7 @@
 const axios = require('axios');
 const fs = require('fs');
 const shell = require('shelljs')
+const path = require('path')
 
 const TARGET_DIR = './dist/data/';
 const CONFIG_DIR = './assets/config/'
@@ -10,34 +11,62 @@ if (!fs.existsSync(TARGET_DIR)) {
     fs.mkdirSync(TARGET_DIR, {recursive: true});
 }
 
+const _make_tilejson = (dir: string, base_name: string) => {
+  let metadata = require(`${dir}${base_name}/metadata.json`)
+  //console.log(metadata)
+  let vector_layers = JSON.parse(metadata.json)
+  delete metadata.json
+  metadata.vector_layers = vector_layers.vector_layers
+  metadata.center = metadata.center.split(',').map((v) => parseFloat(v))
+  metadata.bounds = metadata.bounds.split(',').map((v) => parseFloat(v))
+  metadata.pixel_scale = 256
+  metadata.tilejson = "2.0.0"
+  metadata.tile = [
+    `https://kamimap.com/data/${base_name}/zxy/{z}/{x}/{y}.pbf`
+  ]
+  fs.writeFile(`${dir}${base_name}/tilejson.json`, JSON.stringify(metadata), (err) => {
+    if (err) {
+      console.log("Wrighting tilejson.json failed: " + err)
+    }
+  })
+}
+
 // load config
 const list = require(`${CONFIG_DIR}list.json`)
 list.map((name) => {
   // load map config
   console.log(`loading ${CONFIG_DIR}${name}`)
   const config = require(`${CONFIG_DIR}${name}`)
-  config.sources.forEach((source) => {
-    // download source file
-    if (!fs.existsSync(`${TARGET_DIR}${config.map_id}`)) {
-      fs.mkdirSync(`${TARGET_DIR}${config.map_id}`, {recursive: true});
-    }
-    console.log(`downloading ${source.url}...`)
-    axios.get(source.url).then((response) => {
-      // currently, this is supporting only kml
-      const file_path = `${TARGET_DIR}${config.map_id}/${source.id}.${source.type}`
-      fs.writeFile(file_path, response.data, (err) => {
-        // failed
-        if(err){
-          console.log("Downloading kml file failed" + err)
-          throw err
-        }
-        // success
-        else{
-          console.log(`Downloaded ${source.id}.${source.type}`)
-          // convert kml files to xyz tile
-          shell.exec(`./create_tiles.sh ${file_path}`)
-        }
+  const funcs = config.sources.map(source => {
+    return new Promise((resolve, reject) => {
+      // download source file
+      if (!fs.existsSync(`${TARGET_DIR}${config.map_id}`)) {
+        fs.mkdirSync(`${TARGET_DIR}${config.map_id}`, {recursive: true});
+      }
+      console.log(`downloading ${source.url}...`)
+      axios.get(source.url).then((response) => {
+        // currently, this is supporting only kml
+        const file_path = `${TARGET_DIR}${config.map_id}/${source.id}.${source.type}`
+        fs.writeFile(file_path, response.data, (err) => {
+          // failed
+          if(err){
+            console.log("Downloading kml file failed" + err)
+            reject(err)
+          }
+          // success
+          else{
+            console.log(`Downloaded ${source.id}.${source.type}`)
+            // convert kml files to xyz tile
+            shell.exec(`./create_tiles.sh ${file_path}`)
+            resolve()
+          }
+        })
       })
     })
   })
+  Promise.all(funcs).then(() => {
+    shell.exec(`./merge_tiles.sh ${name} ${TARGET_DIR}`)
+    const base_name = path.basename(name, '.json')
+    _make_tilejson(TARGET_DIR, base_name)
+  })
 })

merge_tiles.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+file=$1
+base=`basename $file .json`
+target_dir=$2
+dir=$target_dir$base
+echo "----------------------"
+echo "convert raw tile to ${dir}/${zxy}"
+tile-join --output-to-directory="${dir}/$zxy" --force --no-tile-compression --no-tile-size-limit $dir/*.mbtiles