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