-
Notifications
You must be signed in to change notification settings - Fork 0
/
D3_24.html
100 lines (80 loc) · 3.16 KB
/
D3_24.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./D3.js" charset="utf-8"></script>
<style>
html, body {
-webkit-user-select: none;
user-select: none;
}
.province{
stroke:'#ccc';
stroke-width:1px;
}
.centroid{
fill:#ccc;
}
.boundingbox{
fill:none;
stroke:#ccc;
stroke-width:1px;
}
.overlay{
fill: none;
pointer-events: all;
}
</style>
</head>
<body>
</body>
<script charset="utf-8">
var width = 500;
var height = 500;
var svg = d3.select('body').append('svg').attr('width',width).attr('height',height);
var projection = d3.geoOrthographic().translate([width/2,height/2]);//设置球型地图投影
var path = d3.geoPath(projection);//设置地理路径生成器
var geoGraticule = d3.geoGraticule();//设置地理网格生成器
var grid = geoGraticule();//获取地理网格数据信息
var mapLines = svg.append('path').datum(grid)//绘制地理网格
.attr('stroke','#ccc')
.attr('stroke-width','1px')
.attr('fill','none')
.attr('d',path)
.attr('marker-end','url(#arrow)')
.attr('marker-start','url(#startpoint)');
var colors = d3.scaleOrdinal(d3.schemeCategory10);
var pekingToWashington = {//从华盛顿到北京的连线数据
type: "LineString",
coordinates: [[ 116.4, 39.9],[-77.0, 38.9]]
};
d3.json('china.json').then((root,error) => {
var groups = svg.append('g');
var map = groups.selectAll('path').data(root.features).enter().append('path').attr('class','province').style('fill',function(d,i){//绘制地图
return colors(i);
}).attr('d',path);
var mapArrow = svg.append('path')//绘制华盛顿到北京连线
.attr('stroke','#333')
.attr('stroke-width','1px')
.attr('fill','none')
.attr('d',path(pekingToWashington));
var initRotate = projection.rotate();
var initScale = projection.scale();
var zoom = d3.zoom().duration(200).scaleExtent([1,10]).on('zoom',function(d){//缩放拖动地图事件
projection.rotate([//更新地图旋转角度
initRotate[0] + 180 * d3.event.transform.x / width,
initRotate[1] + 180 * d3.event.transform.y / height,
initRotate[2]
]);
projection.scale(initScale * d3.event.transform.k);//更新地图缩放系数
mapLines.attr('d',path);//更新绘制地图网格
map.attr('d',path);//更新绘制地图
mapArrow.attr('d',path(pekingToWashington));//更新绘制华盛顿到北京连线
});
svg.append('rect').attr('class','overlay').attr('x',0).attr('y',0).attr('width',width).attr('height',height).call(zoom);//绘制透明层来辅助地图缩放操作
})
</script>
</html>