Question

免责声明：我是Stackoverflow的新手，所以如果我不遵守协议，请告诉我！

在过去的几天里，我开始学习Leaflet JS，它非常酷。我按照教程编写了一个交互式地图，并且不差。但是，我在选择少数几个国家/地区的弹出窗口问题上存在问题。

在highlightFeature功能中，我使用centrePoint = e.target.getCenter();存储了中心点。这似乎适用于除俄罗斯，中国，澳大利亚，加拿大和美国以外的所有国家/地区。如果有人能指出我正确的方向，并阐明为什么会发生这种情况，我将非常感激。

您可以在http://codepen.io/CucumberCoolie/pen/yMyrWq?editors=0010

找到该项目

// highlight interaction on mouseover
function highlightFeature(e) {
var layer = e.target,
    popup = L.popup(),
    name = layer.feature.properties.name,
    centrePoint = e.target.getCenter();

layer.setStyle({
    weight: 1,
    color: '#666',
    fillColor: '#fff7bc',
    dashArray: '',
    fillOpacity: 0.7
});

if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
    layer.bringToFront();
}

countryName.textContent = name;

facts.update(layer.feature.properties);

  // Add popup on mouseover
popup.setLatLng(centrePoint)
    .setContent(name)
    .openOn(map);
}

提前致谢！

Answer 1

不幸的是，你提到的国家（你忘了英国，但也有许多其他小国，这种影响并不明显）是由几个不同的多边形（即多边形）组成的。

this.initInfo.province()使用only 1 of these polygons计算粗略的质心。例如。就美国而言，它是夏威夷群岛之一。

一个简单但不是没有错误的解决方法是首先获取多边形（国家/地区）边界，然后获取这些边界的中心：

L.Polygon.getCenter()

适用于有多个足够接近的多边形的国家（例如加拿大，中国，澳大利亚，英国），或者“主要土地”比其他部分（例如美国）大得多的国家。

更新了笔：http://codepen.io/anon/pen/dvPxqy?editors=0010

但它为全世界许多地方（例如法国）的国家提供了一个完全偏离的立场，或者由于反犹太人（例如俄罗斯）而分散的国家。

您可以尝试优化多边形质心计算，特别是考虑到多面体情况。

您可能也对该帖子感兴趣：Get center of geojson Continent/Country/State with leaflet

传单js中心弹出问题（仅限少数几个国家）

1 个答案: