使用d3在leaflet上可视化点

Question

使用d3在leaflet上可视化点

javascriptd3.jsleaflet

3

我希望通过d3在leaflet地图上呈现来自.json文件的点。我找到的唯一三篇有前途的文章是：http://bost.ocks.org/mike/leaflet/;

http://bl.ocks.org/sumbera/10463358 and

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

然而，我无法将其应用到我的问题上。第一个链接使用多边形实现了这一点，而第二个链接过于复杂。第三个链接似乎不起作用... 这就是我得到的结果。

<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，并在我的 leaflet 地图上叠加呢？

城市数据来自：使用 Natural Earth 制作。免费矢量和栅格地图数据 @ naturalearthdata.com。

- four-eyes

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cyril Cherian · Accepted Answer

看了你的 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
        };
      }));

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

如果你想知道什么是四叉树，请阅读这里。

工作示例在这里。编辑不使用四叉树优化绘制点的工作示例在这里。

希望这能帮到你！