传单弹出里面Highchart图使用GeoJSON的数据，所有的oneachfeature

拳，我是相当新的JavaScript，所以我仍然努力学习，请多多包涵。我正尝试使用传单创建地图，该地图使用来自本地主机上geoserver的WFS引入JSONP图层。我已成功将该图层添加到地图，并且可以使用oneachfeature函数在单击时获取要素属性。传单弹出里面Highchart图使用GeoJSON的数据，所有的oneachfeature

现在我该怎么来创建一个弹出窗口，或者一个新的窗口，使用从那里点击GeoJSON的几个特征属性里面打开一个highchart基本区域图。我正在努力理解弹出div，以及何时创建了highchart。现在我把它弹出的打开在弹出窗口中highchart图，但它也是基本地图图块后面我可以看到它，如果我在我的平移地图时，底部瓦片完成加载之前。我还注意到，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>

来源

2016-03-15 Mitch

抓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元素。这是当你需要做你的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. 
});

来源

2016-03-15 17:06:34 iH8

谢谢，但也许我不明白如何适应这个我的代码。我也不需要标记。你介意如何融入一个特征和高点？ – Mitch

在我的答案阐述了多一点，如果you'de添加[MCVE]你的问题，我可以给你一个例子。 – iH8

传单弹出里面Highchart图使用GeoJSON的数据，所有的oneachfeature

回答

相关问题