leaflet地図上に円グラフをマーカーとして表示する

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
leaflet地図上に円グラフをマーカーとして表示する [2021/11/19 04:02] – 133.11.144.12leaflet地図上に円グラフをマーカーとして表示する [Unknown date] (現在) – 削除 - 外部編集 (Unknown date) 127.0.0.1
行 1: 行 1:
-====== Leaflet地図上に円グラフをマーカーとして表示する ====== 
  
-Leafletで描画した地図に円グラフをマーカーとして表示する。 
- 
-円グラフをマーカーとするには、''divIcon''オブジェクトを作成し、''D3.js''で作成した円グラフのHTMLを''html''オプションの引数として与える。 
- 
-これを''Icon''として、''L.marker''関数に渡せばよい。 
- 
-===== Leafletで地図を描画する ===== 
- 
-    var radius = 20; 
-     
-    //地図を描画するDOM要素を選択し、デフォルトの緯度経度、縮尺を設定。 
-    var map = L.map("map").setView([35.7, 139.7], 5); 
-     
-    //地図データの取得元とZoom範囲を設定する。 
-    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { minZoom: 2, maxZoom: 18 }).addTo(map); 
- 
-''L.map''関数で地図を描画する要素を指定し、''setView''メソッドでデフォルトの緯度経度、縮尺を選択。 
- 
-''L.tileLayer''関数でタイルサーバと最大・最小の縮尺を指定し、''addTo''メソッドで''map''オブジェクトに渡す。 
- 
- 
-===== グラフ一時描画用のDOM要素の取得 ===== 
- 
-    var tmp = d3.select("#tmp"); 
- 
-グラフ一時描画用のDOM要素を選択。コード上では円グラフがこの要素内に描画されるが、すぐに削除するので表示はされない。 
- 
-===== グラフ描画用の変数や関数の作成 ===== 
- 
-    //色の設定(scaleOrdinalはRangeで指定した色を繰り返して使用) 
-    var color = d3.scaleOrdinal() 
-        .range(["#DC3912", "#3366CC", "#109618", "#FF9900", "#990099", "#998889", "#1459AF"]); 
- 
-    //pieチャートデータセット用関数の設定 
-    var pie = d3.pie() 
-        .value(function (d) { return d.value; }) 
-        .sort(null); 
- 
-    var arc = d3.arc() 
-        .outerRadius(radius) 
-        .innerRadius(radius / 3); 
- 
-''d3.scaleOrdinal''でグラフの色のScaleを作成。''scaleOrdinal''関数では、''range''メソッドで与えた色のリストを繰り返して渡す。 
- 
-''d3.pie''関数で、pieチャート用のデータセットを作成。 
- 
-''d3.arc''で円弧を描画する。''outerRadius''で外円の弧を、''innerRadius''で内円の弧を描画する。 
  • leaflet地図上に円グラフをマーカーとして表示する.1637294578.txt.gz
  • 最終更新: 2021/11/19 04:02
  • by 133.11.144.12