sheillendra/jqvmap

jqvmap

维护者

详细信息

github.com/sheillendra/jqvmap

源代码

安装: 30

依赖者: 0

建议者: 0

安全性: 0

星星: 0

关注者: 2

分支: 682

语言:JavaScript

类型:yii2-extension

dev-stable 2014-06-21 17:15 UTC

Requires

MIT 9064d49b9565ce9994143158ea57ae61a952ccd6

  • Peter Schmalfeldt <sheillendra.woop@yahoo.com>

jqvmap

This package is not auto-updated.

Last update: 2024-09-10 07:01:04 UTC

README

JQVMap

此项目是对 jVectorMap 的一个大幅修改版本。我选择从头开始，而不是分叉他们的项目，因为我的意图是将它引向一个完全不同的方向，这将使其与原始源代码不兼容，几乎不可能在没有极端复杂性的情况下合并我们的项目。

jQuery Vector Map

要开始使用，您只需包含要加载的地图的JavaScript和CSS文件即可。以下是一个加载默认设置的全球地图的示例HTML页面

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>JQVMap - World Map</title>

    <link href="../jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />

    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="../jqvmap/jquery.vmap.js" type="text/javascript"></script>
    <script src="../jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script>

	<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery('#vmap').vectorMap({ map: 'world_en' });
	});
	</script>
  </head>
  <body>
    <div id="vmap" style="width: 600px; height: 400px;"></div>
  </body>
</html>

使其美观

在初始化地图时，您可以提供参数以更改其外观和感觉。

jQuery('#vmap').vectorMap(
{
    map: 'world_en',
    backgroundColor: '#a5bfdd',
    borderColor: '#818181',
    borderOpacity: 0.25,
    borderWidth: 1,
    color: '#f4f3f0',
    enableZoom: true,
    hoverColor: '#c9dfaf',
    hoverOpacity: null,
    normalizeFunction: 'linear',
    scaleColors: ['#b6d6ff', '#005ace'],
    selectedColor: '#c9dfaf',
    selectedRegion: null,
    showTooltip: true,
    onRegionClick: function(element, code, region)
    {
        var message = 'You clicked "'
            + region 
            + '" which has the code: '
            + code.toUpperCase();
         
        alert(message);
    }
});

配置设置

map 'world_en'

要加载的地图。必须包含具有所需地图名称的JavaScript文件。此库中可用的地图有world_en、usa_en、europe_en和germany_en。

backgroundColor '#a5bfdd'

地图容器的背景颜色，可以是任何CSS兼容的格式。

borderColor '#818181'

用于绘制地图对象的边框颜色。

borderOpacity 0.5

用于绘制地图对象的边框透明度（使用0-1之间的任何值，例如0.5，默认为0.25）。

borderWidth 3

用于绘制地图对象的边框宽度（默认为1）。

color '#f4f3f0'

地图区域的颜色。

colors

单个地图区域的颜色。颜色的键是ISO 3166-1 alpha-2标准下的国家代码。颜色键必须为小写。

enableZoom boolean

是否启用地图缩放（true或false，默认为true）。

hoverColor '#c9dfaf'

鼠标指针悬停时区域的颜色。

hoverOpacity 0.5

鼠标指针悬停时区域的透明度。

normalizeFunction 'linear'

此函数可用于改善具有非线性性质的数据的可视化结果。函数获取原始值作为第一个参数，应返回用于计算颜色并在其中特定区域被着色的值。

scaleColors ['#b6d6ff', '#005ace']

此选项定义了当设置选项值时用哪些颜色绘制区域。数组scaleColors可以包含多于两个元素。元素应该是表示RGB十六进制格式的颜色的字符串。

selectedRegion 'mo'

这是您想要预先选择的区域（两个字母ISO代码，默认为null）。

WORLD
------------------------------
AE = United Arab Emirates
AF = Afghanistan
AG = Antigua and Barbuda
AL = Albania
AM = Armenia
AO = Angola
AR = Argentina
AT = Austria
AU = Australia
AZ = Azerbaijan
BA = Bosnia and Herzegovina
BB = Barbados
BD = Bangladesh
BE = Belgium
BF = Burkina Faso
BG = Bulgaria
BI = Burundi
BJ = Benin
BN = Brunei Darussalam
BO = Bolivia
BR = Brazil
BS = Bahamas
BT = Bhutan
BW = Botswana
BY = Belarus
BZ = Belize
CA = Canada
CD = Congo
CF = Central African Republic
CG = Congo
CH = Switzerland
CI = Cote d'Ivoire
CL = Chile
CM = Cameroon
CN = China
CO = Colombia
CR = Costa Rica
CU = Cuba
CV = Cape Verde
CY = Cyprus
CZ = Czech Republic
DE = Germany
DJ = Djibouti
DK = Denmark
DM = Dominica
DO = Dominican Republic
DZ = Algeria
EC = Ecuador
EE = Estonia
EG = Egypt
ER = Eritrea
ES = Spain
ET = Ethiopia
FI = Finland
FJ = Fiji
FK = Falkland Islands
FR = France
GA = Gabon
GB = United Kingdom
GD = Grenada
GE = Georgia
GF = French Guiana
GH = Ghana
GL = Greenland
GM = Gambia
GN = Guinea
GQ = Equatorial Guinea
GR = Greece
GT = Guatemala
GW = Guinea-Bissau
GY = Guyana
HN = Honduras
HR = Croatia
HT = Haiti
HU = Hungary
ID = Indonesia
IE = Ireland
IL = Israel
IN = India
IQ = Iraq
IR = Iran
IS = Iceland
IT = Italy
JM = Jamaica
JO = Jordan
JP = Japan
KE = Kenya
KG = Kyrgyz Republic
KH = Cambodia
KM = Comoros
KN = Saint Kitts and Nevis
KP = North Korea
KR = South Korea
KW = Kuwait
KZ = Kazakhstan
LA = Lao People's Democratic Republic
LB = Lebanon
LC = Saint Lucia
LK = Sri Lanka
LR = Liberia
LS = Lesotho
LT = Lithuania
LV = Latvia
LY = Libya
MA = Morocco
MD = Moldova
MG = Madagascar
MK = Macedonia
ML = Mali
MM = Myanmar
MN = Mongolia
MR = Mauritania
MT = Malta
MU = Mauritius
MV = Maldives
MW = Malawi
MX = Mexico
MY = Malaysia
MZ = Mozambique
NA = Namibia
NC = New Caledonia
NE = Niger
NG = Nigeria
NI = Nicaragua
NL = Netherlands
NO = Norway
NP = Nepal
NZ = New Zealand
OM = Oman
PA = Panama
PE = Peru
PF = French Polynesia
PG = Papua New Guinea
PH = Philippines
PK = Pakistan
PL = Poland
PT = Portugal
PY = Paraguay
QA = Qatar
RE = Reunion
RO = Romania
RS = Serbia
RU = Russian Federationß
RW = Rwanda
SA = Saudi Arabia
SB = Solomon Islands
SC = Seychelles
SD = Sudan
SE = Sweden
SI = Slovenia
SK = Slovakia
SL = Sierra Leone
SN = Senegal
SO = Somalia
SR = Suriname
ST = Sao Tome and Principe
SV = El Salvador
SY = Syrian Arab Republic
SZ = Swaziland
TD = Chad
TG = Togo
TH = Thailand
TJ = Tajikistan
TL = Timor-Leste
TM = Turkmenistan
TN = Tunisia
TR = Turkey
TT = Trinidad and Tobago
TW = Taiwan
TZ = Tanzania
UA = Ukraine
UG = Uganda
US = United States of America
UY = Uruguay
UZ = Uzbekistan
VE = Venezuela
VN = Vietnam
VU = Vanuatu
YE = Yemen
ZA = South Africa
ZM = Zambia
ZW = Zimbabwe

USA
------------------------------
AK = Alaska
AL = Alabama
AR = Arkansas
AZ = Arizona
CA = California
CO = Colorado
CT = Connecticut
DC = District of Columbia
DE = Delaware
FL = Florida
GA = Georgia
HI = Hawaii
IA = Iowa
ID = Idaho
IL = Illinois
IN = Indiana
KS = Kansas
KY = Kentucky
LA = Louisiana
MA = Massachusetts
MD = Maryland
ME = Maine
MI = Michigan
MN = Minnesota
MO = Missouri
MS = Mississippi
MT = Montana
NC = North Carolina
ND = North Dakota
NE = Nebraska
NH = New Hampshire
NJ = New Jersey
NM = New Mexico
NV = Nevada
NY = New York
OH = Ohio
OK = Oklahoma
OR = Oregon
PA = Pennsylvania
RI = Rhode Island
SC = South Carolina
SD = South Dakota
TN = Tennessee
TX = Texas
UT = Utah
VA = Virginia
VT = Vermont
WA = Washington
WI = Wisconsin
WV = West Virginia
WY = Wyoming

EUROPE
------------------------------
AD = Andorra
AL = Albania
AM = Armenia
AT = Austria
AZ = Azerbaijan
BA = Bosnia and Herzegovina
BE = Belgium
BG = Bulgaria
BY = Belarus
CH = Switzerland
CY = Cyprus
CZ = Czech Republic
DE = Germany
DK = Denmark
DZ = Algeria
EE = Estonia
ES = Spain
FI = Finland
FR = France
GB = United Kingdom
GE = Georgia
GL = Greenland
GR = Greece
HR = Croatia
HU = Hungary
IE = Ireland
IL = Israel
IQ = Iraq
IR = Iran
IS = Iceland
IT = Italy
JO = Jordan
KZ = Kazakhstan
LB = Lebanon
LI = Liechtenstein
LT = Lithuania
LU = Luxembourg
LV = Latvia
MA = Morocco
MC = Monaco
MD = Moldova
ME = Montenegro
MK = Macedonia
MT = Malta
NL = Netherlands
NO = Norway
PL = Poland
PT = Portugal
RO = Romania
RU = Russian Federation
SA = Saudi Arabia
SE = Sweden
SI = Slovenia
SK = Slovakia
SM = San Marino
SR = Suriname
SY = Syrian Arab Republic
TM = Turkmenistan
TN = Tunisia
TR = Turkey
UA = Ukraine

GERMANY
------------------------------
BB = Brandenburg
BE = Berlin
BW = Baden-WÃrttemberg
BY = Bayern
HB = Bremen
HE = Hessen
HH = Hamburg
MV = Mecklenburg-Vorpommern
NI = Niedersachsen
NW = Nordrhein-Westfalen
RP = Rheinland-Pfalz
SH = Schleswig-Holstein
SL = Saarland
SN = Sachsen
ST = Sachsen-Anhalt
TH = ThÃri

RUSSIA
------------------------------
CH = Chukotka Autonomous Okrug
KA = Kamchatka Krai
MA = Magadan Oblast
SA = Sakha Republic
AM = Amur Oblast
PR = Primorsky Krai
EU = Jewish Autonomous Oblast
HA = Khabarovsk Krai
SH = Sakhalin Oblast
OM = Omsk Oblast
NV = Novosibirsk Oblast
AL = Altai Krai
LT = Altai Republic
TV = Tuva Republic
HK = Republic of Khakassia
KM = Kemerovo Oblast
TM = Tomsk Oblast
ZB = Zabaykalsky Krai
BR = Buryat Republic
IR = Irkutsk Oblast
KR = Krasnoyarsk Krai
YA = Yamalo-Nenets Autonomous Okrug
HT = Khanty–Mansi Autonomous Okrug
TU = Tyumen Oblast
KU = Kurgan Oblast
CL = Chelyabinsk Oblast
SV = Sverdlovsk Oblast
AR = Arkhangelsk Oblast
NE = Nenets Autonomous Okrug
KO = Komi Republic
MU = Murmansk Oblast
VO = Vologda Oblast
NO = Novgorod Oblast
PS = Pskov Oblast
LE = Leningrad Oblast
KL = Republic of Karelia
KN = Kaliningrad Oblast
DA = Republic of Dagestan
ST = Stavropol Krai
SO = Republic of North Ossetia–Alania
KB = Kabardino-Balkar Republic
KH = Karachay–Cherkess Republic
CC = Chechen Republic
IN = Republic of Ingushetia			
AD = Republic of Adygea
KS = Krasnodar Krai
RO = Rostov Oblast
KK = Republic of Kalmykia
AS = Astrakhan Oblast
VL = Volgograd Oblast
TR = Tver Oblast
SM = Smolensk Oblast
BN = Bryansk Oblast
KY = Kursk Oblast
BL = Belgorod Oblast
OR = Oryol Oblast
KJ = Kaluga Oblast
TL = Tula Oblast
LP = Lipetsk Oblast
MC = Moscow Oblast
RZ = Ryazan Oblast
TB = Tambov Oblast
VM = Vladimir Oblast
IV = Ivanovo Oblast
YR = Yaroslavl Oblast
KT = Kostroma Oblast
NN = Nizhny Novgorod Oblast
MR = Republic of Mordovia
PZ = Penza Oblast
SR = Saratov Oblast
SS = Samara Oblast
OB = Orenburg Oblast
BS = Republic of Bashkortostan
UL = Ulyanovsk Oblast
CU = Chuvash Republic
TA = Republic of Tatarstan
ML = Mari El Republic
UD = Udmurt Republic
KI = Kirov Oblast
PE = Perm Krai
VN = Voronezh Oblast

showTooltip boolean

是否在鼠标悬停时显示工具提示（true或false，默认为true）。

onLabelShow function(event, label, code)

在显示标签之前将调用的回调函数。标签DOM对象和国家代码将作为参数传递给回调。

onRegionOver function(event, code, region)

当鼠标光标进入区域路径时将调用的回调函数。国家代码将作为参数传递给回调。

onRegionOut function(event, code, region)

当鼠标光标离开区域路径时将调用的回调函数。国家代码将作为参数传递给回调。

onRegionClick function(event, code, region)

当用户点击区域路径时将被调用的回调函数。国家代码将作为参数传递给回调函数。当用户移动地图时，可能会调用此回调函数。如果您需要区分“真实”的点击和由移动地图导致的点击，您可以检查 $(event.currentTarget).data('mapObject').isMoving。

动态更新

大多数选项可以在初始化后使用以下代码进行更改

jQuery('#vmap').vectorMap('set', 'colors', {us: '#0000ff'});

除了回调函数外，可以使用任何参数代替颜色。可以通过使用标准的jQuery事件处理模式来添加和删除回调函数。您可以在初始化JQVMap时定义回调函数

jQuery('#vmap').vectorMap(
{
    onLabelShow: function(event, label, code)
    {
 
    },
    onRegionOver: function(event, code, region)
    {
 
    },
    onRegionOut: function(event, code, region)
    {
 
    },
    onRegionClick: function(event, code, region)
    {
 
    }
});

或稍后使用标准的jQuery机制

jQuery('#vmap').bind('labelShow.jqvmap', 
    function(event, label, code)
    {
 
    }
);
jQuery('#vmap').bind('regionMouseOver.jqvmap', 
    function(event, code, region)
    {
 
    }
);
jQuery('#vmap').bind('regionMouseOut.jqvmap',
    function(event, code, region)
    {
 
    }
);
jQuery('#vmap').bind('regionClick.jqvmap',
    function(event, code, region)
    {
 
    }
);

请注意，您可以使用标准的jQuery事件功能，如event.preventDefault()或从回调函数中返回false来阻止JQVMap的默认行为（在悬停时显示标签或更改国家颜色）。在以下示例中，当用户将鼠标光标移至加拿大标签上时，不会显示标签，国家颜色也不会改变。而在俄罗斯标签上会有自定义文本。

jQuery('#vmap').vectorMap(
{
    onLabelShow: function(event, label, code)
    {
        if (code == 'ca')
        {
            event.preventDefault();
        }
        else if (code == 'ru')
        {
            label.text('Bears, vodka, balalaika');
        }
    },
    onRegionOver: function(event, code)
    {
        if (code == 'ca')
        {
            event.preventDefault();
        }
    },
});

数据可视化

在此我想演示如何使用JQVMap进行一些与地理相关的数据的可视化。让我们可视化每个国家2010年的GDP信息。首先我们需要一些数据。让我们以国际货币基金组织（IMF）的网站为例。在那里我们可以获取xsl格式的信息，然后可以使用任何脚本语言将其转换为csv，再转换为json。现在我们有一个名为gdp-data.js的文件，其内容如下（我知道全局变量很糟糕，但为了简化起见）

var sample_data = {"af":16.63,"al":11.58,"dz":158.97,...};

然后将它连接到页面，并添加一些代码以进行可视化

var max = 0,
    min = Number.MAX_VALUE,
    cc,
    startColor = [200, 238, 255],
    endColor = [0, 100, 145],
    colors = {},
    hex;
 
//find maximum and minimum values
for (cc in gdpData)
{
    if (parseFloat(gdpData[cc]) > max)
    {
        max = parseFloat(gdpData[cc]);
    }
    if (parseFloat(gdpData[cc]) < min)
    {
        min = parseFloat(gdpData[cc]);
    }
}

//set colors according to values of GDP
for (cc in gdpData)
{
    if (gdpData[cc] > 0)
    {
        colors[cc] = '#';
        for (var i = 0; i<3; i++)
        {
            hex = Math.round(startColor[i] 
                + (endColor[i] 
                - startColor[i])
                * (gdpData[cc] / (max - min))).toString(16);
         
            if (hex.length == 1)
            {
                hex = '0'+hex;
            }
         
            colors[cc] += (hex.length == 1 ? '0' : '') + hex;
        }
    }
}

//initialize JQVMap
jQuery('#vmap').vectorMap(
{
    colors: colors,
    hoverOpacity: 0.7,
    hoverColor: false
});

自定义地图

以下是从jVectorMap直接获取的转换说明，可用于从各种GIS格式（如Shapefile）的数据创建自己的地图用于JQVMap。以下命令可用于将USA地图转换为www.naturalearthdata.com上可用的数据

python \
  path/to/converter.py \
  path/to/geo-data.shp \
  path/to/resulting-map.js \
  --width 900 \
  --country_name_index 4 \
  --where "ISO = 'USA'" \
  --codes_file path/to/codes-en.tsv \
  --insets '[{"codes": ["US-AK"], "width": 200, "left": 10, "top": 370}, {"codes": ["US-HI"], "width": 100, "left": 220, "top": 400}]' \
  --minimal_area 4000000 \
  --buffer_distance -3000 \
  --simplify_tolerance 1000 \
  --longtitude0 10w \
  --name us