HTML5製做在線地圖

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

中國地圖示例

數據格式 數據格式爲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"
        },
        ...
    }
}

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

建立地圖

建立地圖組件對象

//建立地圖對象
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();
});

呈現效果

在線演示

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

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

 

其餘地圖示例

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

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

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

相關文章
相關標籤/搜索