HTML5製做在線地圖

地圖是一種廣泛應用，按準確度分精確地圖（GIS）和示意地圖（MapChart），前者支持各類地圖投影與座標系，譬如ArcGIS，後者使用相對座標系，或者支持簡單的WGS84經緯網座標系，好比ILOG Elixir地圖組件，示意地圖再按圖片類型分，可分爲：柵格地圖與矢量地圖，Qunee組件適合製做矢量示意地圖。

中國地圖示例

數據格式 數據格式爲JSON，裏面包含三種類型：paths、points、labels，分別對應地圖區塊，地圖點圖元，文本標籤

{
    paths:{
        "0": {
            "path": "M 377.651,468.883 C 378.90893,469.42985 379.00785,468.11779 377.651,468.44337 L 377.651,468.883 z",
        },
        ...
    },
    labels:{
        "0": {
            "text": "Jilin",
                "x": 563.34998,
                "y": 150.46661,
                "class": "tp"
        },
        ...
    },
    points:{
        "0": {
            "x": 433.68372999999997,
                "y": 437.30225,
                "size": 2.1561123985544106,
                "id": "path2591"
        },
        ...
    }
}

地圖細節
地圖數據比較完善，細節比較豐富，能夠注意到浙江省的一些島嶼也能正常顯示

建立地圖

建立地圖組件對象

//建立地圖對象
var graph = new Q.MapChart(canvas);

加載數據 使用loadJSONByURL方法動態加載數據，loadJSONByURL(...)函數有三個傳入參數，第一個爲數據地址，後兩個爲回調函數，第一個回調函數在建立每一個地圖圖元時調用，第二個回調函數在地圖圖元所有建立完成後調用

Q.MapChart#loadJSONByURL(url, callback1, callback2);

完整代碼

//建立地圖對象
var graph = new Q.MapChart(canvas);
var url = "mapchart/china-en.json";

//加載json格式的地圖數據
graph.loadJSONByURL(url, function(element, type, info){
    element.info = info;
    element.movable = false;
    element.type = type;
    if(type == "path"){
        element.setStyle(Q.Styles.SHAPE_FILL_COLOR, "#FFF");
        element.setStyle(Q.Styles.SHAPE_STROKE_STYLE, strokeColor);
        element.setStyle(Q.Styles.SHAPE_STROKE, 0.5);
        element.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_MIDDLE);
        element.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_MIDDLE);
        element.zIndex = -1;
        return;
    }
    if(type == "point"){
        element.setStyle(Q.Styles.SHAPE_FILL_COLOR, "#DDD");
        element.setStyle(Q.Styles.SHAPE_STROKE_STYLE, "#EE0000");
        element.zIndex = 10;
        return;
    }
    if(type == "label"){
        if(info.class == 'tc'){
            element.visible = false;
        }
        element.setStyle(Q.Styles.LABEL_COLOR, "#AAA");
    }
}, function(){
    var beijing = graph.createNode("北京", 455, 198.6);
    beijing.image = Q.Graphs.server;
    var shanghai = graph.createNode("上海", 525, 315);
    var changsha = graph.createNode("長沙", 421, 366);
    var edge = graph.createEdge(beijing, shanghai);
    var edge = graph.createEdge("北京 > 上海", beijing, shanghai);
    edge.setStyle(Q.Styles.EDGE_COLOR, "#2898E0");
    edge.setStyle(Q.Styles.LABEL_BACKGROUND_COLOR, "rgba(255,255,255,0.7)");
    edge = graph.createEdge("上海 > 長沙", shanghai, changsha);
    edge.setStyle(Q.Styles.EDGE_COLOR, "#2898E0");
    edge.setStyle(Q.Styles.LABEL_BACKGROUND_COLOR, "rgba(255,255,255,0.7)");
    graph.zoomToOverview();
});

呈現效果

在線演示

示例增長了交互處理，監聽縮放變化事件，在不一樣比例尺下，對節點進行樣式設置，使得節點保持合適大小

http://demo.qunee.com/#China Map

 

其餘地圖示例

也能夠從SVG中獲取地圖座標信息，例以下面的美國大選、以及美國失業率分佈的在線演示

http://demo.qunee.com/#U.S. Presidential Election 2012

http://demo.qunee.com/#U.S. Unemployment Rates 2008