Question

快速版：我在Leaflet显示的静态图片上显示d3元素时遇到问题。如果我使用d3noob的（http://bl.ocks.org/d3noob/9211665）示例，它可以工作......但我在扩展它时遇到了麻烦。我猜这是因为lang和long翻译或者投影，但我不确定我需要改变什么。我正试图在图像的中心显示geoJSON（我在JSFiddle上的代码：https://jsfiddle.net/g_at_work/qyhf0qz0/12/）

更长的版本： 我试图扩展d3noob的例子，这样我就可以使用Leaflet和D3在静态图像上显示geoJSON（不幸的是我老板的要求）。我能够重现基于d3noob的磁贴的示例，但我对静态版本有疑问。

我已经能够显示静态图像，但我无法在图像上显示蓝色矩形。我不确定我需要做些什么才能操纵JSON中描述的蓝色矩形的位置。

我尝试过在projectPoint函数中设置坐标，但没有运气：

function projectPoint(x, y) {
var point = map.latLngToLayerPoint(new L.LatLng(y, x));
this.stream.point(point.x, point.y);
}

在这个阶段，我想我需要描述一个新的投影，但我不确定是什么。这是我用来显示静态图像的代码：

var map = new L.Map("map", {maxZoom:1,center: [0,0], zoom: 3,crs:L.CRS.Simple});
var southWest = map.unproject([0,882],map.getMaxZoom());
var northEast = map.unproject([1085,0],map.getMaxZoom());
var imageBounds = new L.LatLngBounds(southWest,northEast);
L.imageOverlay('http://www.w3schools.com/css/trolltunga.jpg',imageBounds).addTo(map);
map.fitBounds(imageBounds);

如果有人可以建议制定矩形位置的策略（我是d3和传单的新手），那将是很棒的谢谢一堆 ģ

Answer 1

所以经过一些修补后我发现创建一个新的投影让我能够设置位置并缩放地图，这样我就可以把它放在我需要的位置：

var center = d3.geo.centroid(geoShapeInstance); var scale = [800000]; var offset = [175, 1]; var projection = d3.geo.mercator().scale(scale).center(center).translate(offset); var path = d3.geo.path().projection(projection);

摆弄＆＃39;偏移＆＃39;变量允许我设置位置并使用＆＃39; scale＆＃39;变量允许我调整地图的大小（比例是[x，x]值）

希望这有助于某人。

使用imageOverlay使用D3和Leaflet渲染geoJSON

1 个答案: