傳單Google Map和d3 Voronoi圖覆蓋

Question

我正在關注在傳單上創建Voronoi覆蓋圖的Chris Zetter的tutorial，但我用Google Maps圖塊（使用Google Mutant Leaflet插件）替換了Mapbox圖塊並使用了我自己的數據。

voronoi覆蓋圖工作，但在地圖移動或視圖重置（移動結束和viewreset事件）時不會更新。

看來「viewreset」事件沒有被觸發，而「moveend」事件不會觸發「drawWithLoading」函數。這是對這一功能的指示線 Uncaught TypeError: Cannot read property 'call' of undefined(…) ：

，來了是錯誤

map.on('load', function() { 

    d3.csv(url, function(csv) { 
    points = csv; 
    points.forEach(function(point) { 
     pointTypes.set(point.type, {type: point.type, color: point.color}); 
    }) 
    drawPointTypeSelection(); 
    map.addLayer(mapLayer); //ERROR on this line 
    }) 
}); 

這裏是mapLayer功能是指的：

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

而且這裏是drawWithLoading函數：

var drawWithLoading = function(e){ 

    console.log('drawWithLoading e', e); //TODO: delete later 
    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); 
    } 

我很新的JavaScript，並試圖找出過去幾天。

有誰知道爲什麼會出現mapLayer函數錯誤，爲什麼地圖不會在「moveend」和「viewreset」事件上重繪？

編輯，包括整個代碼：

// Selects check boxes in selector menu // 
showHide = function(selector) { 
    d3.select(selector).select('.hide').on('click', function(){ 
    d3.select(selector) 
     .classed('visible', false) 
     .classed('hidden', true); 
    }); 

    d3.select(selector).select('.show').on('click', function(){ 
    d3.select(selector) 
     .classed('visible', true) 
     .classed('hidden', false); 
    }); 
} 

// Draws Voronoi Map // 
voronoiMap = function(map, url, initialSelections) { 

    console.log('We got in here!'); 
    console.log('map', map); 
    console.log('url', url); 
    console.log('initialSelections', initialSelections); 
    window.myMap = map; 

    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) 
     .attr('href', point.url) 
     .attr('target', '_blank') 
    } 

    var drawPointTypeSelection = function() { 
    showHide('#selections') 
    labels = d3.select('#toggles').selectAll('input') 
     .data(pointTypes.values()) 
     .enter().append("label"); 

    labels.append("input") 
     .attr('type', 'checkbox') 
     .property('checked', function(d) { 
     return initialSelections === undefined || initialSelections.has(d.type) 
     }) 
     .attr("value", function(d) { return d.type; }) 
     .on("change", drawWithLoading); 

    labels.append("span") 
     .attr('class', 'key') 
     .style('background-color', function(d) { return '#' + d.color; }); 

    labels.append("span") 
     .text(function(d) { return d.type; }); 
    } 

    var selectedTypes = function() { 
    return d3.selectAll('#toggles input[type=checkbox]')[0].filter(function(elem) { 
     return elem.checked; 
    }).map(function(elem) { 
     return elem.value; 
    }) 
    } 

    var pointsFilteredToSelectedTypes = function() { 
    var currentSelectedTypes = d3.set(selectedTypes()); 
    return points.filter(function(item){ 
     return currentSelectedTypes.has(item.type); 
    }); 
    } 

    var drawWithLoading = function(e){ 

    console.log('drawWithLoading e', e); //TODO: delete later 
    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 = pointsFilteredToSelectedTypes().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; }); 

    console.log('map.getPanes()', map.getPanes()); 

    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") 
     .attr('data-name', function(d) { return d.name }); 

    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 
      if (d.name <= 10) {return "ffffd9"} 
        else if (d.name <=15 && d.name >10) {return "edf8b1"} 
        else if (d.name <=20 && d.name >15) {return "7fcdbb"} 
        else if (d.name <=25 && d.name >20) {return "41b6c4"} 
        else if (d.name <=35 && d.name >25) {return "1d91c0"} 
        else if (d.name <=45 && d.name >35) {return "253494"} 
        else {return "081d58"} 
     }) 
     .attr("opacity", 0.5) 
     .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 
     if (d.name <= 10) {return "ffffd9"} 
        else if (d.name <=15 && d.name >10) {return "edf8b1"} 
        else if (d.name <=20 && d.name >15) {return "7fcdbb"} 
        else if (d.name <=25 && d.name >20) {return "41b6c4"} 
        else if (d.name <=35 && d.name >25) {return "1d91c0"} 
        else if (d.name <=45 && d.name >35) {return "253494"} 
        else {return "081d58"} }) 
     .attr("r", 1.4) 
     .attr("opacity", 0.6); 
    } 


    var mapLayer = { 
    onAdd: function(map) { 
     console.log("onviewreset map", map); //TODO: Delete later 
     map.on('viewreset moveend', drawWithLoading); 
     drawWithLoading(); 
    }, 
    }; 

    showHide('#about'); 

    map.on('load', function() { 
    console.log('map ready'); 
    d3.csv(url, function(csv) { 
     points = csv; 
     points.forEach(function(point) { 
     pointTypes.set(point.type, {type: point.type, color: point.color}); 
     }) 
     drawPointTypeSelection(); 
     console.log("addLayer"); //TODO: Delete Later 
     map.addLayer(mapLayer); 
     console.log("addedLayer"); //TODO: Delete Later 
    }) 
    }); 

    console.log('got here too'); 
} 

// Draws Google Maps tiles using Road and Style tiles // 
var map = L.map('map'); 

var roadMutant = L.gridLayer.googleMutant({ 
      maxZoom: 24, 
      type:'roadmap' 
}).addTo(map); 

var styleMutant = L.gridLayer.googleMutant({ 
      styles: [ 
       {elementType: 'labels', stylers: [{visibility: 'off'}]}, 
       {featureType: 'water', stylers: [{color: '#444444'}]}, 
       {featureType: 'landscape', stylers: [{color: '#eeeeee'}]}, 
       {featureType: 'road', stylers: [{visibility: 'on'}]}, 
       {featureType: 'poi', stylers: [{visibility: 'off'}]}, 
       {featureType: 'transit', stylers: [{visibility: 'on'}]}, 
       {featureType: 'administrative', stylers: [{visibility: 'off'}]}, 
       {featureType: 'administrative.locality', stylers: [{visibility: 'off'}]} 
      ], 
      maxZoom: 24, 
      type:'roadmap' 
}); 

// Creates a styles selector menu // 
L.control.layers({ 
    Roadmap: roadMutant, 
    Styles: styleMutant 
}, {}, { 
    collapsed: false 
}).addTo(map); 



url = 'AllCoords_supertrial.csv'; 
initialSelection = d3.set(['1','2','3']); //Ideally would like to have all selected to start with or take away having to check boxes before drawing// 
voronoiMap(map, url, initialSelection); 

Answer 1

即使你已經張貼一些代碼，和小提琴，這是一個有點難以知道發生了什麼。請嘗試更新您的問題以提供complete example。

我打算做一個胡亂猜測，並指向的這一行代碼：

var mapLayer = { 
    ... 
}; 

如果你讀了Leaflet tutorials，特別是關於擴大單張創造新類型的地圖圖層的那些，你「會認識到，創建的Layer一個子類的方法是：

var mapLayer = L.Layer.extend({ 
    onAdd: function(map) {...}, 
    ... 
}); 

單張預計地圖層是L.Layer情況下，實現所有的內部方法。如果你嘗試添加一些沒有實現L.Layer「接口」的東西，事情就會中斷。

如果您不理解子類和類接口等，請刷新您對OOP的瞭解。

這可能不是您代碼中的唯一問題，但是這是我現在唯一可以看到的唯一一個問題，沒有正確查看完整示例。