Question

我试图修改Mike Bostock的样本（http://bl.ocks.org/mbostock/5914438），它覆盖了OpenStreetMap上的矢量topojson。是否可以使用Google Map而不是OpenStreetMap修改此示例？

以下内容加载Google地图：

function initMap() {
    map = new google.maps.Map(d3.select("#map").node(), {
        zoom: 4,
        center: new google.maps.LatLng(38.68551, -96.503906),       
        mapTypeId: google.maps.MapTypeId.SATELLITE                     
    });
    map.setOptions({ draggableCursor: 'default' });
}

我有一个d3.js版本3，可以在Google地图上加载geojson文件。但现在我需要一些仅在d3.js版本4中找到的动画功能，而我的d3.js v3代码不起作用。以下是我的d3.js版本3代码：

function drawConusCounties() {        
    var cntyPath = "/geo/conus_counties.json";

    d3.json(cntyPath, function (error, data) {
        if (error) throw error;

        $(function () {
            var overlay = new google.maps.OverlayView();

            overlay.onAdd = function () {
                var layer = d3.select(this.getPanes().overlayLayer).append("div")
                    .attr("class", "cnty");

                var svg = layer.append("svg");
                var cnty = svg.append("g").attr("class", "cnty");

                overlay.draw = function () {
                    var markerOverlay = this;
                    var overlayProjection = markerOverlay.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 + 4000, pixelCoordinates.y + 4000];
                    }

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

                    cnty.selectAll("path")
                        .data(d3.entries(data)[1].value)
                        .attr("d", path) // update existing paths
                    .enter()
                        .append("svg:path")
                        .attr("class", "cnty5")
                        .attr("cntyname", function (d, i) {
                            return d3.entries(data)[1].value[i].properties.NAME;
                        })
                        .attr("d", path);
                }; //end overlay draw
            }; //end onAdd

            overlay.setMap(map);
        }); //end function call

    }); //end d3 call
}

Answer 1

此时，我正在使用d3.js版本3对Google地图进行叠加。我认为在版本4中更改了一些叠加功能名称，我需要研究它们。但是，我可以通过简单地调用initMap（）函数中的overlay函数来覆盖：

function initMap() {
    $('#SvgOverlay').hide();

    map = new google.maps.Map(d3.select("#map").node(), {
        zoom: 4,
        center: new google.maps.LatLng(38.68551, -96.503906),       
        mapTypeId: google.maps.MapTypeId.SATELLITE                     
    });
    map.setOptions({ draggableCursor: 'default' });

    drawConusCounties();
} //end function call

D3.js显示栅格和矢量

1 个答案: