javascript - Plotly:基于 GeoJSON 文件创建 map

Question

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

我的工作基于 this JSFiddle我会在 Stackoverflow 的其他地方。我知道数据与荷兰无关，但目前这并不重要:我想要的只是一张看起来有点像 this 的 map 。 (但我喜欢在 Plotly 中这样做，因为 Plotly 在 Python 中受支持)。

非常感谢任何帮助!

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});
  });

Answer 1

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

要限制显示为 basemap 的内容，有一个解决方法，它使用 lonaxis 和 lataxis，如下所示:http://codepen.io/etpinard/pen/XKamdk .此问题记录在此处以供引用:https://github.com/plotly/plotly.js/issues/719 .

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