使用jqv映射在svg映射上写州名 [英] Write state name on svg map using jqv map

问题描述

我已经使用 .看 jqvmap.com

I have created USA states map using jqvmap . See jqvmap.com

我想在地图中间写下州名，如下图所示.

I want to write state names in middle of map like image below.

我尝试使用伪元素，但是它不起作用.

I have tried using pseudo elements but its not working.

这是我的代码.

jQuery(document).ready(function () {
                jQuery('#vmap').vectorMap({
                    map: 'usa_en',
                    enableZoom: false,
                    showTooltip: true,
                    backgroundColor: '#D9D9D9',
                    color: '#009F45',
                    borderColor: '#ffffff',
                    borderOpacity: 0.25,
                    borderWidth: 2,
                    hoverColor: '#999999',
                    selectedColor: '#0077aa',
                    selectedRegion: 'MO',
                    onRegionClick: function (element, code, region)
                    {
                        var message = 'You clicked "'
                                + region
                                + '" which has the code: '
                                + code.toUpperCase();
                        alert(message);
                    }

                });

            });

/*!
 * jQVMap Version 1.0 
 *
 * http://jqvmap.com
 *
 * Copyright 2012, Peter Schmalfeldt <[e-mail]>
 * Licensed under the MIT license.
 *
 * Fork Me @ https://github.com/manifestinteractive/jqvmap
 */
.jqvmap-label
{
    position: absolute;
    display: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #292929;
    color: white;
    font-family: sans-serif, Verdana;
    font-size: smaller;
    padding: 3px;
}
.jqvmap-zoomin, .jqvmap-zoomout
{
    position: absolute;
    left: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #000000;
    padding: 3px;
    color: white;
    width: 10px;
    height: 10px;
    cursor: pointer;
    line-height: 10px;
    text-align: center;
}
.jqvmap-zoomin
{
    top: 10px;
}
.jqvmap-zoomout
{
    top: 30px;
}
.jqvmap-region
{
    cursor: pointer;
}
.jqvmap-ajax_response
{
    width: 100%;
    height: 500px;
}

/*Colors of state*/

path#jqvmap1_nj{
    fill:#7AC37A;
}

path#jqvmap1_tn{
    fill:#7AC37A;
}

path#jqvmap1_in{
    fill:#7AC37A;
}

path#jqvmap1_co{
    fill:#7AC37A;
}

path#jqvmap1_ca{
    fill:#026E38;
}
path#jqvmap1_ca:after{
    content:'ca';
    position: absolute;
    top: 0;
    color:#fff;
}

path#jqvmap1_ak{
    fill:#6E6F73;
}

path#jqvmap1_tx{
    fill:#6E6F73;
}

path#jqvmap1_ar{
    fill:#6E6F73;
}

path#jqvmap1_la{
    fill:#6E6F73;
}

path#jqvmap1_al{
    fill:#6E6F73;
}

path#jqvmap1_nh{
    fill:#6E6F73;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://jqvmap.com/js/vmap/jquery.vmap.js"></script>
<script src="https://jqvmap.com/js/vmap/jquery.vmap.usa.js"></script>
<div id="vmap" style="width: 600px; height: 400px;"></div>

推荐答案

首先，jqvmap中没有内置参数来添加状态代码.

First, there is no built-in parameter in jqvmap to add the states code.

为此标签找到一个好位置并不是一件容易的事.例如，佛罗里达的形状不是凸的，密歇根州有两个部分.

Finding a good position for this labels is not a trivial task. For example, Florida's shape is not convex, Michigan has two parts.

有关Stackexchange网络的一些问题:
-用于查找不规则多边形质心(标签点)的算法
-如何将复合多边形分割为凸多边形?
-将多边形划分为凸形部分

Some questions related on stackexchange network:
- Algorithm for finding irrregular polygon centroid (label point)
- How to split compound polygons into convex polygons?
- Partitioning a polygon into convex parts

因此，我尝试使用虚拟算法放置它们，该算法将状态代码放置在状态形状的种重心上. 然后，您可以根据需要移动它们，并使用已设置的位置.

So, I tried to place them with a dummy algorithm, which places the state code at a kind of centroid of state shapes. Then, you can move them as you want, and use the positions you have set.

这是计算SVG路径的质心的主要功能:

Here is the main function which compute the centroid of a SVG path:

     //svgPathParser => browserified version of
     // https://github.com/hughsk/svg-path-parser
     var parsedPath= svgPathParser(path);

    // pathes in jqvmap are, for the most of them, in the form of [ start Point, [ curves ] ]
    // if you want better results it is possible to refine that.
    var origin= { x: parsedPath[0].x, y: parsedPath[0].y };
    var pathPartCentroids= [];
    var totalLength= 0;
    for( var i=1; i< parsedPath.length - 1; i++){

        var pathPart= parsedPath[i];

        if(pathPart.code !="c")
            break;

        //centroidOfPathPart returns the centroid of a Bezier curve. 
        var pathPartCentroid= centroidOfPathPart([ [0,0], [ pathPart.x1, pathPart.y1 ], [ pathPart.x2, pathPart.y2 ], [ pathPart.x, pathPart.y ] ]); 

        pathPartCentroid.x += origin.x;
        pathPartCentroid.y += origin.y;

        pathPartCentroid={ centroid: pathPartCentroid, distance: norm( pathPartCentroid, origin) } 
        pathPartCentroids.push(pathPartCentroid);

        totalLength+= pathPartCentroid.distance;

        origin.x+= pathPart.x;
        origin.y+= pathPart.y;
    }

    var centroid= {x:0,y:0};

    //segments are weighted by their length 
    pathPartCentroids.forEach(function( pathPart ){
        centroid.x += pathPart.centroid.x * pathPart.distance / totalLength;
        centroid.y += pathPart.centroid.y * pathPart.distance / totalLength;
    });

您可以使用这支笔来编辑位置.
然后使用那另一个在地图中添加州代码.

You can edit position with this pen.
Then use that another one to add state codes in a map.

这篇关于使用jqv映射在svg映射上写州名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！