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