您的位置：首页 > 其它

d3 在中国地图上绘制城市

2017-07-23 20:10 417 查看

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航