D3.js zoomTo指向2D地图(投影)
D3.js zoomTo point in a 2D map (projection)
我对D3缩放有一些问题。
我用D3和topoJSON构建了一张地图,当我搜索一个城市时,地图上会出现一个点。
我使用以下代码对地图进行了约束缩放:http://bl.ocks.org/mbostock/4987520
它对我所有的东西都很好,现在我试图通过在搜索后添加缩放来改善体验。
我在这里看到了一些插入代码:http://bl.ocks.org/mbostock/6242308
但在两个链接上有两个不同的缩放功能,我不知道如何混合。我的代码没有错误,但缩放总是在同一点(我认为是地图的中心),即使我的点在控制台日志中返回不同的位置。。。。不明白为什么
以下是一些代码示例:
var zoom = d3.behavior.zoom()
.scaleExtent([1, 30])
.on("zoom", move);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.call(zoom);
var g = svg.append("g");
//This is called when ajax research
function setPlaces(jsonData){
... code stuff
var point = [authors[0].birth_place.lon, authors[0].birth_place.lat];
svg.transition().call(zoomTo(point, 4).event);
}
function zoomTo(location, scale) {
var point = projection(location);
return zoom
.translate([width / 2 - point[0] * scale, height / 2 - point[1] * scale])
.scale(scale);
}
function move() {
var t = d3.event.translate,
s = d3.event.scale;
t[0] = Math.min(width / 2 * (s - 1), Math.max(width / 2 * (1 - s), t[0]));
t[1] = Math.min(height / 2 * (s - 1) + 230 * s, Math.max(height / 2 * (1 - s) - 230 * s, t[1]));
zoom.translate(t);
g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")");
}
代码中的主要问题是在缩放到点的调用中切换了经度和纬度。除此之外,变焦效果良好。但是,当您对地图使用缩放行为时,通过此设置比直接通过SVG转换更好。相关代码如下。
function zoomTo(location, scale) {
var point = projection(location);
zoom.scale(scale);
zoom.translate([-point[0] * scale, -point[1] * scale]);
return zoom;
}
相关文章:
- 谷歌地图固定位置覆盖
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何在D3.js中绘制地图投影上的点,并使用范围滑块过滤数据
- D3缩放和平移不适用于整个地图,只适用于投影
- 使用d3.js重复世界地图投影
- D3.js zoomTo指向2D地图(投影)
- OpenLayers:自动将 EPSG 4326 - 文本图层的坐标转换为地图的投影 (EPSG:900913)
- 使用 QGIS 和 D3 可视化自定义地图.js会受到投影的损害
- 如何使用谷歌地图在开放层中取消投影和重新投影多边形的顶点
- 使用传单上的自定义地图投影
- 在阿尔伯斯投影地图上将纬度/经度转换为X/Y坐标
- 为什么openlayers在地图点击时返回投影坐标
- 如何在复制d3,svg地图后更新投影
- 谷歌地图api V3,折线和投影
- 如何在d3 js中为地图重投影做平滑过渡
- 一些谷歌地图API v3自定义投影标记不显示
- 为什么这9个美国城市在D3地图上没有对应它们的实际位置,而我用Albers美国投影来绘制它们
- 能够像推特一样在世界地图上使用等矩形投影,也需要为美国图像工作
- 从球面投影地图上的纬度获取Y位置
- 使用 css 将地图设置为背景或在背景中使用等距柱状投影地图投影