Question

我可以使用d3.js在openlayers底图上成功显示一些点但是我想实际显示图标（目前是maki png图标）而不是svg点。

是否可以使用d3.js将png / jpg / svg图像加载到地图上？

到目前为止，我可以将图标直接加载到svg上，但所有标记都位于同一位置，所以我觉得我在转换坐标时遇到了问题。

    var feature = svg.selectAll("path")
          .data(amenities.features)
          .enter()
          .append("svg:image")
          .attr("xlink:href", "maki/renders/post-18@2x.png")
          .attr("x", function(d, i) {return amenities.features[i].geometry.coordinates[0]})
          .attr("y", function(d, i) {return amenities.features[i].geometry.coordinates[1]})
          .attr("width", "20")
          .attr("height", "20")
          .attr("class", "amenity");

之前我已经能够使用＆＃39;模式创建一个带有图像背景的svg＆＃39;显示图像，这也是一种可能性，但我无法翻译代码以使用它与d3的地理方面。

我知道我此刻正在将图标写入“svg＆＃39; div，所以当我放大和缩小时它们不能正确转换。我的目标是将图像写入＆＃39; g＆＃39; div，如下所示代码：

    var feature = g.selectAll("path")

但是当我使用这一行时，元素会出现在文档上，但图标实际上并没有在地图上呈现。

提前致谢。

Answer 1

我认为我没有恰当地使用群组，但我认为关键是要进行转换，然后在那里翻译。

所以我的例子是http://bl.ocks.org/mpmckenna8/b87df1c44243aa1575cb。

但是因为我没有正确使用群组，所以我不知道图标会像你想要的那样处理缩放。在我的例子中，我只是将图像附加到我创建的圆圈中。

  .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
  .attr('opacity',.3)
  .attr('fill', '#fad959')

Answer 2

这里有一些问题。首先，我不确定您是否完全掌握了d3选择的工作原理，这表明您将amenities.features绑定到您的选择，然后为x和y属性访问它通过索引。有关详细信息，请参阅How Selections Work。此外，您需要将要素的地理坐标转换为屏幕坐标，方法是将它们传递到geographic projection函数。这应该让你接近：

var amenities = svg.selectAll('.amenities')
     .data(amenities.features);

   amenities.enter().append('image');

   amenities
    .attr("class", "amenities")     
    .attr("xlink:href", "maki/renders/post-18@2x.png")
    // The data is already bound so use it instead of the index. Als, 
    // you need to translate geo coordinates to screen coordinates by 
    // passing them through your projection function.
    .attr("x", function(d,i) {return projection(d.geometry.coordinates)[0];})
    .attr("y", function(d,i) {return projection(d.geometry.coordinates)[1];})
    .attr("width", "20")
    .attr("height", "20")

使用d3.js在地图上显示图标/图像而不是圆/路径

2 个答案: