單張js中心彈出式問題（僅在幾個國家）

免責聲明：我是Stackoverflow的新手，如果我不遵循協議，請告訴我！單張js中心彈出式問題（僅在幾個國家）

在過去的幾天裏，我已經開始學習單張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); 
}

提前感謝！

來源

2017-02-26 cucumbercoolie

不幸的是，你提到的國家（你忘記英國，但也有許多其他小國家，其影響並不明顯）由幾個不同的多邊形（即多面體）組成。

L.Polygon.getCenter()使用only 1 of these polygons計算粗糙質心。例如。在美國的情況下，它是夏威夷羣島之一。

一個簡單的，但不是沒有錯誤，解決方法是先拿到多邊形（國家）界，然後讓這些邊界的中心：

centrePoint = e.target.getBounds().getCenter();

它適用於國家與幾個足夠接近的多邊形（例如加拿大，中國，澳大利亞，英國）或「主要土地」比其他地區（例如美國）大得多的多邊形。

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

但它爲各國完全關閉位置與許多地方在世界各地（如法國），或散佈由於子午線（如俄羅斯）的距離。

您可以嘗試改進多邊形質心計算，特別是考慮多面體情況。

您可能也有興趣在該職位：Get center of geojson Continent/Country/State with leaflet

來源

2017-02-26 14:21:05 ghybs

感謝響應，這就是真正拓寬了我的理解。您鏈接的帖子非常有趣。我想我可以編寫一個函數，使用你的方法來找到引起問題的國家的中心，儘管它不會很優雅。我肯定會研究鏈接到的帖子中的Mapbox解決方案。再次感謝，非常有幫助！ – cucumbercoolie

單張js中心彈出式問題（僅在幾個國家）

回答

相關問題