我创建了这个简单的传单地图示例,我在其上面用以下代码绘制svgs:
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 20, attribution: osmAttrib});
var map = L.map('map').setView([37.5, -115], 6).addLayer(ism);
/* Initialize the SVG layer */
map._initPathRoot()
/* We simply pick up the SVG from the map object */
var svg = d3.select("#map").select("svn")
g = svg.append("g")
.attr("width",width)
.attr("height", height);
var row = svg.selectAll(".row")
.data(gridData)
.enter().append("g")
.attr("class", "row");
var column = row.selectAll(".square")
.data(function(d) { return d; })
.enter().append("rect")
.attr("class","square")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("width", function(d) { return d.w; })
.attr("height", function(d) { return d.h; })
.style("fill", "#fff")
.style("fill-opacity","0.1")
.style("stroke", "#222")
现在我的问题是每当我平移地图时,无论我在地图上添加的SVG是否也被淘汰,有什么方法可以解决这个问题吗?
答案 0 :(得分:1)
您将所有D3内容放入由Leaflet管理的SVG容器中:
/* We simply pick up the SVG from the map object */
var svg = d3.select("#map").select("svn")
...而Leaflet负责移动和缩放地图容器内的任何内容。
有什么方法吗?
是。不要为<svg>
渲染器重复使用Leaflet的L.SVG
根容器。