使用geojson数据和oneachfeature的传单弹出窗口内的Highchart图答案

【问题标题】：Highchart graph inside leaflet popup using geojson data and oneachfeature使用geojson数据和oneachfeature的传单弹出窗口内的Highchart图
【发布时间】：2016-03-15 16:17:49
【问题描述】：

首先，我对 javascript 还很陌生，所以我还在努力学习，请多多包涵。我正在尝试使用传单创建一个地图，该传单使用来自本地主机上的地理服务器的 WFS 引入 JSONP 层。我已成功将图层添加到地图中，并且可以使用 oneachfeature 函数在单击时获取要素属性。

现在我要创建一个在弹出窗口或新窗口中打开的 highchart 基本区域图，它使用来自单击的 geoJSON 中的多个特征属性。我正在努力理解弹出 div 以及实际创建高图的时间。现在，当我拥有它时，弹出窗口会在弹出窗口中打开一个高图，但它也在基础地图图块的后面，如果我在基础图块完成加载之前平移我的地图，我可以看到它。我还注意到，highchart 图表似乎没有使用工具提示选项，例如悬停。我怀疑我没有正确设置或调用我的 div。这是我的代码的相关部分。

<body>
<div id="map">  
<div id="chartcontainer" class="highchart">
</div>      
<script>


    //URL for the WFS JSONP output from geoserver
    var URL = "http://localhost:8080/geoserver/Capstone/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=Capstone:TrinityJSON&outputFormat=text/javascript&format_options=callback:getJson";

    //ajax to call the WFS from geoserver and add JSON to map
    var WFSLayer = null;
    var ajax = $.ajax({
        url : URL,
        dataType : 'jsonp',
        jsonpCallback : 'getJson',
        success : function (response) {
            WFSLayer = L.geoJson(response, {
                style: function (feature) {
                    return {
                        stroke: false,
                        fillColor: 'FFFFFF',
                        fillOpacity: 0.1
                    };
                },
                //onEachFeature used to create popup using the JSON data.  
                onEachFeature: function (feature, layer) {
                    layer.on('click', function(e){

                    var chartplotoptions ={
                        chart: {
                            type: 'area'
                        },
                        title: {
                            text: 'Aquifer Units'
                        },

                        xAxis: {
                            allowDecimals: false,
                            labels: {
                                formatter: function () {
                                    return this.value; 
                                }
                            }
                        },
                        yAxis: {
                                startOnTick: false,
                                minPadding: 0.05,
                            title: {
                                text: 'Elevation from Sea Level (ft)',

                            },
                            labels: {
                                formatter: function () {
                                    return this.value ;
                                }
                            }
                        },
                        tooltip: {
                            pointFormat: '{series.name}{point.y}'
                        },
                        plotOptions: {

                                area: {
                                pointStart: 0,
                                threshold: 657,
                                marker: {
                                    enabled: false,
                                    symbol: 'circle',
                                    radius: 2,
                                    states: {
                                        hover: {
                                            enabled: true
                                        }
                                    }
                                }
                            }
                        },
                        series: [{
                            name: 'Surface',
                            data: [parseFloat(feature.properties.Top1),parseFloat(feature.properties.Top1)]
                        }, 

                        ]
                    };


                    $('#chartcontainer').highcharts(chartplotoptions);
                    layer.bindPopup($('#chartcontainer').html());
                    layer.openPopup();  
                    });
                }
            }).addTo(map);
        }
    });

</script>
</body>

【问题讨论】：

标签： javascript jquery highcharts leaflet geoserver

【解决方案1】：

捕捉L.Map 的popupopen 事件，它在弹出窗口打开时触发。那是它的内容被附加到 DOM 的时候，所以你需要初始化你的图表：

new L.Marker([0, 0]).bindPopup('<div></div>').addTo(map);

map.on('popupopen', function (e) {
    console.log(e.popup._source); // Marker instance
    console.log(e.popup._contentNode); // Popup content element
});

因此，在您的情况下，您需要在 onEachFeature 方法中做的就是初始化弹出窗口并将其附加到图层：

new L.GeoJSON(url, {
    onEachFeature: function (feature, layer) {
        layer.bindPopup('<div></div>');
    }
}).addTo(map);

现在，当单击某个功能时，弹出窗口会打开（这是默认行为，您不必使用 click 事件）div 会附加到 DOM，popupopen 事件会在您的 @ 上触发987654330@ 实例。在处理程序中，您可以访问被单击的图层和弹出窗口的内容div 元素。那是你需要做你的highchart东西的时候：

map.on('popupopen', function (e) {
    console.log(e.popup._source); // Layer instance
    console.log(e.popup._source.feature); // Layer's feature 
    console.log(e.popup._contentNode); // Popup content element

    // Do highchart stuff with your element and feature data.
});

【讨论】：

谢谢您，但也许我不明白如何将其与我的代码相匹配。我也不需要记号笔。您介意解释一下如何与 oneachfeature 和 highcharts 结合吗？
在我的回答中详细说明了一点，如果您在问题中添加minimal reproducible example，我可以给您举个例子。