我是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。
答案 0 :(得分:0)
问题是我的tsv中有一些空行,我认为if(d.SoundLat&& d.SoundLong)已经捕获了空值但显然没有。