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

<强>解释

我认为你已经意识到在第4节中所做的更改，迈克博斯托克已经解释here以回应一个有点相关的问题。具体来说，由于这是平面变换（因为我们将纬度/经度坐标转换为像素），我们需要使用d3.geoTransform()。

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

据我所知，v3和v4之间的区别在于：

您无法使用后备投影，因此您必须使用projection.stream方法。
替换googleMapProjection函数transform分别取x和y坐标，而不是单个数组。

*或相对坐标，例如与topojson

使用（d3 v4）将d3路径作为图层的谷歌地图

1 个答案: