jVectorMap 将 setFocus 上的地图缩放或缩放到区域代码

Question

当我将焦点设置到特定区域时，地图放大太多，我想把它调大一点。这是代码：

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

其中 code 是国家代码，如 'AF'、'UK'、'IT' 等...

我试过类似的方法，但完全被忽略了：

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

有没有办法在缩放到某个区域时设置不同的缩放级别？

Answer 1

是的，它将被忽略，因为您提供的是地区代码。当您在缩放选项中提供一个或多个 region 代码时，库将根据 bounding box 自动计算缩放系数region(s) 以便此边界框完全适合地图容器。

如果您需要设置自定义缩放系数，恕我直言，最简单的方法是指定 lat/lng 对，即如下所示：

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

或者，如果您没有要缩放到的点，并且需要缩放到区域，您可以获取此[=27的边界框的中心=]region 并使用那个 center-point 作为你的 zoom-to point:

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});

Here is the DEMO:

$(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>

jVectorMap 将 setFocus 上的地图缩放或缩放到区域代码

jVectorMap scale or zoom the map on setFocus to region code

javascript

jvectormap