JVectorMap API 之 数据格式

如果你对 JVectorMap 不太了解,请先阅读《开源JS地图插件JVectorMap介绍》。

使用 Converter 生成的 JVectorMap 数据文件大小跟数据源大小和精度相关,数据主要存储于文件中的 path 字段,它代表了地图中所有区域的路径信息。数据文件格式如下:

jQuery.fn.vectorMap('addMap', 'afg_mill_en',
    {
        "insets": [
            {
                "width": 900.0,
                "top": 0,
                "height": 642.33050485257525,
                "bbox": [
                    {"y": -4509613.1491, "x": 6738787.2362},
                    {"y": -3365824.1687, "x": 8341404.6963}
                ],
                "left": 0
            }
        ],
        "paths": {
            "24": {
                "path": "M485.72,476.51l-0.74 ... Z",
                "name": "Paktika"
            },
        },
        "height": 642.33050485257525,
        "projection": {"type": "mill", "centralMeridian": 0.0},
        "width": 900.0
    }
);

下面详细说明这些字段的意义

width / height

值不能为空。表示了坐标系中所有路径集合的边界宽度和高度,单位是像素(px)。

paths

值不能为空。这里面使用了 SVG 格式数据描述地图区域。类型是对象,键值为区域 code ,值也是对象,包含了 name 和 path 参数,分别为当前区域的名称和路径信息。下面是一个美国地图示例:

paths: {
    US-AK: {
        name: "Alaska",
        path: "M89.36,517.03l0.84,0.08l0.09,0.36l-0.3..."
    },
    US-AL: {
        name: "Alabama",
        path: "M608.66,337.47l25.17,-2.91l19.4..."
    },
    US-AR: {
        name: "Arkansas",
        path: "M498.73,376.99l-1.42,-38.01l-4.48,-23.98l37.68..."
    },
    ...
}

 projection

值不可为空。投影信息,主要用于标记的经纬度转化为坐标系中的点,这个对象有2个参数:

  • centralMeridian 值为单位为度的数字,当值为非0时用于生成一些跨域标准领子午线的区域。
  • type 生成地图的投影方式。目前支持的投影方式有:Miller Cylindrical projection(米勒圆柱投影),Mercator projection(墨卡托投影), Albers Equal-Area Conic projection (阿尔伯斯圆锥等面积投影)和 Lambert Conformal Conic projection(兰勃特正交投影)。投影类请看这儿。

下面是美国地图的投影示例:

projection: {
    centralMeridian: -100,
    type: "aea"
}

insets

insets 主要是用来展现那些没有在地图比例上比较偏远的地区,比如美国的阿拉加斯加和夏威夷经常被展示在美国地图的某个角落或者主要领土的下方。通常情况下这个参数为可选的,但是当你用到基于经纬度的标记的时候,它是必选的。实际上 insets 数组的每一项只是将地图矩形区域投影到坐标系,单位是米。下面是美国地图的阿拉加斯加示例:

insets: [{
    "left": 0
    "top": 440,
    "width": 220,
    "height": 147
    "bbox":[{
        "y": -8441281.712315228,
        "x": -5263934.893342895
    },{
        "y": -6227992.545028123,
        "x": -1949631.2950683108
    }
}]

 

发表评论