Question

我正在构建一个受http://chriszetter.com/blog/2014/06/15/building-a-voronoi-map-with-d3-and-leaflet/启发的Voronoi地图。我想选择关闭背景地图，因为数据的位置可能与我的所有用例无关。此外，如果可视化可以通过这种方式离线工作，那将是很棒的。切换开关后，整个背景将为白色。 Voronoi重叠将是相同的。我怎么做？这是代码（zip文件包含csv文件）：https://www.dropbox.com/s/i8vtfh8mkxazfr0/voronoi-maps-master.zip?dl=0

编辑：原始代码中有两个图层变量，因为我试图将图表拆分为两个。但是，该尝试未成功，仅使用mapLayer。原始问题可能并不清楚。

的index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="base.css" rel="stylesheet" />
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.css' rel='stylesheet' />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div id='map'>
  </div>
  <div id='loading'>
  </div>
  <!-- <div id='selected'>
    <h1>...</h1>
  </div> -->
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min.js"></script>
  <script src="https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.js"></script>
  <!-- <script src="/voronoi-map/lib/voronoi_map.js"></script> -->
  <script type="text/javascript" src="voronoi_map.js"></script>
  <script>
    map = L.mapbox.map('map', 'zetter.i73ka9hn') // <- dur ikke!
      .fitBounds([[59.355596 , -9.052734], [49.894634 , 3.515625]]);

    url = 'supermarkets.csv';
    initialSelection = d3.set(['Tesco', 'Sainsburys']);
    voronoiMap(map, url, initialSelection);
  </script>
</body>
</html>

voronoi_map.js

voronoiMap = function(map, url, initialSelections) {
  var pointTypes = d3.map(),
      points = [],
      lastSelectedPoint;

  var voronoi = d3.geom.voronoi()
      .x(function(d) { return d.x; })
      .y(function(d) { return d.y; });

  var selectPoint = function() {
    d3.selectAll('.selected').classed('selected', false);

    var cell = d3.select(this),
        point = cell.datum();

    lastSelectedPoint = point;
    cell.classed('selected', true);

    d3.select('#selected h1')
      .html('')
      .append('a')
        .text( /*point.name*/ "8 interactions from this cell")
        /* .attr('href', point.url)
        .attr('target', '_blank') */
  }

  var drawWithLoading = function(e){
    d3.select('#loading').classed('visible', true);
    if (e && e.type == 'viewreset') {
      d3.select('#overlay').remove();
    }
    setTimeout(function(){
      draw();
      d3.select('#loading').classed('visible', false);
    }, 0);
  }

  var draw = function() {
    d3.select('#overlay').remove();

    var bounds = map.getBounds(),
        topLeft = map.latLngToLayerPoint(bounds.getNorthWest()),
        bottomRight = map.latLngToLayerPoint(bounds.getSouthEast()),
        existing = d3.set(),
        drawLimit = bounds.pad(0.4);

    filteredPoints = points.filter(function(d) {
      var latlng = new L.LatLng(d.latitude, d.longitude);

      if (!drawLimit.contains(latlng)) { return false };

      var point = map.latLngToLayerPoint(latlng);

      key = point.toString();
      if (existing.has(key)) { return false };
      existing.add(key);

      d.x = point.x;
      d.y = point.y;
      return true;
    });

    voronoi(filteredPoints).forEach(function(d) { d.point.cell = d; });

    var svg = d3.select(map.getPanes().overlayPane).append("svg")
      .attr('id', 'overlay')
      .attr("class", "leaflet-zoom-hide")
      .style("width", map.getSize().x + 'px')
      .style("height", map.getSize().y + 'px')
      .style("margin-left", topLeft.x + "px")
      .style("margin-top", topLeft.y + "px");

    var g = svg.append("g")
      .attr("transform", "translate(" + (-topLeft.x) + "," + (-topLeft.y) + ")");

    var svgPoints = g.attr("class", "points")
      .selectAll("g")
        .data(filteredPoints)
      .enter().append("g")
        .attr("class", "point");

    var buildPathFromPoint = function(point) {
      return "M" + point.cell.join("L") + "Z";
    }


    svgPoints.append("path")
      .attr("class", "point-cell")
      .attr("d", buildPathFromPoint)
      //.style('fill', function(d) { return '#' + d.color } )
      .on('click', selectPoint)
      .classed("selected", function(d) { return lastSelectedPoint == d} );

    /* svgPoints.append("circle")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .style('fill', function(d) { return '#' + d.color } )
      .attr("r", 2); */
  }

/* function interactionGradient() {
    color = 

    if 
    return 
} */


  var mapLayer = {
    onAdd: function(map) {
      map.on('viewreset moveend', drawWithLoading);
      drawWithLoading();
    }
  };

  var voronoiLayer = {
    onAdd: function(map) {
      map.on('viewreset moveend', drawWithLoading);
      drawWithLoading();
    }
  };


  map.on('ready', function() {
    d3.csv(url, function(csv) {
      points = csv;
      points.forEach(function(point) {
        pointTypes.set(point.type, {type: point.type, color: point.color});
      })
      map.addLayer(mapLayer);
    })
  });
}

Answer 1

您需要单独加载tileLayer，以便创建对它的引用，然后您可以使用它来创建一个可以轻松启用/禁用图层的图层控件：

L.mapbox.accessToken = 'pk.eyJ1IjoicGF1bC12ZXJob2V2ZW4iLCJhIjoiZ1BtMWhPSSJ9.wQGnLyl1DiuIQuS0U_PtiQ';

// Create the tileLayer.
var tileLayer = L.mapbox.tileLayer('examples.map-i86nkdio');

var map = L.mapbox.map('mapbox', null, { // Do not add as parameter
    'center': [0, 0],
    'zoom': 1,
    // Add here so it still gets added to the map initially
    // You could skip this so it won't be added and you can
    // turn it on via the layercontrol
    'layers': [tileLayer] 
});

// Create layer control
var layerControl = L.control.layers(null, {
    'Tilelayer': tileLayer // Add tile layer to overlays
}).addTo(map);

以下是关于Plunker的工作示例：http://plnkr.co/edit/5re3o6qnyCwAqXNYXrkP?p=preview

L.mapbox.tileLayer参考：https://www.mapbox.com/mapbox.js/api/v2.1.5/l-mapbox-tilelayer/

L.control.layers参考：http://leafletjs.com/reference.html#control-layers

因为评论而编辑：

您已经在使用单独的图层，在地图初始化L.mapbox.map('map', 'zetter.i73ka9hn')上添加了图块层（背景），实际上调用了L.mapbox.tileLayer('zetter.i73ka9hn').addTo(map)。您需要这样做，因为您需要对图层的引用，以便您可以将其添加到L.control.layers，如上所示。您的voronoi图层将添加到地图的voronoiMap处理程序中的ready方法中：map.addLayer(mapLayer);

因此你可以看到他们已经分开了。现在，如果您还希望能够在图层控件中切换voronoi图层，则需要将其添加到图层控件中：

map.on('ready', function() {
    d3.csv(url, function(csv) {
        points = csv;
        points.forEach(function(point) {
            pointTypes.set(point.type, {
                type: point.type,
                color: point.color
            });
        });
        map.addLayer(mapLayer);
        layerControl.addOverlay(mapLayer, 'Voronoi'); // Here
    })
});

但是在你的情况下，这本身是不够的，因为你的图层没有ILayer接口规定的onRemove方法：

http://leafletjs.com/reference.html#ilayer

现在，如果我们向您的图层添加onRemove方法，就像这样：

var mapLayer = {
    onAdd: function(map) {
        map.on('viewreset moveend', drawWithLoading);
        drawWithLoading();
    },
    onRemove: function (map) {
        d3.select('#overlay').remove();
    }
};

它有效：http://plnkr.co/edit/3z3pCAo0gGuA7xqnqiqb?p=preview（请注意我已经注释了ready处理程序，因为地图在函数调用之前就已准备就绪，因此它不会触发并更改某些颜色事情更清楚。）希望这会有所帮助。

在D3中切换从Mapbox可见/不可见的背景图

1 个答案: