Perpustakaan untuk membuat peta berbasis vektor di browser

13

Apakah ada perpustakaan JavaScript sumber terbuka seperti Leaflet atau OpenLayers yang dapat digunakan dalam aplikasi web atau seluler dan memuat peta berbasis vektor, bukan gambar? Saya hanya memerlukan informasi jalan dan beberapa POI.

Satu-satunya perpustakaan yang saya temukan adalah polymaps - tetapi saya masih membutuhkan server atau layanan yang menyajikan data vektor SVG (lebih disukai dari OpenStreetMap). Juga ada proyek Android yang bagus bernama Mapsforge tetapi saya akan membutuhkannya untuk aplikasi web atau perangkat seluler lainnya.

openstreetmap web-mapping vector web-service vector-tiles Karussell
sumber

Jawaban:

10

Untuk hanya menggambar vektor, Leaflet atau OpenLayers akan baik-baik saja. Tidak ada yang baru di sana.

Untuk peta ubin vektor (yaitu resolusi / level detail berbeda pada level zoom berbeda), TileStache adalah server yang sederhana dan bagus. Saya telah menggunakan banyak percobaan dengan Polymaps (AFAIK, satu-satunya tujuan umum yang berfungsi sebagai penampil vektor ubin). Beberapa orang telah menggunakan OpenLayers untuk menambahkan dukungan vektor ubin , tetapi AFAIK, belum terintegrasi ke trunk dalam setahun, jadi mungkin tidak akan dalam waktu dekat karena kurangnya minat.

TileStache (server) itu sendiri bekerja dengan sangat baik. Namun demikian, saya telah menemukan beberapa bug dengan Polymaps dan karena tidak diperbarui lagi (proyek terbengkalai), saya tidak dapat meyakinkan diri saya untuk menggunakannya dalam produksi (saya harus memeliharanya sendiri ... Saya tidak dapat membenarkannya untuk sendiri dulu.)

Solusi saya untuk saya adalah menulis renderer vektor asli OpenGL kustom yang digunakan di AmigoCloud . Bahkan, itulah bagaimana semua peta ditampilkan di layanan kami. Untuk itu, TileStache telah memberikan hasil yang cukup baik.

Anda ingin melihat Penyedia Vector TileStache . Untuk contoh tentang cara menggunakannya, Anda dapat melihat suite tes vektor yang sangat dasar yang saya tulis .

Sayangnya, saya tidak berpikir Leaflet memiliki dukungan untuk vektor ubin.

Ragi Yaser Burhum
sumber
Terima kasih! Apakah ada demo tilestache sederhana di web?
Karussell
Kepadatan populasi polymaps menggunakan cache penyedia vektor ubin (yaitu tidak menjalankan server tilestache, tetapi hanya salinan seperti apa bentuk ouput nantinya). Melihat kode harus membuatnya jelas bahwa itu adalah ubin vektor polymaps.org/ex/population.html . Sayangnya, demo tilestache yang tersedia online tidak menggunakan penyedia vektor. Namun demikian, jika Anda menjalankan tilestache-server secara lokal dan mengganti url demo untuk localhost Anda dengan sumber data vektor (shapefile, postgis, dll) yang dikonfigurasi, itu akan berfungsi. Msg di sini untuk bantuan jika perlu.
Ragi Yaser Burhum
Saya tidak setuju dengan jawaban ini, terutama ini. For just drawing vectors, Leaflet or OpenLayers will do just fine. Nothing new there.Ini akan berfungsi jika vektor harus dioverlay, tetapi bagaimana jika seluruh peta (semua lapisan dasar) disusun sebagai vektor?
giser
@ Giser Itulah sebabnya saya membuat perbedaan antara "hanya menggambar vektor" dan "peta vektor ubin". Jawaban kedua adalah istilah yang saya gunakan peta "seluruh" yang terbuat dari vektor murni. Ini adalah contoh dari hal seperti itu: bl.ocks.org/mbostock/5593150
Ragi Yaser Burhum
@RagiYaserBurhum: Maaf, saya salah paham.
giser
10

Pembaruan: sejak memposting ini, Mapbox merilis Mapbox GL JS , yang melakukan rendering basemap vektor berbasis WebGL di browser.

Pada titik ini, tidak ada opsi yang ditetapkan. Satu-satunya peta dalam-produksi sepenuhnya vektor di luar sana adalah Google MapsGL, dan itu sangat terbatas karena dukungan browser & kinerja.

Yang terdekat dengan sumber terbuka saat ini adalah Kothic.js dan gulirkan ubin Anda sendiri dengan skrip Kothic.

tmcw
sumber
+1 hei, ini keren! jangan mengerti mengapa Anda downvoted!
Karussell
6

Jika saya memahami pertanyaan Anda dengan benar maka OpenLayers dan Leaflet akan memuat / menampilkan data vektor.

Sebagai contoh

http://leafletjs.com/examples/geojson/

ini memuat file GeoJSON ke peta leaflet yang menggunakan OSM via CloudMade di latar belakang.

OpenLayers mungkin mendukung lebih banyak jenis format vektor, seperti KML

http://dev.openlayers.org/examples/dynamic-text-layer.html

Jika Anda bermaksud mencari server untuk menyajikan data vektor ke peta maka lihatlah MapServer, GeoServer, dan ESRI ArcGIS Server yang semuanya akan server data vektor ke peta Anda sebagai Web Feature Server (WFS).

tjmgis
sumber
Saya lebih berarti peta itu sendiri sebagai data vektor bukan beberapa fitur yang saya muat ke peta.
Karussell
melayani banyak data melalui tipe vektor dapat menggantung atau bahkan mematikan browser, karena terlalu banyak <svg>elemen, Anda harus mengingatnya
Krystian
@Krystian Yaitu jika Anda merender peta dengan SVG. Jelas Anda dapat merendernya dengan OpenGL / WebGL (seperti yang dilakukan Google Maps di Android / iOS dan di peta javascript WebGL eksperimental).
Ragi Yaser Burhum
@RagiYaserBurhum ya, saya tidak memikirkan hal itu, tapi tetap saja, dalam kasus khusus ini Anda tidak dapat menggunakan webGL, karena keterbatasan dalam API dll.
Krystian
1
OP tidak menyebutkan API ArcGIS jadi saya tidak berasumsi bahwa (banyak GIS dapat dilakukan tanpa ArcGIS). Ya, saya setuju bahwa mencampur ArcGIS JS dengan WebGL akan menyebalkan. Vektor ubin baru - tetapi mereka memiliki peluang bagus untuk menjadi masa depan. Mungkin
Ragi Yaser Burhum
2

Saya menemukan proyek lain yang menarik yang disebut GL-Solar yang didasarkan pada teknologi webgl daripada SVG atau kanvas. Meskipun dalam pengembangan awal ini terlihat menjanjikan.

Juga MapCSS , Cartagen dan d3.js harus disebutkan. d3.js digunakan dalam editor osm online iD . Ada juga posting blog tentang leaflet dan rendering HTML5.

Karussell
sumber