Plotly：基于 GeoJSON 文件创建地图答案

【问题标题】：Plotly: Create map based on GeoJSON filePlotly：基于 GeoJSON 文件创建地图
【发布时间】：2016-03-11 13:31:00
【问题描述】：

我找到了一个GeoJSON file，其中包含荷兰的所有城市。我现在正在尝试使用 Plotly 绘制这张地图，但我似乎无法弄清楚如何做到这一点。我知道可以在特定国家/地区设置范围，但 Plotly 的默认地图似乎不包含每个国家/地区的各个城市。

我的工作基于 this JSFiddle 我会在 Stackoverflow 的其他地方工作。我知道这些数据与荷兰无关，但这并不重要：我想要的只是一张看起来有点像this 的地图（但我喜欢在 Plotly 中做，因为 Python 支持 Plotly） .

非常感谢任何帮助！

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_world_gdp_with_codes.csv', function(err, rows){
      function unpack(rows, key) {
          return rows.map(function(row) { return row[key]; });
      }

 var data = [{
              type: 'choropleth',
              locations: unpack(rows, 'CODE'),
              z: unpack(rows, 'GDP (BILLIONS)'),
              text: unpack(rows, 'COUNTRY'),
              colorscale: [[0,'rgb(5, 10, 172)'],[0.35,'rgb(40, 60, 190)'],[0.5,'rgb(70, 100, 245)'], [0.6,'rgb(90, 120, 245)'],[0.7,'rgb(106, 137, 247)'],[1,'rgb(220, 220, 220)']],
              autocolorscale: false,
              reversescale: true,
              marker: {
                line: {
                  color: 'rgb(180,180,180)',
                  width: 0.5
                }
              },
              tick0: 0,
              zmin: 0,
              dtick: 1000,
              colorbar: {
                autotic: false,
                tickprefix: '$',
                title: 'GDP<br>Billions US$'
              }
          }];

console.log(data.locations);
  var layout = {
          title: '2014 Global GDP<br>Source: <a href="https://www.cia.gov/library/publications/the-world-factbook/fields/2195.html"> CIA World Factbook</a>',
          geo:{
            showframe: false,
            showcoastlines: false,
            projection:{
              type: 'mercator'
            }
          }
      };
      Plotly.plot(myDiv, data, layout, {showLink: false});
  });

【问题讨论】：

标签： javascript python plotly

【解决方案1】：

在 plotly 中，您可以使用范围来限制显示的底图。不幸的是，开箱即用，此处仅列出了几个可用范围：https://plot.ly/python/reference/#layout-geo-scope

为了限制显示为底图的内容，有一种解决方法，使用 lonaxis 和 lataxis，如下所示：http://codepen.io/etpinard/pen/XKamdk。此问题在此处记录以供参考：https://github.com/plotly/plotly.js/issues/719。

要从 geoJSON 获取点，只需在数据变量中使用 geoJSON 中的坐标作为 lon 和 lat。此外，如果您尝试制作城市散点图，则应使用数据type: 'scattergeo' 而不是type: 'choropleth'。以下是 plotly 教程的链接：https://plot.ly/javascript/scatter-plots-on-maps/。

【讨论】：