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

JavaScriptは、プロトタイプベースのオブジェクト指向スクリプト言語であり、動的で、型付けが弱く、ファーストクラスの機能を備えています。

17
さまざまなJavaScriptマッピングライブラリを比較しますか?
私はWebベースのマッピングシステムに取り組んでおり、使用するライブラリを見つけようとしています。 利用可能なライブラリの比較へのリンクは次のとおりです。 Laurent Jegouのベンチマーク(2010年から)は、Webマッピングソリューション(クライアントとサーバーの両方)の世界的な展望です。 FOSSライブラリの比較ドイツカリージョを見つけることができるここに。 これまでのライブラリのリスト: グーグルマップ Microsoft Virtual Earth MapQuest リーフレット -「より小さく、より速く、より新しく、より簡単なコメントは、より少ない機能とより少ないテストとして読むこともできます。」-Geographika(以下を参照) ArcGIS API for JavaScript -ArcGIS Serverで最適に動作します(以下を参照)。GoogleマップとBingマップの拡張機能も利用でき、Google / BingマップでESRI APIを使用できます(ただし、これはほとんどのライブラリに当てはまります)。 Yahoo Map APIの ミシュラン経由 OpenLayers-豊富なドキュメントと豊富な機能に加えて、さまざまなマッププロバイダーを使用する機能。 Mapquery -MapQueryがリリースされ、いくつかの有用なドキュメントが追加されました。OpenLayers とjQueryを組み合わせるという非常に価値のある目標があります。OpenLayers + jQueryのアイデアに特に熱心な場合、またはJavaScriptマッピングライブラリに貢献したい場合は、参加して努力を貢献してください。ただし、単にエンドユーザーになりたい場合、またはこの分野に慣れていない場合は、あなたには向かないかもしれません。 Mapstraction-特に複数のベースマッププロバイダーでの作業を非常に簡単にします。しかし、それはまだ進行中の作業であり、ドキュメントのように機能が場所に欠けています。(たとえば、「FeatureCollection」タイプのGeoJSONオブジェクトは、フィーチャコレクションオブジェクトです。)あまり有益ではないようです。 1月から。 deCarta-モバイルおよびデスクトップjavascriptがあります-最初はHTML5 / CSS3に準拠し、2番目はより多くのブラウザー互換性があります。ソースコードが提供されました。商用APIの開発者にとって最も使いやすい用語。マップのブランド化が許可されており、いくつかの異なるマップスタイルがあります。NAVTEQまたはOSMデータを選択できます。また、いくつかのモバイルAPIもあります。-TheSteve0による編集-deCartaの従業員 クラウドメイド ポリマップ -さまざまなソースからのラスターデータとベクターデータを非常に簡単に合成できます。独自のカラーリング、グループ化、インタラクションを簡単に追加できます。迅速に実行され、バックグラウンドタイルの読み込みを適切に管理し、わずか30kのJavascriptです。潜在的なマイナス面の1つは、MSIE 7または8で動作しないSVGを使用することです。他のすべてのブラウザで動作し、IE9で動作するはずです。 ジャンプ -ジャンプは、独自に機能する軽量のマップライブラリです。つまり、OpenLayersまたはGoogleMaps APIのラッパーではありません。現在、開発中ですが、多くの重要な機能がうまく機能しています。 ModestMaps -MapboxおよびTileMillのメーカーが提供する、より小さく、高速で、新しいJSマッピングライブラリ。 マピエーター OpenLayersは私が現在使用しているものです。それで多くのことができ、ほとんどのデータ型をサポートします。ただし、すべてに最適というわけではありません。たとえば、リーフレットは、画像のフェードおよびその他の視覚的な調整により、多くの点でよりスムーズに見えます。jQueryに興味がある場合は、jQueryとOpenLayersの組み合わせのようなMapQueryをチェックしてみてください。

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 ...

8
OpenLayers-コンテナーのサイズ変更後のマップの再描画
私のWebアプリケーションでは、ユーザーがマップコンテナーのサイズを設定できるようにします。 コンテナをわずかに拡張したときにすべてが正常に機能しました(これは、境界線のすぐ後ろにあるタイルが既に読み込まれているためです)。ただし、コンテナが大幅に拡張された場合(次の例では、幅が300〜1000ピクセル)、空白が残ります。 マップを再描画して新しいサイズに適応させる方法は? redraw()すべてのレイヤーを呼び出すことは役に立ちませんでした。ズームインもズームアウトもしませんでした。 Opera、Chrome、Firefoxで説明した結果でこれをテストしました。IE8では、驚くべきことに、問題は発生せず、マップは自動的に適合しました。 テスト用の簡略化されたWebページ: <html> <head> <style> #mapbox { width: 300px; height: 500px; border: 1px solid black; } </style> <script src="http://openlayers.org/api/OpenLayers.js"></script> </head> <body> <div id="mapbox"></div> <input type="button" id="test" value="resize"> <script> var map = new OpenLayers.Map('mapbox'); map.addLayer(new OpenLayers.Layer.OSM()); map.setCenter( new OpenLayers.LonLat(1000000, 7000000), 5); document.getElementById('test').onclick = function() { document.getElementById('mapbox').style.width = ...


6
OpenLayers / Leafletでアニメーションクラスターマーカーを作成する方法
Openlayersが一致しないように見える滑らかな遷移のために、私はLeafletを使用したいと思います。カスタムスタイルのマーカーグループでマーカーをクラスター化する機能が特に必要です。 私が達成しようとしていることを示す最良の例は、Redfinにあります。 クラスターにカーソルを合わせると滑らかなアニメーションが提供され、マーカーをクリックすると、アニメーション効果でクラスターが分割されます。個々のポイントが特定の許容範囲と重ならないズームレベルに達すると、実際のマーカーはアニメーション化された位置に分割されます。 似たような効果をこれらに統合したいので、最善のアプローチに関するいくつかのガイダンスや、あなたが知っているかもしれない他の例に感謝します。 注: Redfinは、使用したくないFlashを使用しているようです。理想的な状況では、可能であればJavascriptでこれを実現したいと思いますが、おそらくHTML5 / canvasで行う必要があると思います。 たぶんpの使用。-Raphael.jsまたはd3.js 何か案は? ところで- この例は見つかりましたが、Googleマップに特に当てはまるようです。

4
リーフレットマウスホイールは、マップをクリックした後にのみズームします
私は働いているリーフレットのJavaScriptライブラリと私のHTMLドキュメントに(作業)の地図を添付します。ページの中央にあり、マウスホイールで下にスクロールして地図に到達すると、自動的に地図が拡大されます。 地図で止まることなくページをスクロールしたい。マップを最初にクリックした後にのみホイールズームを有効にする方法はありますか?

1
リーフレットレイヤーコントロールで凡例を追加/削除する方法は?
2つのオーバーレイhttp://02d0c8c.netsolhost.com/dev/lcb_census_layers3.htmlがあり、レイヤーコントロールでオンとオフを切り替えることができます。各レイヤーの凡例がレイヤーとともにオン/オフになるようにします。 私はJavaScriptが初めてで、リーフレットが初めてです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Lake Champlain Basin Census Data</title> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" /> <!--[if lte IE 8]> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.ie.css" /> <![endif]--> <style> #map { width: 750px; height: 580px; } .info { padding: 6px 8px; font: ...

1
Javascriptマップのラベル付けエンジンはありますか?
ラベルが互いに重ならないようにマップ上のポイントのラベルを生成し、ラベルをポイントに接続するオプションの引出線を使用できる関数を含むJavaScriptライブラリを知っていますか? 私はEsriのjavascript APIを使用していますが、適応できる一般的な競合検出/解決アルゴリズムを見つけることに興味があります。

6
埋め込み可能なWebベースのマップは何ですか?
この投稿はコミュニティWikiです。この投稿を改善するには、既存の回答を編集してください。現在、新しい回答は受け付けていません。 私がよく知っているもののいくつか(順不同): Googleマップ(http://code.google.com/apis/maps/index.html) Bing Maps(http://www.microsoft.com/maps/developers/) Yahoo Maps(http://developer.yahoo.com/maps/) MapQuest(http://developer.mapquest.com/) OpenLayers(http://openlayers.org/) WorldWind Java(http://worldwind.arc.nasa.gov/java/) OpenMap(http://www.openmap.org/) 私が行方不明になっている他のものはありますか?

4
GoogleのStreetViewエンジンに代わるオープンソースの選択肢をお探しですか?[閉まっている]
閉じた。この質問はより集中する必要があります。現在、回答を受け付けていません。 4か月前に閉鎖されました。 この質問の答えはコミュニティの努力です。この投稿を改善するには、既存の回答を編集してください。現在、新しい回答やインタラクションを受け入れていません。 LeafletまたはOpenLayersのいずれかを使用して、オープンソースのjavascriptアプリを作成したいと考えています。 これらのいずれか、または他のオープンAPIにパノラマビュー(GoogleのStreetViewと同様)を実装する方法はありますか? 私のパノラマビューは個人の写真からカスタム作成されるため、既存のサービスからパノラマ画像を取得する必要はありません。 Google StreetViewをGoogle以外のアプリに組み込むことは可能ですが、Google APIを使用せずに同様の機能を提供できるものはありますか?

2
TileMillタイルを間違った順序でレンダリングするリーフレット
私は困惑しており、かなりの数の検索が役に立たなかった。 最終的には3つのラスターレイヤーと3つのマーカーレイヤー(ラスターとその関連データを切り替えるコントロール、データのポップアップ/ツールチップを含む)を含むマップの最初のステップにいますが、できません。 Tilemillタイルを取得して適切にレンダリングします。(ラスターをQGISで作成し、GDALを使用してそれらを色付けして再投影し、TileMillに配置しました。) 要するに、 それはChromeにあります。これはSafariです。 そして、これは私にはまったく無害に見えるコードです(この時点でタイルを除くすべてをコメントアウトしたので、これですべてが含まれました)。 <html> <head> <title> - Leaflet demo</title> <script type='text/javascript' src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <style type='text/css'> html, body{ width:100%; height: 100%, margin:0; padding:0; } #map{ width:700px; height:600px } img {margin:0px;padding:0px}; </style> <script type='text/javascript'>//<![CDATA[ window.onload=function(){ //one base layer on map var map = new L.Map( "map" ).setView([38.173,-94.384],5); L.tileLayer('http://a.tiles.mapbox.com/v3/mtgmediagroup.beef2013/{z}/{x}/{y}.png', { attribution: ...

2
より多くのクライアント側機能をサポートするOpenLayersの代替案[終了]
閉じた。この質問はより集中する必要があります。現在、回答を受け付けていません。 この質問を改善したいですか?この投稿を編集するだけで1つの問題に焦点を当てるように質問を更新します。 2年前に閉店。 ポイント機能にクライアント側のレンダリングを理想的に使用し、プラグインが不要なシステムのさまざまなアーキテクチャを検討しています。私はこの質問に答えて開発したこのアプリケーションを使用して、OpenLayersと500で著しく遅れており、1,000を超える苦労を始めています。ランダムに生成された機能にはイベントハンドラーはないようで、すべて同じシンボル体系を使用しています。 私は、最大1,000個の機能、最大10個の異なるシンボル、すべてクリックハンドラーとマウスオーバーハンドラー、および性能の低いプラットフォームを表示する予定です。 特にこのGIS Cloudの例を見て、クライアント側のパフォーマンスが向上することを期待していました-動作が異なることはわかっています(HTML5キャンバスとSVG)が、パフォーマンスの違いは非常に顕著です。 私の主要な質問(あなたがとても親切なら)は: ランダムポイント生成アプリケーションは、作成/使用した他のOpenLayersアプリケーションのパフォーマンスを代表していますか? WMSサービス(これを使用する必要があります)をサポートし、Flash / Silverlight /その他のプラグインを使用せずにクライアント側の機能で高速化する、実績のある無料の代替WebマッピングAPIはありますか? 私が調査すべきことに関する他の提案はありますか? 主にサーバー側のレンダリングに依存することはオプションですが、ユーザー数の拡大とUIの応答性に関する懸念から、私もクライアントもこれを回避したいと考えています。

5
OpenLayers 3のZ-index 3:OL3でのレイヤーの順序付け
古いバージョンのようにOpenLayers3のレイヤーのZ-indexを変更する方法はありますか? map.setLayerIndex(markers, 99); //set the marker layer to an arbitrarily high layer index マップを使用して、レイヤーの順序を変更する必要があります。したがって、このようなz-indexを定義するような可能性は役に立たない var geoLayer = new ol.layer.Vector({ source : new ol.source.GeoJSON({ projection : 'EPSG:900913', url : './myGeoJson.json' }), style : function(feature, resolution) { var text = resolution < 5000 ? feature.get('name') : ''; if (!styleCache[text]) { styleCache[text] = ...

2
OpenLayers 2.12およびhttp基本認証の問題
OpenLayers 2.12を使用して、HTTP基本認証が有効になっているサーバーからWMSレイヤーを表示しようとしています。 JavaScriptコードのURLパラメーターにユーザー名とパスワードを入力して、認証を処理しようとしました。レイヤー作成の例: myLayer = new OpenLayers.Layer.WMS('background', 'https://username:password@ws.nls.fi/rasteriaineistot/image?', { layers: 'background', bbox: '-380188,6249943,1347312,8226943' }, { displayInLayerSwitcher: true, isBaseLayer: false, projection: 'EPSG:3067', visibility: true }); もちろん、資格情報はJavaScriptコードに保存され、すべてのブラウザーで機能するわけではないため、これは安全ではありません。Internet Explorer 8では、OpenLayers.jsを指すセキュリティエラーが発生し、マップの表示は一切拒否されます。Firefox 13は、キャンセルできる認証ダイアログをポップアップ表示します(その後、マップが正しく表示されます)。Chrome 23では、認証は問題なく動作するようです。 HTTPベーシック認証をURLでエンコードし、例のようにOpenLayersに渡すことで、クロスブラウザー方式でHTTP基本認証を処理できないことを確認できますか? HTTP基本認証を処理してユーザーに透過的に機能する(認証ポップアップが表示されない)別の方法を提案できますか?この問題を回避するには、おそらく何らかの種類のプロキシサーバーを使用してください。

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