Question

我是D3的新手，我在地图上绘制圆圈时遇到问题。看来我的投影正在计算错误的x / y坐标。

$(document).ready(function() {

    var h = 800, 
        w = $('.map').width(), 
        initialScale = 1100;

    var svg = d3.select('.map')
        .append('svg')
        .attr('width', w)
        .attr('height', h);

    var g = svg.append('g');

    var projection = d3.geo.mercator()
        .translate([1700, 110])
        .scale(initialScale);

    var zoom = d3.behavior.zoom()
        .scaleExtent([1, 8])
        .on("zoom", zoomed);

    var tooltip = d3.select('.map').append('div')
            .attr('class', 'hidden tooltip');

    //Define path generator
    var path = d3.geo.path().projection(projection);

    svg.call(zoom).call(zoom.event);

    d3.json('geo/mesorregiao.json', function(json) {

        var aa = [-1.3, -47.9];
        var bb = [-24.99, -53.47];
        var cc = [0, 0];
        g.selectAll("circle")
            .data([aa, bb, cc]).enter()
            .append("circle")
            .attr("cx", function (d) { console.log(d); console.log(projection(d)); return projection(d)[1]; })
            .attr("cy", function (d) { return projection(d)[0]; })
            .attr("r", "8px")
            .attr("fill", "red");

        g.selectAll('path')
            .data(json.features)
            .enter()
            .append('path')
            .attr({
                d: path,
                stroke: '#666',
                class: 'region'
            })
            .on('mousemove', function(d) {
                var mouse = d3.mouse(svg.node()).map(function(d) {
                    return parseInt(d);
                });
                tooltip.classed('hidden', false)
                    .attr('style', 'left:' + (mouse[0] + 15) + 'px; top:' + (mouse[1] + 25) + 'px')
                    .html(d.properties.MESO.capitalize(true));
            }).on('mouseout', function() {
                tooltip.classed('hidden', true);
            });
    });

    function zoomed() {
        var strokeWidth = -0.1242*d3.event.scale + 1.1242;
        g.attr('transform', 'translate(' + d3.event.translate + ')scale(' + d3.event.scale + ')');
        g.selectAll('path').attr('stroke-width', strokeWidth);
    }

});

String.prototype.capitalize=function(all){
    var str = this.toLowerCase();
    if(all){
    return str.split(' ').map(function(e){return e.capitalize();}).join(' ');
    }else{
        return str.charAt(0).toUpperCase() + str.slice(1);
    }
}

我正在使用来自巴西的GeoJson。这是其中的一部分：

{
"type": "FeatureCollection",

"features": [
{ 
    "type": "Feature", 
    "properties": { 
        "MESO": "AGRESTE ALAGOANO", 
        "REGIAO": "Nordeste", 
        "UF": "AL", 
        "GEOCODIGO": "2702" 
    }, "geometry": { 
        "type": "Polygon", 
        "coordinates": [ [ [ -37.040757116614941, -9.808254755872895 ], [ -37.03521111660973, -9.810178255874689 ], [ -37.036941116611388, -9.804671755869663 ], [ -37.032463116607232, -9.792896255858636 ], [ -37.028757116603742, -9.788165755854266 ], [ -37.022019616597504, -9.786672755852805 ], [ -37.017294616593063, -9.774910755841915 ], [ -37.010907116587191, -9.769193755836568 ], [ -37.010535616586822, -9.769051755836472 ], [ -36.997995116575112, -9.762702255830504 ], [ -36.998685116575757, -9.739839755809271 ], [ -37.002272116579093, -9.732970755802853 ], [ -36.993141116570655, -9.72030975579105 ], [ -36.9847211165628

问题是，我在坐标[-1.3, -47.9]，[-24.99, -53.47]和[0, 0]上绘制的圆圈在地图上没有正确显示：

如果您将这些坐标放在Google地图上，您可以看到这些点应该在巴西之上。

我猜测的是我以错误的方式使用投影，但我不知道如何。

我做错了什么？

提前致谢。

在错误的地方绘制地图上的圆圈

0 个答案: