ブラウザーでベクターベースのマップをレンダリングするライブラリー


13

LeafletやOpenLayersのようなオープンソースのJavaScriptライブラリがあります。これらのライブラリは、Webアプリケーションやモバイルアプリケーションで使用でき、画像の代わりにベクトルベースのマップを読み込みますか?道路情報といくつかのPOIだけが必要です。

私が見つけた唯一のライブラリはポリマップでしたが、それでもベクターSVGデータ(OpenStreetMapから推奨)を提供するサーバーまたはサービスが必要になります。また、Mapsforgeと呼ばれる素敵なAndroidプロジェクトもありますが、Webアプリケーションや他のモバイルデバイスに必要です。

回答:



10

ベクトルを描画するだけなら、LeafletまたはOpenLayersで十分です。そこに新しいものはありません。

ベクトルタイルマップ(つまり、異なるズームレベルで異なる解像度/詳細レベル)の場合、 TileStacheはシンプルで優れたサーバーです。私は、Polymaps(AFAIK、唯一の汎用ワーキングjsタイルベクタービューアー)の多くの実験で使用しています。タイル化されたベクターのサポートを追加するためにOpenLayersを使用した人もいますが、知る限りでは、1年でトランクに統合されていないので、関心がないため、近い将来にはおそらくないでしょう。

TileStache(サーバー)自体は非常にうまく機能しています。それにもかかわらず、Polymapsにはいくつかのバグが見つかりましたが、更新されていないため(放棄されたプロジェクト)、本番環境で使用するように説得することはできません(自分で保守する必要があります...それを正当化することはできません)私自身はまだです。)

私にとっての解決策は、AmigoCloudで使用されるカスタムOpenGLネイティブベクターレンダラーを作成することです。実際、それがすべてのマップがサービスでレンダリングされる方法です。その目的のために、TileStacheは非常にうまく機能しています。

あなたは見てみたいTileStacheベクトルプロバイダ。それを使用する方法の例については、私が書いた非常に基本的なベクトルテストスイートを見ることができます。

残念なことに、私はLeafletがタイル化されたベクターをサポートしているとは思わない。


ありがとう!Webに簡単なtilestacheデモがありますか?
カルセル

ポリマップの人口密度は、タイル化されたベクタープロバイダーキャッシュを使用します(つまり、tilestacheサーバーを実行せず、出力がどのように見えるかのコピーのみ)。コードを見ると、ベクタータイル化されたpolymaps.org/ex/population.htmlであることが明らかになります。悲しいことに、オンラインで入手可能なtilestacheデモでは、ベクタープロバイダーを使用していません。それでも、tilestache-serverをローカルで実行し、localhostのデモURLをベクターデータソース(shapefile、postgisなど)に置き換えれば、機能します。必要な場合は、こちらのメッセージをご覧ください。
ラギヤセルBurhum

私はこの答えに特に同意しません。For just drawing vectors, Leaflet or OpenLayers will do just fine. Nothing new there.これはベクトルがオーバーレイされる場合に機能しますが、マップ全体(すべてのベースレイヤー)がベクトルとして構成されている場合はどうでしょうか。
ガイザー

@giserそれが、「ベクトルを描くだけ」と「ベクトルタイルマップ」を区別する理由です。2番目の答えは、純粋にベクトルで作成された「全体」マップを使用したという用語でした。そのようなものの例を次に示します。bl.ocks.org
Ragi Yaser Burhum

@RagiYaserBurhum:すみません、誤解しています。
ガイザー

10

更新:これを投稿して以来、MapboxはMapbox GL JSをリリースしました。これはWebGLベースのベクターベースマップレンダリングをブラウザーで実行します。

この時点では、確立されたオプションはありません。GoogleのMapsGLのみが完全なベクターの実稼働中のマップであり、ブラウザーのサポートとパフォーマンスのために非常に制限されています。

現時点でオープンソースで最も近いのはKothic.jsで、Kothicのスクリプトを使用して独自のタイルをローリングします。


+1ちょっと、これはクールです!あなたがなぜ投票されたのか分からない!
カルセル

6

あなたの質問を正しく理解すれば、OpenLayersとLeafletの両方がベクターデータをロード/表示します。

例えば

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

これにより、GeoJSONファイルがリーフレットマップにロードされ、バックグラウンドでCloudMadeを介してOSMが使用されます。

OpenLayersはおそらく、KMLなどのより多くの種類のベクトル形式をサポートしています

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

ベクトルデータをマップに提供するサーバーの後にいる場合は、MapServer、GeoServer、およびESRI ArcGIS Serverを見てください。これらはすべて、Web Feature Server(WFS)としてマップにベクトルデータを提供します。


私は、マップ自体をベクトルデータとして、つまりマップにロードする一部のフィーチャではないことを意味します。
カルセル

なぜなら、あまりにも多くの、ハングしたり、ブラウザを殺すことができるベクトル型を介してデータの多くを提供する<svg>要素、あなたはこれを覚えておく必要があります
Krystian

@Krystian SVGでマップをレンダリングする場合です。明らかに、OpenGL / WebGLでレンダリングできます(Google MapsがAndroid / iOSおよび実験的なWebGL JavaScriptマップで行うように)。
ラギヤセルバーフム

@RagiYaserBurhumええ、私はそれについて考えていませんでしたが、それでも、この特定のケースでは、APIの制限のためにwebGLを使用できません電気ショック。.–
Krystian

1
OPはArcGIS APIに言及していなかったので、私はそれを想定していませんでした(ArcGISなしでも多くのGISを実行できます)。はい、ArcGIS JSとWebGLを混在させるのは苦痛だと思います。タイルベクトルは新しいものですが、将来になる可能性は十分にあります。たぶん
Ragi Yaser Burhum

2

SVGやキャンバスではなくwebglテクノロジーに基づいたGL-Solarという別の興味深いプロジェクトを見つけました。初期の開発段階ですが、これは有望に見えます。

また、MapCSSCartagenおよびd3.jsに言及する必要があります。d3.jsは、オンラインosmエディターiDで使用されます。リーフレットとhtml5レンダリングに関するブログ投稿もあります。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.