差分

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

--- leaflet地図上に円グラフをマーカーとして表示する [2021/11/19 04:18] – 133.11.144.12
+++ leaflet地図上に円グラフをマーカーとして表示する [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''で内円の弧を描画する。
-===== MarkerClusterGroupオブジェクトを作成 =====
-''L.markerClusterGroup()''関数でマーカーをクラスタリングするためのMarkerClusterGroupを作成
-    var markers = L.markerClusterGroup();
-===== 各インプットデータでグラフの描画を行い、markerへの変換を行う =====
-    sampleDataSet.forEach(sampleData => {
-        var pieInputList = createPieInput(sampleData);
-        //pieチャートSVG要素の設定
-        tmp.append("svg").attr("transform", "translate(" + -20 + "," + -20 + ")")
-            .append("g").attr("transform", "translate(" + 20 + "," + 20 + ")")
-                .selectAll(".pie")
-                    .data(pie(pieInputList))
-                    .enter()
-                    .append("g")
-                    .attr("class", "pie")
-                        .append("path")
-                            .attr("d", arc)
-                            .attr("fill", function (d) { return color(d.index) })
-                            .attr("opacity", 0.75) //透過を指定するプロパティ
-                            .attr("stroke", "white"); //アウトラインの色を指定するプロパティ
-        var myIcon = L.divIcon({ html: tmp.html() });
-        tmp.select("svg").remove();
-        var marker = L.marker([sampleData.latitude, sampleData.longitude], { icon: myIcon });
-        markers.addLayer(marker);
-    });
-''tmp''の''div''タグの中に円グラフを描画する。(''g''タグを''tranform''した分だけ、''svg''タグを逆方向へ''transform''させて移動させるとよい)
-''divIcon''関数でHTMLタグを子要素に持つマーカーアイコンを作成する。与えるHTMLは''html''メソッドで''select''したDOM要素から取得する。
-''remove''メソッドで''tmp''の''div''タグの中身を削除する。
-''L.marker''関数で作成したアイコンをプロットする。
-''markerClusterGroup''オブジェクトにマーカーを追加して、クラスターに追加する。
-===== MarkerClusterGroupを地図のレイヤーに追加する =====
-    map.addLayer(markers);