jVectorMap масштабировать или масштабировать карту на setFocus, чтобы код региона

87
7

Когда я устанавливаю фокус на определенную область, карта слишком сильно увеличивается, я бы хотел, чтобы она была более широкой. Это код:

var mapObj = $("#vmap").vectorMap("get", "mapObject");
mapObj.setFocus({ region: code, animate: true });

где код - это код страны, такой как "AF", "UK", "IT" и т.д.

Я пробовал что-то вроде этого, но это полностью игнорируется:

mapObj.setFocus({ region: code, animate: true, scale: 1.9 });

Есть ли способ установить другой уровень масштабирования при масштабировании региона?

спросил(а) 2021-01-28T01:44:29+03:00 3 месяца, 1 неделя назад
1
Решение
98

Да, он будет проигнорирован, потому что Вы предоставляете код региона. Когда вы предоставляете один или несколько кодов регионов в опциях масштабирования, библиотека автоматически рассчитает коэффициент масштабирования на основе ограничивающего прямоугольника этого региона, чтобы этот ограничивающий прямоугольник идеально помещался в контейнере карты.

Если вам нужно установить пользовательский коэффициент масштабирования, IMHO, самый простой способ - указать пару широта/долгота, т.е. что-то вроде этого:

var zoomSettings = {scale: 3, lat: 41.915720, lng: 12.438120, animate: true};
mapObj.setFocus(zoomSettings);

В качестве альтернативы, если у вас нет точки для увеличения и вам необходимо увеличить область, вы можете получить центр ограничительной рамки этой области и использовать эту центральную точку в качестве точки увеличения:

var regionBBox = mapObj.regions[code].element.shape.getBBox();
var normalizedRegionCX = (regionBBox.x + regionBBox.width / 2) / mapObj.defaultWidth;
var normalizedRegionCY = (regionBBox.y + regionBBox.height / 2) / mapObj.defaultHeight;
mapObj.setFocus({x: normalizedRegionCX, y: normalizedRegionCY, scale: 1.9, animate: true});

Вот ДЕМО:

$(document).ready(function () {
function listRegionNames(map) {
var options = "";
$.each(jvm.Map.maps[map].paths, function(index, value) {
options += '<option value="' + index + '">' + value.name + '</option>';
});
$("#regions").html(options).change(function() {
var mapObj = $("#map").vectorMap("get", "mapObject");
mapObj.clearSelectedRegions();
mapObj.setSelectedRegions(this.value);
mapObj.setFocus({scale: 1, x: 0.5, y: 0.5, animate: false});
customZoomToRegion(mapObj, this.value, 0.01 * $("#factor").val());
});
}
function customZoomToRegion(map, code, factor) {
var bBox = map.regions[code].element.shape.getBBox();
var normRCX = (bBox.x + 0.5 * bBox.width)/map.defaultWidth;
var normRCY = (bBox.y + 0.5 * bBox.height)/map.defaultHeight;
var scale = Math.min(map.defaultWidth/bBox.width, map.defaultHeight/bBox.height);
map.setFocus({x: normRCX, y: normRCY, scale: scale * factor, animate: true});
}
var map = "world_mill_en";
listRegionNames(map);
$("#map").vectorMap({
map: map,
zoomMax: 100,
regionsSelectable: true,
onRegionClick: function(e, code, isSelected, selectedRegions){
var mapObj = $("#"+e.target.parentElement.id).vectorMap("get", "mapObject");
mapObj.clearSelectedRegions();
mapObj.setFocus({scale: 1, x: 0.5, y: 0.5, animate: false});
customZoomToRegion(mapObj, code, 0.01 * $("#factor").val());
return true;
}
});
});
<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>
Zoom to: <select id="regions"></select>
Factor: 0.2<input id="factor" type="range" min="20" max="100" value="50">1.0
<hr>
<div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>

ответил(а) 2021-01-28T01:44:29+03:00 3 месяца, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема