vue如何集成raphael.js中国地图的方法示例

前言

raphael.js是一个很小的javascript库，它可以在网页中实现绘制各种矢量图、各类图表、以及图像裁剪、旋转、运动动画等等功能。此外raphael.js还跨浏览器兼容，而且还兼容老掉牙的IE6啊。raphael.js的官网地址： http://raphaeljs.com/

因为最近的项目要用到中国地图，我需要的比较轻量级，所以没用echarts，选择的这个地图。

效果图

方法如下：

1、安装

npm install --save raphael

2、直接上代码

<template>
 <div id="map">
 </div>
</template>
<script>
 import Raphael from 'raphael';
 export default {
 name: 'china_map',
 data(){
 return{
 china: [] }
 },
 mounted(){
 var R = Raphael("map", 800, 600);
 R.setViewBox(0,0,600,500);
 //调用绘制地图方法
 this.paintMap(R);
 var textAttr = {
 "fill": "#000",
 "font-size": "12px",
 "cursor": "pointer"
 };
 var _china = this.china;
 for (var state in _china) {
 this.china[state]['path'].color = Raphael.getColor(0.9);
 ((st, state) => {
 //获取当前图形的中心坐标
 var xx = st.getBBox().x + (st.getBBox().width / 2);
 var yy = st.getBBox().y + (st.getBBox().height / 2);
 //***修改部分地图文字偏移坐标
 switch (this.china[state]['name']) {
 case "江苏":
 xx += 5;
 yy -= 10;
 break;
 case "河北":
 xx -= 10;
 yy += 20;
 break;
 case "天津":
 xx += 10;
 yy += 10;
 break;
 case "上海":
 xx += 10;
 break;
 case "广东":
 yy -= 10;
 break;
 case "澳门":
 yy += 10;
 break;
 case "香港":
 xx += 20;
 yy += 5;
 break;
 case "甘肃":
 xx -= 40;
 yy -= 30;
 break;
 case "陕西":
 xx += 5;
 yy += 10;
 break;
 case "内蒙古":
 xx -= 15;
 yy += 65;
 break;
 default:
 }
 //写入文字
 this.china[state]['text'] = R.text(xx, yy, this.china[state]['name']).attr(textAttr);
 st[0].onmouseover = function () {
 st.animate({fill: st.color, stroke: "#eee"}, 500);
 _china[state]['text'].toFront();
 };
 st[0].onmouseout = function () {
 st.animate({fill: "#97d6f5", stroke: "#eee"}, 500);
 _china[state]['text'].toFront();
 };
 st[0].onclick = function () {
 console.log(_china[state]['name']);
 };
 })(this.china[state]['path'], state);
 }
 },
 methods: {
 paintMap (R) {
 var attr = {
 "fill": "#97d6f5",
 "stroke": "#eee",
 "stroke-width": 1,
 "stroke-linejoin": "round"								 
 1/10    1 2 3 4 5 6 下一页 尾页