Javascript 使用geojson数据和oneachfeature弹出传单内的Highchart图
首先，我对javascript相当陌生，所以我仍在努力学习，请耐心等待。我正在尝试使用传单创建一个地图，该传单在本地主机上使用来自geoserver的WFS引入一个JSONP层。我已经成功地将图层添加到地图中，并且可以使用oneachfeature功能在单击后获取要素属性 现在我想知道如何创建一个highchart基本面积图，它在一个弹出窗口或一个新窗口中打开，该窗口使用单击的geoJSON中的几个功能属性。我正在努力理解弹出div和highchart实际创建的时间。现在，正如我所看到的那样，弹出窗口在弹出窗口中打开了一个highchart图形，但它也位于基础地图分幅的后面，如果我在基础分幅完成加载之前平移地图，我可以看到它。我还注意到highchart图形似乎没有使用工具提示选项，例如悬停。我怀疑我没有正确设置或调用我的div。这是我代码的相关部分Javascript 使用geojson数据和oneachfeature弹出传单内的Highchart图,javascript,jquery,highcharts,leaflet,geoserver,Javascript,Jquery,Highcharts,Leaflet,Geoserver,首先，我对javascript相当陌生，所以我仍在努力学习，请耐心等待。我正在尝试使用传单创建一个地图，该传单在本地主机上使用来自geoserver的WFS引入一个JSONP层。我已经成功地将图层添加到地图中，并且可以使用oneachfeature功能在单击后获取要素属性 现在我想知道如何创建一个highchart基本面积图，它在一个弹出窗口或一个新窗口中打开，该窗口使用单击的geoJSON中的几个功能属性。我正在努力理解弹出div和highchart实际创建的时间。现在，正如我所看到的那样，弹
<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>
//来自geoserver的WFS JSONP输出的URL
变量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从geoserver调用WFS并将JSON添加到映射
var WFSLayer=null；
var ajax=$.ajax({
url:url，
数据类型：“jsonp”，
jsonpCallback:'getJson'，
成功：功能（响应）{
WFSLayer=L.geoJson（响应{
风格：功能（特征）{
返回{
笔画：错，
fillColor:'FFFFFF'，
填充不透明度：0.1
};
},
//onEachFeature用于使用JSON数据创建弹出窗口。
onEachFeature：功能（功能，图层）{
层上（'点击'，功能（e）{
var图表打印选项={
图表：{
类型：“区域”
},
标题：{
正文：“含水层单位”
},
xAxis：{
allowDecimals:false，
标签：{
格式化程序：函数（）{
返回此.value；
}
}
},
亚克斯：{
startOnTick：错，
平均值：0.05，
标题：{
文字：“海平面高程（英尺）”，
},
标签：{
格式化程序：函数（）{
返回此.value；
}
}
},
工具提示：{
pointFormat:“{series.name}{point.y}”
},
打印选项：{
面积：{
起点：0，
阈值：657，
标记：{
启用：false，
符号：'圆'，
半径：2，
国家：{
悬停：{
已启用：true
}
}
}
}
},
系列：[{
名称：'表面'，
数据：[parseFloat（feature.properties.Top1），parseFloat（feature.properties.Top1）]
},
]
};
$（“#chartcontainer”）.highcharts（chartplotoptions）；
layer.bindPopup（$（'#chartcontainer'）.html（））；
layer.openPopup（）；
});
}
}).addTo（地图）；
}
});
L.Mappopupopennew 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
});
clickdivpopupopenL.Mapdivmap.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.
});
Catch
L.Mappopupopennew 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
});
clickdivpopupopenL.Mapdivmap.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吗？在我的回答中详细阐述了一点，如果你能给你添加一个问题的话，我可以