JVectorMap 区域名称和聚焦

raid 前端开发

固定区域名称也是新增的功能，在每个区域的中心位置会展示区域的名字，显示固定名称时，悬浮名字会自动关闭。这需要地图数据的支持（<1.3.1版本数据不支持），目前在dist/assets/data/china目录中的区域数据文件都支持此功能。另外使用转化器转化时（jmap-plus-converter）需要确保shapefile中有名字的经纬度。

聚焦是原本支持的功能，配置中指定需要聚焦的区域名称即可，视图初始化时会自动聚焦指定的区域，然后你可以点击缩放看完整地图。

配置

$('#world-map').vectorMap({
  map: 'js_mill_cn',
  // 设置显示区域固定名字，默认为false
  showRegionLabel: true,
  // 设置区域聚焦点
  focusOn: {
    scale: ['35','40']
  }
});

示例代码

<!DOCTYPE html>
<html>
<head>
  <title>jmap-plus example</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <link rel="stylesheet" href="query-jmapplus.min.css" type="text/css"/>
  <script src="js/jquery/jquery.min.js"></script>
  <script src="js/jquery/jquery.mousewheel.min.js"></script>
  <script src="js/jquery-jmapplus.min.js"></script>
  <script src="data/china/jquery-jmapplus-region-js-mill-cn.js"></script>
</head>
<body style="margin:auto">
<div id="world-map" style="width: 100%; height: 400px"></div>
<script>
  $(function () {
    $('#world-map').height($(window).height());
    var _focusRegion = ['35','40'];
    var map = new jvm.WorldMap({
      map: 'js_mill_cn',
      container: $('#world-map'),
      regionStyle: {
        initial: {
          'fill-opacity': 1,
          stroke: 'none',
          'stroke-width': 0,
          'stroke-opacity': 1
        },
        hover: {
          'fill-opacity': 0.8
        },
        selected: {
          fill: '#f5d529'
        },
        selectedHover: {
        }
      },
      showRegionLabel: true,
      focusOn: {
        scale: _focusRegion
      }
    });
    map.setSelectedRegions(_focusRegion);
  });
</script>
</body>
</html>

演示

raid

One thought on “JVectorMap 区域名称和聚焦”

发表评论