javascript - 使传单地图顶部的 SVG 不响应平移事件
问题描述
我创建了这个简单的传单地图示例,在其上使用以下代码绘制 svg:
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 的任何内容也会被平移,有什么办法可以解决吗?
解决方案
您将所有 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
推荐阅读
- bash - 如何在 bash ubuntu 中更改具有 csv 名称列表的单个 txt 文件的代码?
- javascript - 如何使用 css 位置的转换
- kotlin - Android RecyclerView NotifyDataSetChanged 与 LiveData
- c - 尽管从 pthread_create() 返回成功,但没有创建线程
- python - 如何为 aws-lambda python API 生成招摇文档?
- android - setValue() 函数具有未解析的引用
- c# - Elasticsearch 索引文档,但下一个查询返回 0 个命中
- python - 使用 conda 从 tensorflow 1.14.0 升级到 2.2.0 时发生大量包更改
- c++ - 我有一个世界点列表(XYZ),我想在 openGL 窗口中显示它们
- r - 如何将使用 UNIX 纪元秒的 X 轴格式化为 R 中的年/月?