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

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

1
境界ボックスから最適なジオハッシュ精度を計算する
ElasticsearchのGeoHashグリッド集約を使用して、クラスターを(リーフレットを使用して)マップにプロットしています。より大きなエリアでは、precision作成/返されるバケットの数を制限するために低い設定を使用する必要があることを理解しています。 リクエストする適切な精度値をどのように決定すればよいですか? 境界ボックスやズームレベルに基づいて最適な精度を計算するための標準または推奨される式はありますか?ズームレベルを精度の値にマッピングするだけの方がいいですか(おそらくそれが最も簡単だと思います)。

1
リーフレット+ Proj4リーフレット+ EPSG3995 + WMS
LeafletのNorth Polar Stereographicプロジェクション(EPSG3995)でWMSレイヤーをサポートしようとしていますが、機能させることができません。 私はProj4Leafletを使用し、GeoServerによって指定された解像度で投影を作成しました(WMSレイヤーはGeoServerによって提供されます。結合された画像を参照してください)。 次のjsfiddleで:https ://jsfiddle.net/gaubert/Lyojcrzo/ 私はそれを実装しようとしましたが、リーフレットマップをズームすると、タイルが適切に配置されていないことがわかりますか? それを機能させるには何が欠けていますか?変換またはプロジェクトメソッドを実装する必要がありますか?

2
ホバーとクリックポップアップの両方を機能させる方法は?
私はこのすべてにかなり新しいです。 ホバー/マウスオーバーし、geojsonレイヤーでポップアップ作業をクリックしたい。これまでのコードは次のとおりですが、クリックポップアップをめちゃくちゃにせずにホバーを含める場所がわかりません。ホバーがテキストフィールドのコンテンツを表示し、円マーカーを強調表示する必要があります。 $.getJSON('http://soundgoods.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT * FROM soundgoods_mixtape_map_1', function(data) { var geojsonMarkerOptions = { radius: 8, fillColor: "#FFCC00", color: "#323232", weight: 2, opacity: 0.5, fillOpacity: 0.4 }; var geojson = L.geoJson(data, { pointToLayer: function (feature, latlng) { var popupOptions = {maxWidth: 500}; var popupContent = '<a target="_blank" class="popup" href="' + feature.properties.post + …
8 leaflet  popup 

2
GeoJSONパスがLeafletの別の機能と交差するかどうかを確認するにはどうすればよいですか?
ユーザーがパス(一連の接続された直線)を描画し、このパスが特定のGeoJSONレイヤーのフィーチャと交差しない可能性があるアプリケーションがあります。 これらの線に沿った点が、端点だけでなく、GeoJSONレイヤーと交差していないことを確認する必要があります。 このチェックを実行するにはどうすればよいですか?


1
Web GIS /マッピングアプリケーションのテストオートメーションのソリューション?
OpenLayers 2.xまたはLeafletをJavaScriptライブラリとして使用するWeb GIS /マッピングアプリケーションのテスト自動化のためのソリューションを見つけなければなりません。 私はSelenium WebDriver(または他の同様のツール、提案?...)を評価することに重点を置いています:どこかに例/チュートリアル/経験などがありますか?

4
Leafletレイヤーのアイコンのカスタムの順序/ Z-index
マーカーがたくさんある単一のレイヤー(ポイント)があります。各ポイントには、定期的に更新される属性があります。見た目上の理由から、緯度が低いレイヤーが上になるように、リーフレットでレイヤーを並べ替えますが、クラスタリングの領域では、属性の値が高いレイヤーが上になるように並べ替えたいと思います。各マーカー/ポイントを個別のレイヤーに分割して描画順序をそのように強制せずにこれを行う方法はありますか?

1
特定のズームレベルでのみマーカーを表示する
「これは素晴らしい道です」、「この町はかなりいい」などの線に沿って、主観的な情報をマーカーとしてオーバーレイして、leaflet.jsでサイクルツーリングマップを作成しています。情報の過負荷を避けるために、特定のズームレベルで最も目立つマーカーを表示します(たとえば、ズーム9で強調表示された素晴らしい道路、11で良い道路、13歳以上で否定的なコメントを含むすべての道路情報を表示します) ここで2つの質問があります。 この種の認識されたイディオムやデザインパターンはありますか?各マーカーのプロミネンスを手動で決定できてとても嬉しいので、クラスタリングアルゴリズムは必要ありません。州全体で数百になる可能性があるため、管理可能です。 これをリーフレットにどのように実装できますか?私の明白な考えは、ハンドラーをmap.zoomend()にアタッチして、関連するマーカーを表示または非表示にすることです。もっと良い方法はありますか?

1
Nodejs、Mapnik、PostGIS for Leafletを使用したインタラクティブタイルの生成
私はこのようなことをしたいと思っていますが、同じサーバーにすべてのデータがあります。 私は一連のチュートリアル@ sparkgeo.com/labs/big/をたどっていますが、いくつか問題があります。最終的にLeafletはチュートリアル@ sparkgeo.com/labs/bigleaflet/のように動作させたいのですが、前のチュートリアルのバージョンも動作しません。したがって、最終バージョンでは、およびを使用しR ShinyてLeaflet生成さPostgisれたを介してアクセスされたタイルからインタラクティブマップとレイヤーを生成します。node.jsmapnikmapbox このWaxチュートリアルで使用したライブラリは削除されているので、これをインストールしました。HTMLファイル内のタイルhttp://localhost:8000/{z}/{x}/{y}.pngをポイントし、自分の場所をポイントしましたwax.g.min.js。cencon.jsコードを実行しても国勢調査区は表示されません。ファイルのLeafletバージョンと同様HTMLに、レイヤーのローカルホストをポイントしましたが、レイヤーが表示されません。それらはPostGISデータベースに正常にロードされ、データベースのログイン情報を変更します。 わかりましたので、私はこれすべてに不慣れであり、明らかな何かを見逃しているのではないかと思っています。以前に述べた以外のコードは変更しませんでした。タイルを生成するために何か他に必要なことはありhttp://localhost:8000/{z}/{x}/{y}.pngますか?また、現在Waxは優先されていますが、より適切なチュートリアルへのリンクはありますmapboxか?

1
LeafletJS動画付きマーカー
leaflet.animatedmarkerGitHub のfrom openplans を使用して、線に沿って移動するマーカーを作成しました。また、ラインの上にポップアップするビデオを追加しました。これは、マーカーを動かしてもうまくいきます。 私ができることは、ビデオとマーカーを同時に開始および一時停止できるボタンを用意することです。また、ビデオとライン上のマーカーを前後に移動できるという追加の利点も必要です。私はこれが可能かどうか疑問に思っています、そして私はそれについてどうしたらいいですか?
8 leaflet  video 

1
機能が重複するリーフレットのポップアップを処理しますか?
LeafletとJavaScriptは初めてです。 現在、私は人々がオンラインでアクセスしてダウンロードできる古い地形図のための図書館所蔵の空間インデックスを作成しようとしています。機能のソースはGeoJSONファイルです。 サンプルマップ 問題は、学校の図書館に何年にもわたって同じ地図の複数のタイプがあることですが、地図をクリックすると、ポップアップが1つしか表示されません。複数のマップを循環するオプションが欲しいのですが、問題への取り組み方がわかりません。 ローカルの専門用語で、重なり合うポリゴンを循環するための特別な用語はありますか、またはこの問題に対するより強力なアプローチはありますか?
8 leaflet  popup 

3
GeoJSON / KMLに対するWFSの利点?
openlayers(2または3)またはリーフレットを使用してオンラインマップを作成する予定です。複数のレイヤーのOSMマップの上にいくつかのポイント/マーカー(〜30.000)、ポリゴン(〜500)、ラインを表示する必要があります。これらのポイントとポリゴンには、マウスオーバー、クリック、またはタッチのイベントに関する追加情報をユーザーに表示するためのメタデータ(少なくともID)が含まれている必要があります。現在、そのデータをクライアントに送信するための最良の方法を探しています。これらの機能が配置される領域全体がいくつかのセクションに分割され、ほとんどの場合、ユーザーは1つのセクションで作業します(情報の読み取り-書き込みは非常にまれなケースであり、現在実装されていません)。ただし、これらのセクションは互いに隣接して配置され、ほとんどの場合、少なくとも3つのセクションが表示されます。また、ポイントをより高いズームレベルでクラスタ化または非表示にすることもできます。 WFSについて聞いたことがありますが、GeoJSONやKMLよりも優れている点はわかりません。WFSを使用して現在のビューの境界ボックス内のフィーチャを取得することは可能ですか?MSSQLデータベースと、データベースとWebアプリケーションの間にWebサービスがあり、それが本当に利点がない場合は、GeoServerとPostgres DBをセットアップする必要はありません。また、Webサービスに通知しても問題はありません。X1、Y1とX2、Y2の間にあるレイヤーLのすべての機能を(GeoJSON、KMLなど)教えてください。WFSの利点は何ですか?方法は何ですか、あなたは行くでしょうか、この決定に関連する情報は他にありますか?

1
LeafletのGeoJSONレイヤーへのポップアップの追加
Leaflet APIを使用するのは初めてで、GeoJSONレイヤーのポップアップの作成で問題が発生しています。私は次の投稿を参照として見ましたが、それでも問題は解決していません: ネストされた配列をリーフレットのgeojsonポップアップとしてバインドする 私のGeoJsonデータは次のようになります。 { "type": "FeatureCollection", "features": [ { "geometry": { "type": "Point", "coordinates": [ -73.97364044189453, 40.66893768310547 ] }, "type": "Feature", "properties": { "lon": -73.97364044189453, "lat": 40.66893768310547, "version": "1.1", "t": 1381167616, "device": "iPhone3,3", "alt": 67, "os": "6.1.3" } }, { "geometry": { "type": "Point", "coordinates": [ -73.96121215820312, 40.66240692138672 ] …

4
GeoserverからリーフレットへのWFSデータの取得
ajax呼び出しを使用して、ジオサーバーからリーフレットのGeoJsonレイヤーにWFSデータをロードしようとしています。 コンソールで次のメッセージを表示すると、 XMLHttpRequest cannot load http://localhost:8080/geoserver/cite/ows?service=WFS&version=1.1.0&request=…rmat=text/javascript&outputFormat=json&format_options=callback:loadGeoJson. Origin http://localhost is not allowed by Access-Control-Allow-Origin. OpenLayersにwfsをロードしようとしている場合、次のスレッドのようにproxy.cgiが必要であることを知っています。XMLHttpRequestはhttp:// localhost:/ geoserver / wfsをロードできません。Origin http:// localhostはAccess-Control-Allow-Originでは許可されていません そのスクリプトはOpenLayersにのみ関連しているようです。私の質問は、これをリーフレットに使用できますか?そうでない場合は、どのようにwfsデータを取得するのですか?この問題を回避する方法があるはずですが、メインのドキュメントには何も表示されず、他の場所での検索でほとんど検索できませんでした。 チラシページのスクリプトを追加しました... var map = L.map('map').setView([50.370, -4.14], 14); var basemap = L.tileLayer('http://{s}.tile.cloudmade.com/a8ed148d84c2438ba62c2742cac051ae/33356/256/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>' }).addTo(map); var …


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