Question

我想在传单地图上渲染来自.json文件到d3的点。我找到的唯一三篇有前途的文章是： http://bost.ocks.org/mike/leaflet/;

https://leanpub.com/D3-Tips-and-Tricks/read#leanpub-auto-leaflet-map-with-d3js-objects-that-scale-with-the-map

但是，我无法将其转移到我的问题上。第一个链接与polygons相关，第二个链接很复杂。第三个似乎不起作用......

这就是我得到的东西。

<html>
<head>
  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script src="d3.min.js" charset="utf-8"></script>

  <style>
    #map{ height: 100% }
  </style>
</head>
<body>

  <div id="map"></div>
  <script>

  // initialize the map
  var map = L.map('map').setView([42.35, -71.08], 13);

  // synchroize d3 and leaflet
  var svg = d3.select(map.getPanes().overlayPane).append("svg"),
  g = svg.append("g").attr("class", "leaflet-zoom-hide");

  // but how to draw the points on the map?!

  // load a tile layer
  L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
    minZoom: 0,
    maxZoom: 20,
    ext: 'png'
    }).addTo(map);

  </script>
</body>
</html>

我的问题是：如何从.json中提取我需要的信息，然后将其用作.svg来覆盖我的传单地图？

来自天然地球的Citiy数据。免费矢量和栅格地图数据@ naturalearthdata.com。

Answer 1

看看你的cities.json，他们都是积分。

因此，您必须使用此演示来渲染您的积分http://bl.ocks.org/sumbera/10463358。

由于您已经拥有正确格式的积分，因此您不需要reformat function：

function reformat(array) {
                var data = [];
                array.map(function (d, i) {

                    data.push({
                        id: i,
                        type: "Feature",
                        geometry: {
                            coordinates: [+d.longitude, +d.latitude],
                            type: "Point"
                        }


                    });
                });
                return data;
            }
            var geoData = { type: "FeatureCollection", features: reformat(incidents) };

相反，你只需要这样做：

d3.json('https://gist.githubusercontent.com/cyrilcherian/92b8f73dcbbb08fd42b4/raw/087202976663f9f3192bec8f0143cf3bc131c794/cities.json', function(error, incidents) {
      //load the json data
      var geoData = incidents;
      //put the data in the quad tree
      var qtree = d3.geom.quadtree(geoData.features.map(function(data, i) {
        return {
          x: data.geometry.coordinates[0],
          y: data.geometry.coordinates[1],
          all: data
        };
      }));

现在使用四叉树来获取需要显示的点。

如果您想知道什么是四叉树，请阅读here

工作示例here

修改

绘制点的工作示例sans四叉树优化是{{3}}

希望这有帮助！

使用d3

1 个答案: