差分

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

--- markerclustergroup内のデータを集計する [2021/11/22 12:04] – 133.11.144.12
+++ markerclustergroup内のデータを集計する [Unknown date] (現在) – 削除 - 外部編集 (Unknown date) 127.0.0.1
@@ 行 1: / 行 1: @@
-====== markerClusterGroup内のデータを集計する ======
-===== markerClusterGroupを作成 =====
-    var markers = L.markerClusterGroup({ iconCreateFunction: defineClusterIcon });
-''L.markerClusterGroup''関数で''markerClusterGroup''オブジェクトを作成する。''iconCreateFuncition''オプションを指定することでicon描画用の関数を指定することができる。
-===== マーカーの描画 =====
-[[Leaflet地図上に円グラフをマーカーとして表示する | こちら]] を参考にして、円グラフを描画する。
-    var marker = L.marker([sampleData.latitude, sampleData.longitude], { icon: myIcon });
-ここでは''myIcon''に円グラフのHTMLタグをIcon化したものを引き渡している。
-===== ポップアップの作成 =====
-    var popupContent = "<table><tr><td>date</td><td>" + sampleData.date + "</td></tr>";
-    pieInputList.forEach(fishData => {
-        popupContent = popupContent + "<tr><td>" + fishData.name + "</td><td>" + fishData.value.toFixed(2) + "</td></tr>";
-    })
-    popupContent = popupContent + "</table>"
-    var popup = L.popup().setContent(popupContent);
-    marker.bindPopup(popup);
-個々の円グラフで表示するポップアップをtableタグで作成する。''L.popup().setCOntent''でポップアップの中身が設定されたpopupオブジェクトを作成。
-===== markerClusterGroup用のIconを描画する関数の設定 =====
-    function defineClusterIcon(cluster) {
-        var children = cluster.getAllChildMarkers();
-        var iconRadius = radius + 0.05 * children.length;
-        var clusterData = { fish: {} };
-        var total = 0;
-        children.forEach(child => {
-            var sampleData = child._popup._content;
-            sampleData = sampleData.split("</tr>");
-            for (var i = 1; i < sampleData.length - 1; i++) {
-                var fishData = sampleData[i].split("</td><td>");
-                var fishName = fishData[0].replace("<tr><td>", "");
-                var fishStock = parseFloat(fishData[1].replace("</td>", ""));
-                if (fishName in clusterData.fish) {
-                    clusterData.fish[fishName] += parseFloat(fishStock);
-                } else {
-                    clusterData.fish[fishName] = parseFloat(fishStock);
-                }
-                total += parseFloat(fishStock);
-            }
-        })
-        var magnification = 100 / total;
-        Object.keys(clusterData.fish).forEach(fishName => {
-            clusterData.fish[fishName] = clusterData.fish[fishName] * magnification;
-        });
-        var pieInputList = createPieInput(clusterData);
-        var tmp = d3.select("#tmp");
-        var arc = d3.arc()
-            .outerRadius(iconRadius)
-            .innerRadius(iconRadius / 3);
-        //pieチャートSVG要素の設定
-        tmp.append("svg").attr("transform", "translate(" + (-1 * iconRadius) + "," + (-1 * iconRadius) + ")").attr("height", iconRadius * 2 + radius).attr("width", iconRadius * 2 + radius)
-            .append("g").attr("transform", "translate(" + iconRadius + "," + iconRadius + ")")
-            .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 myClusterIcon = L.divIcon({
-            html: tmp.html(),
-            className: 'marker-cluster'
-        });
-        tmp.select("svg").remove();
-        return myClusterIcon;
-    }