Seperti yang disajikan dalam ceramah di FOSS4G Mapbox Studio memungkinkan untuk membuat petak vektor Mapbox dan mengekspornya sebagai .mbtiles
file.
The Mapbox-gl.js perpustakaan dapat digunakan untuk secara dinamis gaya dan membuat ubin vektor Mapbox pada klien (browser) sisi.
Bagian yang hilang: Bagaimana cara saya meng-host ubin vektor Mapbox ( .mbtiles
) sehingga saya dapat mengkonsumsinya dengan mapbox-gl.js?
Saya tahu bahwa Mapbox Studio dapat mengunggah ubin vektor ke server Mapbox dan membiarkannya menjadi host ubin. Tapi itu bukan pilihan bagi saya, saya ingin meng-host ubin vektor di server saya sendiri.
Pendekatan TileStream di bawah ini ternyata jalan buntu. Lihat jawaban saya untuk solusi yang berfungsi dengan Tilelive.
Saya mencoba TileStream yang dapat menyajikan ubin gambar dari .mbtiles
file:
Halaman web saya menggunakan mapbox-gl v0.4.0:
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.js'></script>
dan itu menciptakan mapboxgl.Map dalam skrip JavaScript:
var map = new mapboxgl.Map({
container: 'map',
center: [46.8104, 8.2452],
zoom: 9,
style: 'c.json'
});
File c.json
style mengonfigurasi sumber ubin vektor:
{
"version": 6,
"sprite": "https://www.mapbox.com/mapbox-gl-styles/sprites/bright",
"glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf",
"constants": {
"@land": "#808080",
"@earth": "#805040",
"@water": "#a0c8f0",
"@road": "#000000"
},
"sources": {
"osm_roads": {
"type": "vector",
"url": "tile.json"
}
},
"layers": [{
"id": "background",
"type": "background",
"paint": {
"background-color": "@land"
}
}, {
"id": "roads",
"type": "line",
"source": "osm_roads",
"source-layer": "roads",
"paint": {
"line-color": "@road"
}
}]
}
... dengan spesifikasi TileJSON berikut di tile.json
:
{
"tilejson": "2.1.0",
"tiles": [
"http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
],
"minzoom": 0,
"maxzoom": 12
}
... yang menunjuk ke server TileStream saya berjalan di localhost:8888
. TileStream telah dimulai dengan:
node index.js start --tiles="..\tiles"
... di mana ..\tiles
folder tersebut berisi osm_roads.mbtiles
file saya .
Dengan pengaturan ini, saya dapat membuka halaman web saya tetapi hanya melihat lapisan latar belakang. Di jejak jaringan browser saya dapat melihat bahwa ubin memang dimuat ketika saya memperbesar, tapi konsol kesalahan JavaScript browser berisi beberapa kesalahan formulir
Error: Invalid UTF-8 codepoint: 160 in mapbox-gl.js:7
Karena ubin vektor bukan .png
gambar melainkan file ProtoBuf, URL ubin http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.pbf
sebenarnya lebih masuk akal, tetapi itu tidak berhasil.
Ada ide?
sumber
///
untuk mendefinisikan file mbtiles di:tilelive.load('mbtiles://path/to/osm_roads.mbtiles', function(err, source) {
///
diperlukan untuk Linux dan OS X seperti misalnyambtiles:///usr/local/osm_roads.mbtiles
. Namun pada Windows hanya//
diperlukan dua jika Anda menentukan disk seperti mismbtiles://D/data/osm_roads.mbtiles
.Hosting ubin vektor Anda sendiri relatif mudah. MBTiles berisi file .pbf yang harus diekspos ke web. Itu dia.
Mungkin yang paling mudah adalah dengan menggunakan server open-source sederhana seperti TileServer-PHP dan meletakkan file MBTiles ke folder yang sama dengan file proyek. TileServer melakukan semua konfigurasi hosting untuk Anda (CORS, TileJSON, header gzip yang benar, dll.). Instalasi berarti hanya membongkar di server web yang diaktifkan PHP.
Jika Anda ingin memulai TileServer-PHP di laptop Anda, Anda bisa menggunakan Docker. Wadah yang siap digunakan ada di DockerHub . Di bawah Mac OS X dan Windows itu berjalan dalam beberapa menit dengan antarmuka pengguna grafis Kitematic: https://kitematic.com/ . Di Kitematic, cari "tileserver-php" dan mulai mesin container / virtual siap pakai dengan proyek di dalamnya. Kemudian klik "Volume" dan masukkan ke folder file MBTiles Anda. Anda mendapatkan hosting yang berjalan untuk ubin vektor Anda!
Ubin vektor tersebut dapat dibuka di MapBox Studio sebagai sumber, atau ditampilkan dengan MapBox GL JS WebGL viewer.
Secara teknis bahkan dimungkinkan untuk meng-host petak vektor sebagai folder biasa pada server web atau penyimpanan awan apa pun, atau bahkan GitHub, jika Anda membuka kemasan individu .pbf dari wadah MBtiles dengan utilitas seperti mbutil , atur CORS, TileJSON dan gzip dengan benar. Bellow adalah proyek GitHub yang menunjukkan pendekatan seperti itu juga.
Coba pemirsa ini:
dan lihat repo terkait:
sumber
Bukan untuk membunyikan klakson saya sendiri, tetapi https://github.com/spatialdev/PGRestAPI adalah proyek yang telah saya kerjakan pada host tersebut .mbtiles ekspor ubin vektor dari Mapbox Studio.
Masih membutuhkan banyak dokumentasi, tetapi pada dasarnya, letakkan file .mbtiles Anda ke / data / pbf_mbtiles dan restart aplikasi node. Ini akan membaca melalui folder itu dan menawarkan titik akhir untuk ubin vektor Anda.
Ini juga akan terlihat melalui / data / shapefile, dan membuat Ubin Vektor Mapbox dinamis dengan cepat berdasarkan .shp Anda. Anda juga bisa menunjuk ke instance PostGIS dan mendapatkan petak vektor dinamis.
Kami menggunakannya bersama dengan https://github.com/SpatialServer/Leaflet.MapboxVectorTile , pustaka Vektor Tile Leaflet / Mapbox yang juga telah kami kerjakan.
sumber
Terima kasih atas pertanyaannya. Saya tidak tahu bahwa mereka akhirnya merilis versi stabil ubin vektor. Selain itu, Anda mungkin harus bekerja dengan jawaban ini karena ini adalah sumber ide untuk "ide Anda"? pertanyaan. Saya belum memiliki studio yang sedang berjalan.
Saya pikir salah satu masalah yang Anda hadapi adalah Anda menggunakan file tilejson. Anda memerlukan layanan tilejson untuk menggunakan file semacam itu. Karenanya, saya percaya Anda perlu mengubah bagian sumber Anda menjadi URL sebaris. Mencoba
atau
Ketika mereka menggunakan
mapbox://
sebagai protokol, itu adalah notasi alias / singkatan untuk layanan mereka. Bagian sumber dibahas secara singkat sekitar 8:40 video.Salah satu langkah dari proses ubin vektor baru adalah mengumpulkan data vektor dengan menyesuaikan apa yang Anda inginkan dalam data. Langkah lainnya adalah membawa data vektor kembali ke MapBox Studio dan membuat data / membuat style sheet. osm_roads akan menjadi langkah pertama sementara file c.json Anda adalah style sheet. Anda mungkin memerlukan ubin server langsung ayat aliran ubin seperti yang dibahas sekitar 15:01 video. Video mengatakan bahwa Anda memerlukan data meta tambahan dalam file xml.
Keanehannya di sini adalah Anda mereferensikan .pbf dan style sheet di tempat lain tetapi url yang Anda berikan adalah ubin yang dihasilkan .png file yang dihasilkan dari data vektor.
Anda tidak mengatakan, jika Anda memiliki kunci MapBox. Untuk hosting Anda sendiri, saya yakin Anda harus menyalin gaya dan mesin terbang github ke server Anda sendiri. Perhatikan lagi bahwa ada kotak map: // protokol dalam tag mesin terbang. Kedua tag ini mungkin tidak diperlukan karena Anda memberikan garis dan poligon polos, bukan POI melalui ikon. Perlu dicoba.
Akhirnya, video mengatakan bahwa Anda dapat mengambil layer vektor yang dihasilkan kembali ke studio untuk mengubahnya. Anda mungkin ingin referensi layer vektor Anda dan menerapkan id Anda: latar belakang dan id: gaya jalan ada di studio terlebih dahulu. Video tersebut mengatakan bahwa ubin langsung adalah server di belakang layar MapBox Studio. Idenya di sini adalah untuk memastikan bahwa Anda memiliki semua langkah dua masalah dipahami dan diperbaiki sebelum Anda mencoba untuk melayani petak vektor terakhir yang secara dinamis diberikan.
sumber
https://github.com/osm2vectortiles/tileserver-gl-light jauh lebih mudah digunakan daripada solusi utama yang disebutkan - tidak perlu mengutak-atik file JSON. Anda hanya menjalankannya
tileserver-gl-light filename.mbtiles
dan kemudian melayani ubin untuk Anda. Ia bekerja dengan gaya GL Mapbox yang sudah ditentukan sebelumnya seperti bright-v9; setelah menjalankan server Anda cukup mengarahkan apa pun yang mengkonsumsi ubin
http: // localhost: 8080 / styles / bright-v9.json
sumber
Anda mungkin ingin mencoba server tilehut.js kami. Ini pada dasarnya melakukan semua yang Anda butuhkan = hosting ubin vektor dan dilengkapi dengan contoh / dokumen yang bagus ... dan dalam kombinasi dengan openshift itu adalah hal pengaturan 5 menit. Mohon dilihat:
https://github.com/bg/tilehut https://github.com/bg/tilehut/tree/master/examples/simplemap_vector https://github.com/bg/tilehut#your-own-own-hosted-tileserver- dalam 5 menit
sumber
Super nanti, tapi sekarang GeoServer menyajikan pbf (format ubin vektor)
sumber
Opsi lain yang dapat Anda pertimbangkan untuk melayani ubin;
Tegola (Ditulis dalam Go)
Tiler
Ada pengantar yang bagus untuk topik ini di sini
sumber