TWaver GIS制作穹顶之下的雾霾地图
“我不满意，我不想等待，我也不再推诿，我要站出来做一点什么。我要做的事，就在此时，就在此刻，就在此地，就在此生”。自离职央视后，沉寂许久的知名记者、主持人柴静昨日携个人视频新作 《穹顶之下》宣告归来，并在短时间内引起广泛关注。生活在这个地球上，空气质量的好坏决定这我们的健康，每个人都希望能够呼吸新鲜空气，都希望抬起头看到的是蓝天和白云，而不是灰蒙蒙的雾霾。说到雾霾，我们用TWaver GIS实现了一个全国雾霾图的示例供大家参考。
首先要创建地图，如果熟悉TWaver GIS的人，下面的代码应该不难，如果第一次接触TWaver GIS，可以参考html5 gis的官方文档。贴出地图的代码：
|
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
|
network =
new
twaver.vector.Network();
map =
new
twaver.gis.Map(document.getElementById(
"container"
),
"test"
);
map.setSize({width:800,height:1200});
map.setEnableDoubleZoom(
false
);
map.setBackgroundColor(GISConsts.GOOGLE_COLOR);
map.setProjectionType(GISConsts.PROJECTION_MERCATOR);
map.addLayer(
"OSM"
,GISConsts.EXECUTOR_TYPE_OSM);
map.setZoomLevel(4);
map.setCenter(
new
twaver.gis.geometry.GeoCoordinate(40,100));
network.adjustBounds({x:0,y:0,width:900,height:800});
var
box = network.getElementBox();
adapter =
new
twaver.gis.Adapter();
adapter.bindNetworkAndMap(network,map);
adapter.enableCombineInteraction();
var
borderPane =
new
twaver.controls.BorderPane(map);
appendChild(borderPane.getView(),document.getElementById(
"container"
),0,0,0,0);
var
toolbar =
new
twaver.gis.gadget.MapToolbar(
""
,map);
map.installGadget(toolbar.getView());
var
navigator =
new
twaver.gis.gadget.Navigator(
"cn"
,map);
map.installGadget(navigator,{x:20,y:50});
|
接下来是在地图上画出每个省省会的的雾霾指数，可以用网元来表示, 先注册一下网元的样式，用我们的矢量描述来表示：
|
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
|
twaver.Util.registerImage(
'exponent'
, {
w: 80,
h: 30,
origin: { x: 0, y: 0 },
line: {
width: 0,
color:
'red'
},
v: [
{
shape:
'rect'
,
rect: [ 0, 0, 80, 20],
fill:
'white'
,
r: 2
},
{
shape:
'rect'
,
rect: [ 50, 0, 30, 20],
fill:
'<%= data.getClient("color") %>'
,
r:2
},
{
shape:
'text'
,
text:
'<%= data.getClient("name") %>'
,
textAlign:
'left'
,
textBaseline:
'top'
,
x: 5,
y: 5
},
{
shape:
'text'
,
text:
'<%= data.getClient("exponent") %>'
,
textAlign:
'left'
,
textBaseline:
'top'
,
x: 55,
y: 5
},
{
shape:
'circle'
,
cx: 40,
cy: 22,
r: 2,
fill:
'red'
}
]
});
|
最后我们创建网元，网元的图片就是上边注册的图片，并且用不同的颜色表示雾霾指数的高低：
|
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
|
function
createTopo() {
var
box = network.getElementBox();
var
geoDatas = [
{latitude: 39.91667, longitude: 116.41667, name:
"北京"
},
//北京
{latitude: 31.14, longitude:121.29, name:
"上海"
},
//上海
{latitude: 39.13333, longitude: 117.20000, name:
"天津"
},
//天津
{latitude: 22.20000, longitude:114.10000, name:
"香港"
},
//香港
{latitude: 23.16667, longitude: 113.23333, name:
"广州"
},
//广州
{latitude: 30.26667, longitude:120.20000, name:
"杭州"
},
//杭州
{latitude: 29.56667, longitude: 106.45000, name:
"重庆"
},
//重庆
{latitude: 26.08333, longitude:119.30000, name:
"福州"
},
//福州
{latitude: 36.03333, longitude: 103.73333, name:
"兰州"
},
//兰州
{latitude: 26.56667, longitude:106.71667, name:
"贵阳"
},
//贵阳
{latitude: 28.21667, longitude: 113.00000, name:
"长沙"
},
//长沙
{latitude: 32.05000, longitude:118.78333, name:
"南京"
},
//南京
{latitude: 28.68333, longitude: 115.90000, name:
"南昌"
},
//南昌
{latitude: 41.80000, longitude:123.38333, name:
"沈阳"
},
//沈阳
{latitude: 37.86667, longitude: 112.53333, name:
"太原"
},
//太原
{latitude: 30.66667, longitude:104.06667, name:
"成都"
},
//成都
{latitude: 29.60000, longitude: 91.00000, name:
"拉萨"
},
//拉萨
{latitude: 43.76667, longitude:87.68333, name:
"乌鲁木齐"
},
//乌鲁木齐
{latitude: 25.05000, longitude: 102.73333, name:
"昆明"
},
//昆明
{latitude: 34.26667, longitude:108.95000, name:
"西安"
},
//西安
{latitude: 36.56667, longitude: 101.75000, name:
"西宁"
},
//西宁
{latitude: 38.46667, longitude:106.26667, name:
"银川"
},
//银川
{latitude: 45.75000, longitude: 126.63333, name:
"哈尔滨"
},
//哈尔滨
{latitude: 43.88333, longitude:125.35000, name:
"长春"
},
//长春
{latitude: 30.51667, longitude: 114.31667, name:
"武汉"
},
//武汉
{latitude: 34.76667, longitude:113.65000, name:
"郑州"
},
//郑州
{latitude: 38.03333, longitude: 114.48333, name:
"石家庄"
},
//石家庄
{latitude: 20.01667, longitude:110.35000, name:
"海口"
},
//海口
{latitude: 22.20000, longitude: 113.50000, name:
"澳门"
},
//澳门
{latitude: 40.48, longitude: 111.41, name:
"呼和浩特"
},
//呼和浩特
{latitude: 22.48, longitude: 108.19, name:
"南宁"
},
//南宁
{latitude: 36.40, longitude: 117.00, name:
"济南"
},
//济南
{latitude: 31.52, longitude: 117.17, name:
"合肥"
},
//合肥
{latitude: 25.03 , longitude: 121.30, name:
"台北"
}
//台北
];
for
(
var
i = 0; i < geoDatas.length; i++) {
var
node =
new
twaver.Node();
node.setClient(GISSettings.GEOCOORDINATE,
new
twaver.gis.geometry.GeoCoordinate(geoDatas[i].latitude,geoDatas[i].longitude));
node.setImage(
"exponent"
);
node.setClient(
"name"
,geoDatas[i].name);
node.setClient(
"exponent"
,Math.floor(Math.random() * 200) + 20);
if
(node.getClient(
"exponent"
) < 50) {
node.setClient(
"color"
,
"green"
);
}
else
if
(node.getClient(
"exponent"
) >= 50 && node.getClient(
"exponent"
) < 100) {
node.setClient(
"color"
,
"#D6C621"
);
}
else
if
(node.getClient(
"exponent"
) >= 100 && node.getClient(
"exponent"
) < 150) {
node.setClient(
"color"
,
"#F5582E"
);
}
else
if
(node.getClient(
"exponent"
) >= 150 && node.getClient(
"exponent"
) <= 220) {
node.setClient(
"color"
,
"red"
);
}
box.add(node);
}
}
|
这样一个简单的雾霾地图就实现了，上边的数据是模拟数据，如果想反映真实数据，可以直接调用中国天气的实时数据，网址：http://openweather.weather.com.cn/Home/Package/index.html
关于更多产品TWaver信息，可关注官网网站：www.servasoft.com