宣传单张

Question

我有一个DC.JSc图表正在过滤我的传单地图上的图标。基本上，当我进行过滤时，我希望地图缩放到所选图标。

var onFilt = function(chart, filter) {
  updateMap(locations.top(Infinity));
};

// Updates the displayed map markers to reflect the crossfilter dimension passed in
var updateMap = function(locs) {
  // clear the existing markers from the map
  markersLayer.clearLayers();
  clusterLayer.clearLayers();

  locs.forEach(function(d, i) {

    if (d.latitude != null && d.latitude != undefined) {
      // add a Leaflet marker for the lat lng and insert the application's stated purpose in popup

      var mark = L.marker([d.latitude, d.longitude]);
      markersLayer.addLayer(mark);
      clusterLayer.addLayer(mark);

      map.getBounds();
    }
  });
};

我尝试过：

map.getBounds(); //No response

L.markersLayer.getBounds(); //SCRIPT5007: Unable to get property 'getBounds' of undefined or null reference

map.fitBounds(markersLayer.getBounds()); // Object doesn't support property or method 'getBounds'

也尝试过：

if (d.latitude != null && d.latitude != undefined) {
  d.ll = L.latLng(d.latitude, d.longitude);
  var mark = L.marker([d.latitude, d.longitude]);
  markersLayer.addLayer(mark);
  clusterLayer.addLayer(mark);
};
map.addLayer(markersLayer);
map.fitBounds(markersLayer.getBounds());
});

  

错误：对象不支持属性或方法“ getBounds”

有什么想法吗？

找到了我自己的解决方案：map.fitBounds（clusterLayer.getBounds（））;

Answer 1

您快到了，但是有一些错误：您尝试在getBounds循环内forEach，尝试从错误的对象getBounds。

请点击下面的FILTER按钮，查看并运行以下代码段，以JS代码阅读注释。

我省略了过滤部分，仅向左缩放：

// add map
var map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  id: 'mapbox.streets'
}).addTo(map);

// Assuming that locations is already filtered:
var locations = [
  {latitude: 51.5, longitude: -0.09},
  {latitude: 51.53, longitude: -0.19},
  {latitude: 51.45, longitude: 0},
  {latitude: 51.56, longitude: 0.09}
];

// Updates the displayed map markers to reflect the crossfilter dimension passed in
var updateMap = function(locs) {
  // clear the existing markers from the map
  //markersLayer.clearLayers();
  //clusterLayer.clearLayers();
  
  var minlat = 200, minlon = 200, maxlat = -200, maxlon = -200;
  
  locs.forEach(function(d, i) {

    if (d.latitude != null && d.latitude != undefined) {
      // add a Leaflet marker for the lat lng and insert the application's stated purpose in popup\
      //var mark = L.marker([d.latitude, d.longitude]);
      //markersLayer.addLayer(mark);
      //clusterLayer.addLayer(mark);
      
      // find corners
      if (minlat > d.latitude) minlat = d.latitude;
      if (minlon > d.longitude) minlon = d.longitude;
      if (maxlat < d.latitude) maxlat = d.latitude;
      if (maxlon < d.longitude) maxlon = d.longitude;
      
      // set markers
      L.marker([d.latitude, d.longitude]).addTo(map);
    }
  });
  
  c1 = L.latLng(minlat, minlon);
  c2 = L.latLng(maxlat, maxlon);

  // fit bounds
  map.fitBounds(L.latLngBounds(c1, c2));
  
  // correct zoom to fit markers
  setTimeout(function() {
    map.setZoom(map.getZoom() - 1);
  }, 500);

};

function filtr() {
  updateMap(locations);
};

#mapid {
  height: 180px;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />

<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>

<button onclick="filtr()">FILTER</button>

<div id="mapid"></div>

Answer 2

只有两个函数可以调用

map.setview（点的尺寸） 和 map.setZoom（您希望地图位于的缩放级别）