タグ付けされた質問 「leaflet」

モバイルフレンドリーなインタラクティブマップ用のオープンソースのJavaScriptライブラリ

8
OpenLayersまたはLeafletを選択しますか?[閉まっている]
OpenLayers v / s Leafletの同僚の1人と議論していました。GeoserverとPostGISに直接接続する必要があるプロジェクトを構築する場合、OpenLayersははるかに優れたAPIであると指摘しました。 次に、Open Data Kitを見つけました。これはかなり新しく見えますが、GeoserverおよびPostGISとの接続機能を備えています。 私のプロジェクトの詳細は次のとおりです。 マップインターフェイスを使用して、フィーチャ情報を取得します ユーザーが地図上でクリックした場所に関する緯度経度を取得し、ラスタから気候データを取得するカスタマイズされたツールを作成します(サーバー上のpyスクリプトによって処理されます)。 ユーザーがExcelをアップロードできるようにします。Excelはpyスクリプトに送信され、GeoJSONが返され、マップ上にベクターフィーチャが作成されます ユーザーがベクターポリゴンを作成できるようにします。ベクターポリゴンは、交差するフィーチャをWFSレイヤーから取得します。 GeoServer上のPostGISデータストアからレイヤーを取得し、マップ上にレイヤーを表示します。 だから今、私はどちらが優れているのか、そしてリーフレット上でOpenLayersを使用することがより理にかなっているのか混乱していますか?

7
GISCloudのようなレンダリングパフォーマンスでベクターポリゴンを作成しますか?
私は、ホバーイベントで各ポリゴンを異なる色で表示できるようにすることを目的に、そのようなデータを永遠にロードすることなく、Webマップを作成し、ベクトルポリゴンをオーバーレイできる堅牢なソリューションを探していました。 私の知る限り、キャンバス、SVG、Flashのいずれかでこれを達成するための3つの特定のオプションがあります。 Flashは、最速のレンダリングと最もクリーンな表示を提供するように思えるので、Apple iphone / ipadsで動作する場合、最良のソリューションになるようです。Canvasは2番目に最適な選択肢のように見えますが、マップ上に何百ものポリゴンが表示されている場合は非常に時間がかかりますが、SVGのレンダリングにはさらに時間がかかります。 私はほとんどこの問題の解決策を見つけることに希望を失ったが、今日、私はGISCloudという会社に出会いましたhttp://www.giscloud.com(現在は無料登録してベータ版)。 この会社は、SOMEHOWが地図上に数百のベクターをほぼリアルタイムでレンダリングする驚くべき方法を見つけ出しました。私は彼らのアプローチに驚き、コミュニティへの私の質問は、リーフレット、オープンレイヤー、ワックスなどの既存のテクノロジーで使用するために彼らのアプローチをどのように複製できるかに関するものです... この素晴らしいデモを見て、自分自身を見てみましょう:http : //www.giscloud.com/map/284/africa ページ上の任意のポリゴンにカーソルを合わせ、ズームコントロールをテストして、これらのポリゴンが実際にベクトルであることを確認してください。 firebugでリクエストを見ると、マップが特定のjsonファイルをリクエストしていることに気付きました。ズームレベル/エリアによっては、複数のjsonファイルが要求されているようです。 また、giscloudがページ上のデータを読み込むと、ベクター上にホバーすると、新しいリクエストを作成せずにすぐに色が変更されることをここで言及する必要があります。 例: http://cft1.giscloud.com/t/1316509973/map284/layer1156/3/3/3.json http://cft1.giscloud.com/t/1316509973/map284/layer1156/3/5/3.json http://cft1.giscloud.com/t/1316509973/map284/layer1156/3/4/4.json http://cft1.giscloud.com/t/1316509973/map284/layer1156/3/3/4.json http://cft1.giscloud.com/t/1316509973/map284/layer1156/3/5/4.json url構造は標準のタイルサービスロジック(たとえば、ズームレベルである3番目から最後のフォルダー)に従うと仮定しています。 いずれにせよ、これらのjsonファイルの実際のデータを分析しましたが、使用しているロジックは、これらのデータ値に基づいてベクターを作成する何らかのタイプのロジックに従っているようです。 幅/高さ:各JSON要求で提供されるデータの幅と高さを定義します ピクセル:ここでは、一般化されたポイントレベルの一般的なx / yピクセル座標に何らかの関係があると想定しているピクセル値を定義しますか?私は彼らが何らかの方法でズームレベルに応じて自動的に領域を単純化する方法を持っていると推測しています。私は、ピクセル座標を使用して、緯度/経度データと比較してロードする必要のあるデータのサイズを劇的に削減していると推測しています。 スタイル:ここでは、2つのRGB css値を定義します。「F」はポリゴンファイルの色を表し、「S」はポリゴンの境界線の色を表します。 geom:ここでは、マップコンテナウィンドウに基づいてデータが定義されている場所で、読み込まれているタイル内の各ポリゴンを明確に定義していると推測しています。また興味深いのは、各エントリがオプションの属性または機能リンク値として使用されると想定している「S」値を持ち、各エントリの最後に特定のベクトルごとのIDを定義するように見える領域があることです私が推測しているレイヤーIDは、呼び出されている各jsonタイルリクエストからのデータを何らかの形で結合するために利用されます。 また、要求されたタイルにロードする必要があるデータのサイズに応じて、各タイルにロードする必要があるデータを自動的に決定および分割する方法を何らかの方法で見つけたと想定しています。 以下は、これらのリクエストの内の1つを抽出した内訳です。 {"width":256,"height":256,"tile": {"pixels": [0,6461,-1,0,5,148,0,509,-1,10715,-1,1,-1,251,-1,1,-1,1,-1,251,-2,3,-1,255,-1,249,-2,5,-2,247,-1,509,-3,251,-1,2,-2,253,-2,252,-2,254,-1,255,-1,254,-1,255,-1,1276,-2,13,-1,233,-1,2,-1,253,-1,1,-1,255,-1,247,-1,1306,-1,1533,-1,1269,-1,1276,-1,2303,-1]}, "styles": [{"f":"rgb(99,230,101)","s":"rgb(5,148,0)","lw":"0"}], "geom": [ {"s":0,"p":[4,143,5,144,3,146,1,146,2,143,4,143],"c":"layer1156_5098"}, {"s":0,"p":[-2,143,0,140,2,141,2,144,1,146,-2,144,-2,143],"c":"layer1156_5067"}, {"s":0,"p":[7,143,5,144,4,143,2,143,2,141,5,138,6,139,5,141,7,143],"c":"layer1156_5051"}, {"s":0,"p":[10,141,11,137,12,137,14,137,12,142,9,143,9,142,10,141],"c":"layer1156_5041"}, {"s":0,"p":[1,136,0,140,-2,143,-2,136,1,136],"c":"layer1156_5038"}, {"s":0,"p":[8,143,5,141,5,137,8,136,10,137,10,141,8,143],"c":"layer1156_5033"}, {"s":0,"p":[5,137,2,141,0,140,1,136,1,136,2,135,3,136,5,137],"c":"layer1156_5028"}, {"s":0,"p":[10,134,12,136,11,138,8,135,10,134],"c":"layer1156_5020"}, {"s":0,"p":[-2,133,0,136,-2,136,-2,133],"c":"layer1156_5005"}, {...} ... ] …

5
外部GeoJSONファイルをLeafletマップに読み込みますか?
geoJSON(ポリゴン)ファイルをリーフレットマップにロードしたいと思います。geoJSONがjavascriptコードに埋め込まれている例を見てきましたが、外部ファイルでどのように行われるかを示す例は見つかりません。 <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" /> <script src="usStates.geojson" type="text/javascript"></script> <style> html, body, #map { height: 100%; } body { padding: 0; margin: 0; } </style> </head> <body> <div id="map" style="height: 100%"</div> <script src="http://d3js.org/d3.v2.min.js?2.9.3"></script> <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script> <script type="text/javascript"> var map = L.map('map').setView([38.57, -94.71], 4); L.tileLayer('http://{s}.tile.cloudmade.com/9067860284bc491e92d2342cc51d47d9/998/256/{z}/{x}/{y}.png', …
54 leaflet  geojson 

13
ArcGIS Server JSONをGeoJSONに変換しますか?
Leafletを使用してWebマップを作成していますが、ArcServerからフィーチャレイヤーを取得できるようにしたいと考えています。フィーチャクラスをJSONとして正常に取得できましたが、EsriのJSONオブジェクトはGeoJSON標準に準拠していないため、表示できません。 誰もこれを処理する変換スクリプトまたはツールを知っていますか? そうでない場合は、ArcServer JSONオブジェクトをGeoJSONに変換するスクリプトを作成する予定です。


6
Leafletで大きなデータセットを視覚化する
Leafletを使用して大規模なデータセット(10,000ポイントの機能を備えたGeoJSON)を視覚化する場合、当然のことながらブラウザーがクラッシュまたはハングします。同じデータセットからの1000個のフィーチャのサブサンプルは問題なく機能します。残念ながら、他の人が試してみるためにデータセットを共有することはできません。 このような大規模なデータセットを視覚化するための優れたソリューションはありますか?(最終的な目的は、これを200万個の機能に拡張することです)Polymapsやd3.jsなどのブラウザーベースの代替が不可能であると見なされる場合に備えて、オフラインの視覚化フレームワークを検討しても構いません。 編集:言及するのを忘れましたが、ユーザーは属性によってデータセットをフィルターできる必要があります。したがって、N個の機能のうち、一致するn <= N個の機能のみを動的にレンダリングする必要がある場合があります。

3
Leaflet GeoJSONレイヤーの追加/削除
Leaflet APIを使用して、さまざまなズームレイヤーでさまざまなGeoJSONレイヤーを表示しようとしています。3つのレイヤーすべてを一度に読み込んで表示できます(実際にすべてを一度に表示したくないのですが)。さまざまなズームレベルで読み込んで表示できます。 ズームレベル1〜6で、地図に1つのGeoJSONレイヤーが表示されるようにコードを設定しています。レベル7〜10では別のレベルが表示され、レベル11+では3番目のレベルが表示されます。それらを表示することはできます。私が今仕事をしようとしているのは、表示されている場合は他の人をオフにすることです。1-6から7-10に移動すると(1-6レイヤーが正しくオフになることを意味します)、7-10から11+に移動しません(7-10レイヤーが固着することを意味します)。理由(同じコードを使用)。 GeoJSONレイヤーのajaxは次のとおりです。 function getJson(defaultStyle, map, simp, geojsonLayer){ var url = 'file' + simp + '.json'; map.removeLayer(geojsonLayer); geojsonLayer.clearLayers(); $.getJSON(url, function(data){ geojsonLayer = L.geoJson(data, { style: defaultStyle, onEachFeature: onEachFeature }); geojsonLayer.addTo(map); }); } そして、ズームに応じてajaxを呼び出すメイン関数があります。simpCounterは最初は0に設定されています。 map.on('zoomend', function(e) { if (map.getZoom() >= 7 && map.getZoom() <= 10) { if (simpCounter == 0 …

1
Leafletのデフォルトの投影法は何ですか?
そのサイトでLeafletのAPIドキュメントを読みましたが、気づきません。マップを表示するためのデフォルトの投影法は何ですか?球形および楕円形のメルカトル図法と正距円筒図法について書かれています。または、使用しているタイルサーバーに依存していますか、またはリーフレットが画面に追加する前に即座にタイルを再投影するため、依存しませんか? 実際、QGISにgeoJSONファイルを保存するために必要な投影法を理解できません。リーフレットマップに正しく表示するには、json座標はxyではなく緯度経度でなければなりません。しかし、Equirectangularで保存しようとすると、座標はxyになります。

2
マップ内のdivのリーフレットマップでのパン/ドラッグを無効にします
マップ自体に埋め込まれたdivボックスの上をクリックしてドラッグすると、パンを抑制する方法を知っていますか? たとえば、ここで、凡例の上をクリックしてドラッグすると、マップが一緒にドラッグされます。その機能を抑制したい。私はこのテクニックを知っていますが、これが唯一の方法であるかどうか知りたいです: map.dragging.disable();
25 leaflet 

5
オフラインの滑りやすいマップタイルのデータベース
現在、オフラインのHTML5マップアプリケーション(LeafletとKendoUIで構築され、カスタムの追加機能を備えています)があります。これは、アプリマニフェストを持ち、複数のプラットフォームで正常に動作します。ただし、この方法でマニフェストを使用して実際のマップタイルを保存することをためらっています(TMSスタイルのタイルキャッシュとして保存されたPNGファイル)。 問題点: 約1,000個のPNGファイルに多数のタイル(10MB-50MB)が存在する可能性があります 最初のダウンロードは非常に遅くなる可能性があります(そしてユーザーに進行状況を表示するのが難しい) アプリマニフェストが機能するか、機能しない場合は、オフラインキャッシュ全体が失敗します([whatwg.org] [1]による) オフラインユーザーは時折再接続し、タイルの更新を取得する必要があります。これらは小さなデルタですが、アプリマニフェストメカニズムはマニフェストの更新時にすべてのjs、css、およびPNGファイルをリロードします 代替案: Webアプリケーションを、滑りやすいマップタイルのストレージとは別にしてください。Webアプリケーションに適したデータベースにタイルを保存します 更新: [PouchDBは最近、バイナリBLOBのサポートを追加しました。良い初期結果を得ています。参照:https : //stackoverflow.com/questions/16721312/using-pouchdb-as-an-offline-raster-map-cache ] これはBen Nolanによって提案されていますhttp://bennolan.com/2011/06/03/offline-mapping.html Maps on a Stickでの同様の作業:http : //developmentseed.org/blog/2010/oct/02/maps-stick-version-2-released/([非推奨] [2]) MBtiles http://mapbox.com/developers/mbtiles/ TileStream https://github.com/mapbox/tilestream Lous Remi:http : //louisremi.com/2011/10/07/offline-web-applications-were-not-there-yet/ 質問: JavaScriptフレンドリなDBの次の選択について、集合的な知恵(および経験)は何を言っていますか? SqlLite このためにネイティブアプリラッパーを作成してJavaScriptと通信できるようにする必要があるようです たとえば、Windows用のネイティブプログラムにDLLを追加し、Android / IOS用のPhoneGapを追加します。 WebSQL 奪われた しかし、ホストWebサーバーから簡単に生成および配布できるのはSQL Liteでした IndexDB blobの保存は次のように動作するようです:https : //hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/ これが最初にDBにデータを入力する唯一の方法であるかどうか心配です これは基本的にSQLLiteファイルですか?一括DBアップロード用に出荷できますか? 私は解決策としてこれに傾いています。私が知らない彼らの落とし穴はありますか? 要件: …

4
リーフレットでポリラインを描画しますか?
これは私がリーフレットで使用した私のコーディングです: var pointA = new L.LatLng(28.635308, 77.22496); var pointB = new L.LatLng(28.984461, 77.70641); var pointList = [pointA, pointB]; var firstpolyline = new L.Polyline(pointList { color: 'red', weight: 3, opacity: 0.5 smoothFactor: 1 }); map.addLayer(firstpolyline); マップには結果が表示されていません。ある地点から別の地点への直線が必要です。それを視覚化するだけで、測地的に正確ではありません。ポイント(リーフレットの「サークル」)は、マップ上に完全に表示されます。
24 leaflet 

2
GeoJSON機能のsetStyle()関数-リーフレット
これについてはすでに非常に長い質問をしましたが、しばらくの間は新しい返信を受け取らず、詳細を混乱させないため、この方法をできる限りシンプルに保ちます。 間違っていなければsetStyle、名前付きの特定の機能の関数は次のようになります。 var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]]; var rect = L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map); rect.setStyle({color: "#4B1BDE"}); ...色がオレンジから青に変わります。またresetStyle()、スタイルを元に戻す関数についても知っています。 これが私のGeoJSONのスタイルです: var everything = L.geoJson(myfile, { onEachFeature: function(feature){ array_of_layers.addLayer(feature); }, style: function(feature){ switch(feature.properties.name){ case "belgium": return belgium_style; break; case "bosnia": return bosnia_style; break; case "denmark": return denmark_style; break; case "great_britain": …


1
リーフレットを使用してクリック時にマーカーアイコンを変更する
多くの(> 100)マーカーのあるマップがあります。これらをクリックすると、アイコンが強調表示されたバージョンに変わります。2つのカスタムアイコンを作成しました。1つは通常、もう1つは強調表示されています。これは単一のマーカーで動作するようになりましたが、設定する方法が見つからないため、各アイコンをクリックして変更できます。 1つのアイコンの作業コードは次のとおりです。 var testmarker = L.marker([44.0, -73.0], {icon: unselectedIcon}); testmarker.on('click', function(e) { testmarker.setIcon(selectedIcon); }); ただし、多くのマーカーがあり、forループを使用してそれらを配置します。 //points is a 2 dim array with lat/long pairs for (i = 0; i <= points.length-1; i++) { var marker = L.marker([points[i][0], points[i][1]], {icon: unselectedIcon}); } marker.on('click', function(e) { marker.setIcon(selectedIcon); }); 配列を使用して、各マーカーに一意の変数名を付けてみました: for (i …
20 leaflet  markers 


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