javascript - 使用(d3 v4)将 d3 路径作为图层的谷歌地图

Question

我有以下代码，它获取谷歌地图，然后在其上附加一个图层，但投影中存在问题，这给了我一个错误，并且不单独在谷歌地图上显示该图层，任何帮助都会受到赞赏。请注意，我使用的是 d3 的版本 4。有什么建议吗？

<script>
    var map = new google.maps.Map(d3.select("#map").node(), {
      zoom: 7,
      center: new google.maps.LatLng(31.5852,36.2384),
      mapTypeId: google.maps.MapTypeId.ROADMAP });

 d3.json("Export.json", function(error, jordanLevel2) {
      if (error) throw error
      var overlay = new google.maps.OverlayView();

      overlay.onAdd = function() {

        var layer = d3.select(this.getPanes().overlayLayer).append("div");

        overlay.draw = function() {

          layer.select('svg').remove();

          var w = 900;
          var h = 900;


          var overlayProjection = this.getProjection();

          // Turn the overlay projection into a d3 projection
          var googleMapProjection = function(coordinates) {
            var googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);
            var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
            return [pixelCoordinates.x, pixelCoordinates.y];
          }

          var path = d3.geoPath().projection(googleMapProjection);


          var svg = layer.append("svg")
            .attr('width', w)
            .attr('height', h)

          var g = svg.append('g')
            .attr("id", "mapGroup");


          g.selectAll("path")
            .data(jordanLevel2.features)
            .enter()
            .append("path")
            .attr("d", path)
            .attr('class', 'state selected')

            .style('opacity', .7);

        }
      }
      overlay.setMap(map);

    });

Answer 1

解决方案

如果您的上述代码适用于 D3 v3，您需要做的是将 googleMapProjection 函数替换为以下 d3.geoTransform 函数:

transform = d3.geoTransform({point: function(x, y) {
                  d = new google.maps.LatLng(y, x);
                  d = overlayProjection.fromLatLngToDivPixel(d);
                  this.stream.point(d.x, d.y);
                }
              });

然后，将 path 变量替换为:

var path = d3.geoPath().projection(transform);

说明

我认为您已经了解 Mike Bostock 解释的 v4 中所做的更改 here回答一个有点相关的问题。具体来说，由于这是一个平面变换(因为我们将纬度/经度坐标转换为像素)，因此我们需要使用 d3.geoTransform()。

在 v3 和 v4 中，我们采用一个函数，其中输入应该是您尝试在谷歌地图上绘制的覆盖形状轮廓的纬度/经度坐标*。然后，该函数像以前一样使用 fromLatLngToDivPixel 方法将这些值转换为 svg 叠加层中的像素位置，然后projection.stream 方法将这些值传递回路径对象，然后在绘制叠加层时调用。

据我所知，v3 和 v4 之间的区别是:

1. 您无法使用后备投影，因此必须使用 projection.stream方法代替。
2. transform 是 googleMapProjection 函数的替代品，它单独获取 x 和 y 坐标，而不是在单个数组中一起获取 x 和 y 坐标。

*或相对坐标，例如使用 topojson