jvectormap 仅显示特定区域的标签
jvectormap show labels only for specific regions
我正在尝试显示我在地图上突出显示的唯一区域的标签。
代码如下:
var map = $('#map').vectorMap({
regionsSelectable: true,
regionsSelectableOne: true,
series: {
regions: [{
scale: ['#cccccc', '#0A6EB4'],
values: data
}]
},
regionStyle: {
initial: {
fill: '#ffffff',
"fill-opacity": 1,
stroke: '#cccccc',
"stroke-width": 0,
"stroke-opacity": 1
},
hover: {
"fill-opacity": 1,
cursor: 'pointer'
},
selected: {
fill: '#0A6EB4'
},
selectedHover: {
fill: '#1E4669'
}
},
regionLabelStyle: {
initial: {
'font-family': 'Verdana',
'font-size': '12',
'font-weight': 'bold',
cursor: 'default',
fill: 'black'
},
hover: {
cursor: 'pointer'
}
},
labels: {
regions: {
render: function (code) {
if (activeCountries.hasOwnProperty(code)) {
var regions = $("#map").vectorMap("get", "mapObject").regions;
console.log(code, regions[code]); //<< ERROR!
}
}
}
}
});
在 labels.regions.render 函数中,我能够获取国家代码,我能够验证数组 activeCountries 中是否存在国家,但是当我尝试检索国家时name (regions[code].config.name) regions[code]未定义,具体代码缺失!
所以我可以显示 activeCountries 数组中存在的区域标签?
这就是我想要实现的目标:
上图是使用Highmaps完成的。
更新
感谢找到解决方案的 deblocker。
现在我只需要找到一种方法来为区域文本添加白色阴影,使其在深色高亮区域也能更好地显示。
那么,我相信您使用的是世界地图,对吗?
有些国家真的太小了,无法在世界地图上以有意义的方式绘制 SVG 路径。
您可以:
- 使用分辨率更高的地图(显然要放大,直到您看到那个小区域)
添加标记轻松定位那个小国家:
{
"BH": {"latLng": [26.066700, 50.557700], "name": "Bahrain"},
"GI": {"latLng": [36.140751, -5.353585], "name": "Gibraltar"},
"HK": {"latLng": [22.284681,114.158177], "name": "Hong Kong"},
"MQ": {"latLng": [14.641528,-61.024174], "name": "Martinique"},
"MT": {"latLng": [35.937496, 14.375416], "name": "Malta"},
"MU": {"latLng": [-20.183590,57.941208], "name": "Mauritius"},
"SG": {"latLng": [1.352083, 103.819836], "name": "Singapore"},
"GP": {"latLng": [16.265000,-61.551000], "name": "Guadeloupe"}
}
如果您需要地图中区域的区域名称,您可以从加载的地图中获取:
Here is the DEMO:
$(document).ready(function () {
var map = "world_mill_en",
regions = {"MN": "#fad"};
$("#map").vectorMap({
map: map,
series: {
regions: [{
values: regions,
attribute: "fill"
}]
},
labels: {
regions: {
render: function(code){
return regions[code] && jvm.Map.maps[map].paths[code].name;
}
}
}
});
});
<html>
<head>
<title>jVectorMap Labels</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css">
<style>
.jvectormap-region.jvectormap-element {
text-shadow: -1px -1px 3px #fff, 1px -1px 3px #fff, -1px 1px 3px #fff, 1px 1px 3px #fff;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>
顺便说一句,感谢 bjornd 伟大的 jVectorMap。
我正在尝试显示我在地图上突出显示的唯一区域的标签。
代码如下:
var map = $('#map').vectorMap({
regionsSelectable: true,
regionsSelectableOne: true,
series: {
regions: [{
scale: ['#cccccc', '#0A6EB4'],
values: data
}]
},
regionStyle: {
initial: {
fill: '#ffffff',
"fill-opacity": 1,
stroke: '#cccccc',
"stroke-width": 0,
"stroke-opacity": 1
},
hover: {
"fill-opacity": 1,
cursor: 'pointer'
},
selected: {
fill: '#0A6EB4'
},
selectedHover: {
fill: '#1E4669'
}
},
regionLabelStyle: {
initial: {
'font-family': 'Verdana',
'font-size': '12',
'font-weight': 'bold',
cursor: 'default',
fill: 'black'
},
hover: {
cursor: 'pointer'
}
},
labels: {
regions: {
render: function (code) {
if (activeCountries.hasOwnProperty(code)) {
var regions = $("#map").vectorMap("get", "mapObject").regions;
console.log(code, regions[code]); //<< ERROR!
}
}
}
}
});
在 labels.regions.render 函数中,我能够获取国家代码,我能够验证数组 activeCountries 中是否存在国家,但是当我尝试检索国家时name (regions[code].config.name) regions[code]未定义,具体代码缺失!
所以我可以显示 activeCountries 数组中存在的区域标签?
这就是我想要实现的目标:
上图是使用Highmaps完成的。
更新 感谢找到解决方案的 deblocker。
现在我只需要找到一种方法来为区域文本添加白色阴影,使其在深色高亮区域也能更好地显示。
那么,我相信您使用的是世界地图,对吗?
有些国家真的太小了,无法在世界地图上以有意义的方式绘制 SVG 路径。
您可以:
- 使用分辨率更高的地图(显然要放大,直到您看到那个小区域)
添加标记轻松定位那个小国家:
{ "BH": {"latLng": [26.066700, 50.557700], "name": "Bahrain"}, "GI": {"latLng": [36.140751, -5.353585], "name": "Gibraltar"}, "HK": {"latLng": [22.284681,114.158177], "name": "Hong Kong"}, "MQ": {"latLng": [14.641528,-61.024174], "name": "Martinique"}, "MT": {"latLng": [35.937496, 14.375416], "name": "Malta"}, "MU": {"latLng": [-20.183590,57.941208], "name": "Mauritius"}, "SG": {"latLng": [1.352083, 103.819836], "name": "Singapore"}, "GP": {"latLng": [16.265000,-61.551000], "name": "Guadeloupe"} }
如果您需要地图中区域的区域名称,您可以从加载的地图中获取:
Here is the DEMO:
$(document).ready(function () {
var map = "world_mill_en",
regions = {"MN": "#fad"};
$("#map").vectorMap({
map: map,
series: {
regions: [{
values: regions,
attribute: "fill"
}]
},
labels: {
regions: {
render: function(code){
return regions[code] && jvm.Map.maps[map].paths[code].name;
}
}
}
});
});
<html>
<head>
<title>jVectorMap Labels</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css">
<style>
.jvectormap-region.jvectormap-element {
text-shadow: -1px -1px 3px #fff, 1px -1px 3px #fff, -1px 1px 3px #fff, 1px 1px 3px #fff;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>
顺便说一句,感谢 bjornd 伟大的 jVectorMap。