TWaver GIS制作穹顶之下的雾霾地图

“我不满意，我不想等待，我也不再推诿，我要站出来做一点什么。我要做的事，就在此时，就在此刻，就在此地，就在此生”。自离职央视后，沉寂许久的知名记者、主持人柴静昨日携个人视频新作　《穹顶之下》宣告归来，并在短时间内引起广泛关注。生活在这个地球上，空气质量的好坏决定这我们的健康，每个人都希望能够呼吸新鲜空气，都希望抬起头看到的是蓝天和白云，而不是灰蒙蒙的雾霾。说到雾霾，我们用TWaver GIS实现了一个全国雾霾图的示例供大家参考。

首先要创建地图，如果熟悉TWaver GIS的人，下面的代码应该不难，如果第一次接触TWaver GIS，可以参考html5 gis的官方文档。贴出地图的代码：

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});

接下来是在地图上画出每个省省会的的雾霾指数，可以用网元来表示, 先注册一下网元的样式，用我们的矢量描述来表示：

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'}]});

最后我们创建网元，网元的图片就是上边注册的图片，并且用不同的颜色表示雾霾指数的高低：

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.twaver.servasoft.com

TWaver GIS制作穹顶之下的雾霾地图相关推荐

谷歌地图的全球森林监察系统，揭秘中国雾霾的惊天秘密！
来源:老牛时评谷歌公司最近推出的全新交互式地图--"全球森林监察"它可以实时显示全球森林的覆盖情况. 该幅地图的数据来源有多个,其中包括了NASA的森林面积覆盖率的分析数据. 于 ...
大数据解读：穹顶之下，谁在关注雾霾
同呼吸,共命运. 据一项调查显示,60%的人会在雾霾天选择不出门.你我共同生活在同一片天空下,每每抬头仰望,雾霾的灰越来越多的替代了天空应有的蓝.在抱怨的同时你是否关注过雾霾?有没有采取过什么行动来助 ...
逃离烤鸭味的雾霾北京，我们还能去哪里？
不想在北京呆了! 最近几天在北京呆不下去了!每天挤地铁被大叔的体香拥抱也就罢了,出门就被有毒的雾霾淹没,回了家还冻成狗,盖了三床被子都冷! 讲道理,今年夏天天气不错,我本来想给北京天气贴个小红花的,可 ...
雾霾经济：这10款产品，马云看了都想投资
PMCAFF(www.pmcaff.com):互联网产品社区,是百度,腾讯,阿里等产品经理的学习交流平台.定期出品深度产品观察,互联产品研究首选. 雾霾爆表,有的公司却凭借雾霾把生意做得风生水起,连马 ...
查看雾霾用污染地图？用户也需谨慎，莫被仿冒APP污染
2015年03月09日 09:52 2613 <穹顶之下>引燃了社会对环保问题的重视,微博,朋友圈皆被之刷屏,而其中检测雾霾的应用-污染地图近日更是成了几大应用市场的最热门应用,用户量持 ...
大数据破解污染图谱北风与雾霾啥关系
本文讲的是大数据破解污染图谱北风与雾霾啥关系[IT168评论]南美洲的蝴蝶扇动下翅膀,太平洋都能起台风.但为何西伯利亚的强冷空气,却吹不动北京的雾霾?对于这个问题,中国的程序员希望用代码寻找气象与环 ...
如何利用 Blender GIS 制作三维地形
1.概述三维地形虚似可视化仿真技术是指在计算机上对数字地形模型中的地形数据实时的进行三维逼真显示.模拟仿真.简化和多分辨率表达等内容的一项技术.它涉及到遥感与测绘.现代数学.计算几何.地理信息系统. ...
换个角度看雾霾：帝都变“仙境”
前一段弥漫中国东部的超大面积雾霾天气至今让人心有余悸,但更令人揪心的是,雾霾这两天再度来袭,尤其是北京的天气备受关注,超低能见度下即使近距离也看不见对面的人和物,似乎整个城市都进入了灰度模式.大家完全 ...
雾霾警醒世人，智慧城市加速刻不容缓
文章讲的是雾霾警醒世人,智慧城市加速刻不容缓,"遛狗不见狗,狗绳提在手,见绳不见手,狗叫我才走"."世界上最远的距离,是牵着你的手,却看不见你的脸"各类关于雾霾 ...

TWaver GIS制作穹顶之下的雾霾地图

TWaver GIS制作穹顶之下的雾霾地图相关推荐

最新文章

热门文章