SVG转viewBox坐标

Question

我正在使用JQVMAP生成一些美国地图。该插件有一个onRegionClick回调。我试图在这个函数中放大到点击的状态。我对如何将返回给我的onClick的SVG path转换成viewBox坐标有了一个想法，然而，我在转换时遇到了问题。这是我到目前为止所拥有的。

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#vmap').vectorMap(
    {
        map: 'usa_en',
        backgroundColor: '#a5bfdd',
        borderColor: '#818181',
        borderOpacity: .50,
        borderWidth: 1,
        color: '#f4f3f0',
        enableZoom: false,
        hoverColor: '#c9dfaf',
        hoverOpacity: null,
        normalizeFunction: 'linear',
        scaleColors: ['#b6d6ff', '#005ace'],
        selectedColor: '#c9dfaf',
        selectedRegion: null,
        showTooltip: true,
        onRegionClick: function(element, code, region)
        {
            //$('#vmap > svg')[0].setAttribute('viewBox', vmlPath);
            console.log(region.path);
            console.log(region.name);
        }
    });
});
</script>

Link to live demo。如何将SVG路径转换为viewBox坐标？我这样做对吗？或者有更好的方法来做这件事？我的最终目标是放大状态onRegionClick。

Answer 1

你想要实现的目标是极其困难的。SVG路径(特别是您正在处理的路径的大小)很难解析。您可以从路径中解析出的最有意义的内容可能是第一个值(值之间用逗号分隔)。该值将以"M“或"m”开头。小写字母m是相对起点，大写字母M是绝对起点。

也就是说，一旦你知道路径的起点，你就可以开始设置你的viewBox了。但是，您仍然不知道路径的宽度和高度(德克萨斯路径比罗德岛路径大)。因此，您可以设置viewBox的起始点，但不知道它有多大，解析出该信息将是一场噩梦！

最好的方法是自己找出每个州的viewBox是什么，并将其包含在每个州的jquery.vmap.usa.js对象信息中。因此每个对象都有一个路径、一个名称和一个viewBox。然后，您可以通过调用region.viewBox在onRegionClick事件中获取它。

除此之外，这是我能想到的最好的：

var showAll = false;
    jQuery(document).ready(function () {
        jQuery('#vmap').vectorMap(
    {
        map: 'usa_en',
        backgroundColor: '#a5bfdd',
        borderColor: '#818181',
        borderOpacity: .50,
        borderWidth: 1,
        color: '#f4f3f0',
        enableZoom: false,
        hoverColor: '#c9dfaf',
        hoverOpacity: null,
        normalizeFunction: 'linear',
        scaleColors: ['#b6d6ff', '#005ace'],
        selectedColor: '#c9dfaf',
        selectedRegion: null,
        showTooltip: true,
        onRegionClick: function (element, code, region) {
            $('path').each(function () {
                if (showAll) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
            if (showAll) { showAll = false; } else { showAll = true; }

            var id = '#jqvmap1_' + code;
            $(id).show();
        }
    });
    });

Answer 2

您可以只使用jVectorMap，jqvmap就是从它派生而来的。它的API有focusOn方法，可以缩放到地图上的指定区域。区域可以由坐标或区域代码指定。