将 D3 地图放在 google 地图之上

Question

更新 ***

我已将地图添加到叠加层，但是当我缩放地图时关闭，我无法在 d3 地图上缩放，另外我如何将我的地图与 google 对齐？ [link][1]

更新 2

我终于将我的 d3 地图与 google 地图对齐，但是当我缩放时，停留在固定位置 image and image 1

这是代码：`

var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 8,
center: new google.maps.LatLng(43.469740, 10.946157),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles:[{"stylers": [{"saturation": -75},{"lightness": 10}]}]
});

d3.json("weekdays0_level_2.json", function(error,data){
    if (error) throw error

    //console.log(data[0].comuni[0].geometry.coordinates);
    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 = 600;

            var color = ['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628','#f781bf','#999999'];
            var heat_color = d3.scale.linear().domain([0, 1]).range(['#b2df8a', '#ff7f00']).interpolate(d3.interpolateHcl);

            var projection = d3.geo.albers()
                .center([0.13, 43.46])
                .rotate([350, 0])
                .scale(1200 * 12)
                .translate([w / 2, h / 2])
                .precision(.1);

            var path = d3.geo.path()
                         .projection(projection);

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

            for (var i=0; i < data.length; i++) {
                var mapc = color[i%color.length];
                for (var j=0; j < data[i].comuni.length; j++) {
                    console.log(data[i].comuni[j])
                    svg.append("path")
                        .datum(data[i].comuni[j])
                        .attr("d", path)
                        .attr('class','state selected')
                        .style("fill", mapc)
                        .style('opacity',.7)

                }
            }
        }
    }
    overlay.setMap(map);

});

`

有解决这个问题的方法吗？

Answer 1

我将 excellent answer here 与您的数据结构相结合。您缺少的关键是将 google 映射投影转换为 d3 可以使用的投影。注意，我还重写了您的地图路径代码以使用 d3 数据绑定而不是循环。这是它所有可运行的荣耀：

<!DOCTYPE html>
<html>

<head>
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>

  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>

</head>

<body>
  <div id="map"></div>
  <script>
    var map = new google.maps.Map(d3.select("#map").node(), {
      zoom: 8,
      center: new google.maps.LatLng(43.469740, 10.946157),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [{
        "stylers": [{
          "saturation": -75
        }, {
          "lightness": 10
        }]
      }]
    });

    d3.json("https://jsonblob.com/api/1e7c9245-e4b6-11e6-90ab-914a66f2a924", function(error, data) {
      if (error) throw error

      //console.log(data[0].comuni[0].geometry.coordinates);
      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 = 600;

          var color = ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33', '#a65628', '#f781bf', '#999999'];
          var heat_color = d3.scale.linear().domain([0, 1]).range(['#b2df8a', '#ff7f00']).interpolate(d3.interpolateHcl);

          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.geo.path().projection(googleMapProjection);

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

          var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g");

          g.selectAll("path")
            .data(function(d) {
              return d.comuni;
            })
            .enter()
            .append("path")
            .attr("d", path)
            .attr('class', 'state selected')
            .style("fill", function(d, i) {
              return color[i % color.length];
            })
            .style('opacity', .7);

        }
      }
      overlay.setMap(map);

    });
  </script>
</body>

</html>

将 D3 地图放在 google 地图之上

Put D3 map over google maps

maps

google-maps

overlay

google-maps-api-3

d3.js