Question

<!DOCTYPE html>
<html>
<head>
<title>D3.js GoogleMap Voronoi Diagram</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script       src="http://shimz.me/example/d3js/geo_example/geo_template/topojson.v0.min.js">         </script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?  sensor=false"></script>
<style type="text/css">
html, body{
    margin: 0px;
    padding: 0px;
}
html, body, #map_canvas {
    width: 100%;
    height: 100%;
}

.SvgOverlay {
    position: relative;
    width: 900px;
    height: 600px;           
}

.SvgOverlay svg {
    position: absolute;
    top: -4000px;
    left: -4000px;
    width: 8000px;
    height: 8000px;        
}

</style>
</head>
<body>
<div id="map_canvas"></div>
<br>

<script type="text/javascript">

d3.json('bus-stops.json', function(pointjson){
    main(pointjson); 
});

function main(pointjson) {

    //Google Map
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(1.290270,103.851959),       
    });


    var overlay = new google.maps.OverlayView(); //OverLay


    overlay.onAdd = function () {

        var layer =   d3.select(this.getPanes().overlayLayer).append("div").attr("class",  "SvgOverlay");
        var svg = layer.append("svg");
        var svgoverlay = svg.append("g").attr("class", "AdminDivisions");


        overlay.draw = function () {
            var markerOverlay = this;
            var overlayProjection = markerOverlay.getProjection();

            //Google Map
            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];
            }


            var pointdata = pointjson.lat;
            console.log(pointdata);

            var positions = [];

            pointdata.forEach(function(d) {     
              positions.push(googleMapProjection(d.lat,d.lng)); 
            });


            var polygons = d3.geom.voronoi(positions);

            var pathAttr ={
                "d":function(d, i) { return "M" + polygons[i].join("L") + "Z"},
                stroke:"red",
                fill:"none"         
            };


            svgoverlay.selectAll("path")
            .data(pointdata)
            .attr(pathAttr)
            .enter()
            .append("svg:path")
            .attr("class", "cell")
            .attr(pathAttr)

            var circleAttr = {
                "cx":function(d, i) { return positions[i][0]; },
                "cy":function(d, i) { return positions[i][1]; },
                "r":2,
                fill:"red"          
            }


            svgoverlay.selectAll("circle")
            .data(pointdata)
            .attr(circleAttr)
            .enter()
            .append("svg:circle")
            .attr(circleAttr)

        };

    };


    overlay.setMap(map);


};

</script>

</body>
</html>

数据文件具有以下结构：

[{"no":"10009","lat":"1.28210155945393","lng":"103.81722480263163",
  "name":"Bt Merah Int"},
 {"no":"10011","lat":"1.2777380589964","lng":"103.83749709165197",
  "name":"Opp New Bridge Rd Ter"}]

它也在控制台中出错： TypeError：pointdata未定义。我试图使用示例进行绘图：http://bl.ocks.org/shimizu/5610671 我使用console.log（）得到了未定义的pointjson。请建议如何获得pointjson中的坐标值

无法从地理空间数据生成Voronoi图

0 个答案: