Question

如何在Leafletjs弹出窗口中的D3图表下添加要素属性？

我的弹出窗口和图表工作正常，但我似乎无法在图表下方添加feature.properties。

以下是我的geoJSON数据示例：

var myData = [{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Name":"Gulran","Province":"Hirat","Ethnic1":0.19,"Ethnic2":0.32,"Ethnic3":"0.10","Ethnic4":"0.00","Ethnic5":"0.10","Ethnic6":"0.00"},"geometry":{"type":"Polygon","coordinates":[[[60.941162109375,29.897805610155874],[61.92993164062499,31.034108344903512],[63.34716796874999,31.3348710339506],[64.05029296875,30.401306519203583],[64.412841796875,29.735762444449076],[64.09423828125,29.36302703778376],[62.29248046875,29.36302703778376],[60.941162109375,29.897805610155874]]]}},{"type":"Feature","properties":{"Name":"Chahar Burjak","Province":"Nimroz","Ethnic1":0.25,"Ethnic2":0.12,"Ethnic3":0.03,"Ethnic4":0.01,"Ethnic5":"0.00","Ethnic6":"0.00"},"geometry":{"type":"Polygon","coordinates":[[[63.38012695312499,31.3348710339506],[65.06103515625,31.80289258670676],[65.6982421875,31.156408414557],[66.016845703125,30.467614102257855],[65.291748046875,30.164126343161097],[64.22607421875,30.0405664305846],[63.38012695312499,31.3348710339506]]]}}]}];

这是我的弹出代码：

var popup = L.popup({minWidth: 600}).setContent(div);
        layer.bindPopup(popup + '<br>' + feature.properties.NAME);

这是我要测试的jsfiddle code。如您所见，弹出窗口正在工作，但无法在图表下显示要素属性。

感谢您的帮助......

Answer 1

我发现了多个可能的问题。

您正在打开<svg>元素，但您没有关闭它。如果你添加这样的文字，它将被吞下＆＃34;并最终在渲染的<svg>here</svg>内，但d3绘制的图表将隐藏它：

// won't show the text
var div = $('<div id="chart" style="width: 600px; height: 400px;"><svg>here is some text</div>')[0];

您可以使用自动关闭<svg/>：

来解决这个问题

var div = $('<div id="chart" style="width: 600px; height: 400px;"><svg/><br/>here is some text</div>')[0];

下一个问题是您正在尝试将L.popup对象与字符串组合在一起：

layer.bindPopup(popup + 'here is some text');

因为这个L.popup是一个对象，所以不能简单地将文本连接到它。结果如下所示："[object Object]here is some text"。

然后您正在使用feature.properties.NAME，因为您的GeoJSON属性＆＃39;密钥名为Name（注意大小写） - 改为使用：feature.properties.Name

总而言之，要解决您的问题，请将var div = ...函数中的一行onEachFeature_LMA更改为：

var div = $('<div id="chart" style="width: 600px; height: 400px;"><svg/><br/>'+feature.properties.Name+'</div>')[0];

由于您使用的是jQuery，如果您想在以后添加更多图形，其他HTML元素，您也可以像这样构建弹出窗口的HTML：

  var div = $('<div id="chart" style="width: 600px; height: 400px;"><svg/></div>')[0];
  var div2 = $('<div></div>').html(feature.properties.Name);
  $(div).append($(div2));

Leaflet和D3js：Feature.properties未在Leaflet弹出窗口中显示

1 个答案: