d3 在中国地图上绘制城市

最新推荐文章于 2021-12-02 07:48:43 发布

ShellDawn

最新推荐文章于 2021-12-02 07:48:43 发布

阅读量2.3k

点赞数 1

文章标签： d3 中国地图城市

本文链接：https://blog.csdn.net/ShellDawn/article/details/75947887

版权

<html>
    <head>
        <meta charset="utf-8">
        <title>China Map</title>
    </head>
    <style>
        body{
            background: black;
        }
        #southsea{
            stroke:#63B8FF;
            stroke-width: 1px;
        }
        circle{
            fill:#00F5FF;
            fill-opacity: .5;
            stroke:#fff;
            stroke-width: .5;
        }
    </style>
    <body>
        <script src="../../static/d3.v3.min.js"></script>
        <script>
            var width = 1500;
            var height = 800;
            var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);     
            var projection = d3.geo.mercator().center([105,40]).scale(900).translate([width/2,height/2]);
            var path = d3.geo.path().projection(projection);
            var zoom = d3.behavior.zoom().scaleExtent([1,10]).on("zoom",zoomed);
            function zoomed(){
                d3.select(this).attr("transform","translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
            }
            china = svg.append('g').call(zoom);
            d3.json("../../static/china.geojson",function(error,root){
                if(error) return console.error(error);

                var province = china
                    .selectAll("path")
                    .data(root.features)
                    .enter()
                    .append("path")
                    .attr("d",path)
                    .attr("stroke","#63B8FF")
                    .attr("stroke-width",1)
                    .attr("fill","black");
            });
            d3.xml("../../static/southchinasea.svg",function(error,xmlDocument){
                china.append("g").html(function(d){
                   return d3.select(this).html() + xmlDocument.getElementsByTagName("g")[0].outerHTML;
                });
                var gSouthSea = d3.select("#southsea");
                gSouthSea.attr("transform","translate(1100,600) scale(0.5)").attr("class","southsea");
            });

            //绘制城市
            d3.json("/transfer/get_citys",function(error,root){
                if(error) return console.error(error);

                var circle = china
                    .append("g") //在China画布上新建g组合标签
                    .selectAll("circle")   //选中所有circle标签
                    .data(root)     //数据集为root
                    .enter()        //进入循环内部
                    .append("circle")   //每一个循环新增一个点circle
                    .attr("r",2)     //设置circle的半径
                    .attr("transform",function(d){    //设置映射点坐标
                        var coor = projection([d[1],d[2]]);  //projection函数只能使用坐标对儿
                        return "translate("+coor[0]+","+coor[1]+")";
                    });
            });
            //END

        </script>
    </body>
</html>

ShellDawn

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
d3 在中国地图上绘制城市

<html> <head> <meta charset="utf-8"> <title>China Map</title> </head> <style> body{ background: black; } #southsea{ stroke:#6
复制链接

扫一扫