传单弹出窗口内的高图图表使用geojson数据和oneach特征

首先，我对javascript相当陌生，所以我仍在努力学习，请耐心等待。我正在尝试使用传单创建地图，该传单使用本地主机上的地理服务器中的 WFS 引入 JSONP 图层。我已经成功地将图层添加到地图中，并且可以使用oneach功能在单击时获取要素属性。

现在，我如何创建一个在弹出窗口或新窗口中打开的高图表基本面积图，该窗口使用单击的geoJSON中的多个特征属性。我正在努力理解弹出div 以及何时实际创建高图表。现在，当我拥有它时，弹出窗口会在弹出窗口中打开一个高图表图表，但它也位于基本地图图块的后面，因为如果我在地图上平移，在基础图块完成加载之前，我可以看到它。我还注意到，高图表图形似乎没有使用悬停等工具提示选项。我怀疑我没有正确设置或调用我的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>

捕获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事件会在您的L.Map实例上触发。在处理程序中，您可以访问单击的图层以及弹出窗口的内容div元素。这时候你需要做你的高图表的东西：

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.
});

相关内容

最新更新

热门标签：