Raphael.js 在vue中使用说明, 以杭州市地图为例

一、Vue中引入raphael.js

  npm install --save raphael

二、组件component中新建，下面为代码

<template>

<div id=”map”></div>

</templete>

 

<script>

             import Raphael from 'raphael';

 

             export default {

                  name: 'china_map',

                  data(){

                       return{

                     china: []

                }

           },

           mounted(){

                varR = Raphael("map", 1000, 700); //设置地图宽高

                R.setViewBox(0,0,600,500);

 

                //调用绘制地图方法

                this.paintMap(R);

 

                vartextAttr ={

                     "fill": "#FFF",

                     "font-size": "8px",

                     "cursor": "pointer",

                 };//地图文字样式

 

                 var_china=this.china;

 

                 for(varstatein_china) {

                      this.china[state]['path'].color=Raphael.getColor(0.9); //填充颜色透明度

 

               ((st, state) => {

 

              //获取当前图形的中心坐标

              varxx=st.getBBox().x+ (st.getBBox().width/2);

              varyy=st.getBBox().y+ (st.getBBox().height/2);

 

              //***修改部分地图文字偏移坐标

              switch (this.china[state]['name']) {

                   case"西湖区":

                         xx-=7; //中心坐标左右偏

                         yy-=10; //中心坐标上下偏

                         break;

                   case"萧山区":

                         xx-=5;

                         yy-=15;

                         break;

                   case"滨江区":

                         xx+=5;

                      yy+=3;

                         break;   

                   case"拱墅区":

                         xx-=5;

                         yy-=3;

                         break;

                   case"下城区":

                         xx+=5;

                         yy-=3;

                         break;

 

                   default:

              }

          //写入文字

          this.china[state]['text'] =R.text(xx, yy