HTML5制作在线地图

2024-02-22 12:36:28

地图是一种普遍应用，按准确度分精确地图（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();
});