Question

所有的拳头，我对javascript很新，所以我还在努力学习，请耐心等待。我正在尝试使用传单创建一个地图，该传单使用我的localhost上的geoserver中的WFS引入JSONP层。我已成功将图层添加到地图中，并且可以使用oneachfeature函数在单击时获取要素属性。

现在我要创建一个在弹出窗口或新窗口中打开的高图基本区域图，它使用点击的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>

Answer 1

抓住L.Map的{{1}}事件，它会在弹出窗口打开时触发。那就是它的内容被附加到DOM，所以当你需要初始化你的图表时：

popupopen

因此，在您的情况下，您需要在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附加到DOM和{{1} } div实例上会触发事件。在处理程序中，您可以访问被单击的图层和弹出窗口的内容popupopen元素。那就是你需要做高保真的事情：

L.Map

使用geojson数据和oneachfeature

1 个答案: