leaflet.js“viewreset”地图的问题没有正确缩小

时间:2016-09-19 18:51:14

标签: d3.js leaflet openstreetmap

我是Leaflet.js的新手。我正在尝试使用Leaflet和D3向OSM添加图层。我可以看到一个点但是当我缩小以查看其他点是否显示时,地图是不能正确重绘并且我得到“TypeError:t is undefined”消息。

以下是我的大部分代码:

/* We simply pick up the SVG from the map object */
var svg = d3.select("#map").select("svg"),
g = svg.append("g");

d3.tsv("DH_Doig.tsv", function(data) {
    /* Add a LatLng object to each item in the dataset */
    data.forEach(function(d) {
  if (d.SoundLat && d.SoundLong) {
    d.SoundLat = +d.SoundLat;
    d.SoundLong = +d.SoundLong;
    d.SoundLatLong = new L.LatLng(d.SoundLat, d.SoundLong);
    //d.LatLng = new L.LatLng(d.circle.coordinates[0],
                                //d.circle.coordinates[1])
                //console.log(d.SoundLatLong)

  }

//的console.log(d.SoundLatLong);         })

    var feature = g.selectAll("circle")
        .data(data)
        .enter().append("circle")
        .style("stroke", "black")
        .style("opacity", .6)
        .style("fill", "red")
        .attr("r", 20);

    map.on("viewreset", update);
    update();

    function update() {
        feature.attr("transform",
        function(d) {
          console.log(d.SoundLatLong);  //added to see lat long
            return "translate("+
                map.latLngToLayerPoint(d.SoundLatLong).x +","+
                map.latLngToLayerPoint(d.SoundLatLong).y +")";
            }
        )
    }
})

typeError消息引用了这一行:

                    map.latLngToLayerPoint(d.SoundLatLong).x +","+

我使用此示例作为基础:Map using leaflet.js and d3 combined.

以下是我的代码的plunk

1 个答案:

答案 0 :(得分:0)

问题是我的tsv中有一些空行,我认为if(d.SoundLat&& d.SoundLong)已经捕获了空值但显然没有。