javascript - 在用 d3.js 制作的 map 上显示图标/图像而不是圆圈/路径

Question

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

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

到目前为止，我可以将图标直接加载到 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");

以前我已经能够使用“模式”来创建一个带有图像背景的 svg 来显示图像，所以这也是一种可能性，但我无法翻译代码以将其用于 d3 的地理方面。

我知道我现在正在将图标写入“svg”div，因此当我放大和缩小时它们无法正确转换。我的目标是将图像写入“g”div，就像代码一样:

    var feature = g.selectAll("path")

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

提前致谢。

Answer 1

这里有几个问题。首先，我不确定您是否完全理解 d3 选择的工作原理，正如您将 amenities.features 绑定(bind)到您的选择然后为 x 访问它这一事实所表明的那样> 和 y 属性通过索引。参见 How Selections Work有关此的更多详细信息。此外，您需要通过 geographic projection 将要素的地理坐标转换为屏幕坐标。功能。这应该让你接近:

// more projections: https://github.com/d3/d3-geo-projection/
var projection = d3.geoAlbers();

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")