SVG地图实现技巧

这是学习自我们组的一位机灵的小伙伴。

地图与标签的连线

我们做的大屏，一旦涉及地图，往往需要展示地域排名数据，而大屏又不能通过鼠标点击的方式实现交互，因此一般都是轮播不同地域的信息，播放到某个地区，比如杭州市的时候，就用一根线连接杭州市和页面上的标签区域，展示杭州市的详细数据。

实现的原理就是：

1、用div画一根定长的直线，长度等于标签到地图中心的距离

2、用伪元素在直线末端画一个圆点，用来标注地图中心

3、对直线做一个角度偏转，使其刚好对接上标签和地图中心

看看同事的数据结构会更便于理解：

let gdpData = [
    {name: '余杭区',gdp: 637.7, width: 190,angle: 193},
    {name: '萧山区',gdp: 432.5, width: 325,angle: 191},
    {name: '西湖区',gdp: 358.5, width: 255,angle: 198},
    {name: '滨江区',gdp: 347.8, width: 290,angle: 195.5},
    {name: '上城区',gdp: 306.7, width: 278,angle: 193.5},
    {name: '下城区',gdp: 256.8, width: 267,angle: 188.5},
    {name: '江干区',gdp: 203.3, width: 302,angle: 186},
    {name: '富阳区',gdp: 163.8, width: 265,angle: 219},
    {name: '拱墅区',gdp: 139.9, width: 255,angle: 187},
    {name: '临安区',gdp: 114.5, width: 135,angle: 260},
    {name: '建德市',gdp: 78.7, width: 355,angle: 255},
    {name: '桐庐县',gdp: 72.1, width: 265,angle: 245},
    {name: '淳安县',gdp: 48.3, width: 355,angle: 280},
]