Plotly:基于GeoJSON文件

时间:2016-03-11 13:31:00

标签: javascript python plotly

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

我的工作基于this JSFiddle我会在Stackoverflow上的其他地方工作。我知道这些数据与荷兰无关,但这一点并不重要:我想要的只是一张看起来像this的地图(但我喜欢在Plotly中做,因为Plotly& #39;在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});
  });

1 个答案:

答案 0 :(得分:2)

在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'。以下是来自剧情的教程的链接:https://plot.ly/javascript/scatter-plots-on-maps/