Plotly:基于 GeoJSON 文件创建地图 [英] Plotly: Create map based on GeoJSON file

问题描述

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

I've found a GeoJSON file containing all cities in The Netherlands. I'm now trying to plot this map using Plotly, but I can't seem to figure out how to do this. I know it's possible to set the scope on a specific country, but Plotly's default map doesn't seem to contain the individual cities for each country.

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

I'm working based on this JSFiddle I would elsewhere on Stackoverflow. I know the data is not relevant for The Netherlands, but that doesn't matter at this moment: all I want is a map that looks somewhat like this (but I like to do it in Plotly, since Plotly's supported in 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});
  });

推荐答案

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

In plotly, you can use scope to limit the base map that is shown. Unfortunately, out of the box, only a few scopes are available listed here: https://plot.ly/python/reference/#layout-geo-scope

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

To limit what is shown as the base map, there is a workaround which employs using lonaxis and lataxis as shown here: http://codepen.io/etpinard/pen/XKamdk. This issue is documented here for reference: https://github.com/plotly/plotly.js/issues/719.

要从 geoJSON 到点，只需使用 geoJSON 中的坐标作为数据变量中的 lon 和 lat.此外，如果您正在尝试制作城市的散点图，您应该使用数据 type: 'scattergeo' 而不是 type: 'choropleth'.以下是 plotly 教程的链接:https://plot.ly/javascript/地图上的散点图/.

To get from geoJSON to points, simple use the coordinates in geoJSON as lon and lat in your data variable. Also, if you are trying to do a scatter map of cities, you should use data type: 'scattergeo' rather than type: 'choropleth'. Here is a link to a tutorial from plotly: https://plot.ly/javascript/scatter-plots-on-maps/.

这篇关于Plotly:基于 GeoJSON 文件创建地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！