raphael.js绘制中国地图 地图绘制方法

最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作。在本文中,我给大家分享如何使用js来完成地图交互。

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

准备工作

我们需要准备一张矢量地图,可以从网上找一张矢量地图,或者使用illustrator绘制一份矢量地图,然后导出为SVG格式的文件,这个文件可以在浏览器上打开,然后提取里面的path路径信息(M开头的坐标)。并将path路径信息,按照chinamapPath.js的格式准备好地图路径信息。

代码如下:

var china = [];

function paintMap(R) {
    var attr = {
        "fill": "#97d6f5",
        "stroke": "#eee",
        "stroke-width": 1,
        "stroke-linejoin": "round"
    };

china.aomen = {
        name: "澳门",
        path: R.path("M413.032,.........省略若干......... ,414.183z").attr(attr)
    }
    china.hk = {
        //格式同上
    };
}

以上是我们将准备好的地图路径信息封装到()函数中,并保存文件名为chinamapPath.js,供后面调用。

HTML

首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件。

代码如下:

<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="chinamapPath.js"></script>

然后在body中需要放置地图的位置放置div#map。
 

代码如下:

<div id="map"></div>

JAVASCRIPT

首先我们在页面中调用地图,方法如下:

代码如下:

window.onload = function () {
    //绘制地图
    var R = Raphael("map", 600, 500);//将地图载入到id为map的div中,并设置区域为600x500px大小。
    paintMap(R);
}

这个时候我们用浏览器打开会显示载入后的地图。接下来我们要给地图中的对应的省份区域加上省份名称,以及鼠标滑向每个省份区块时的变色动画效果。

代码如下:

window.onload = function () {
    var R = Raphael("map", 600, 500);
    //调用绘制地图方法
    paintMap(R);

var textAttr = {
        "fill": "#000",
        "font-size": "12px",
        "cursor": "pointer"
    };

for (var state in china) {
        china[state]['path'].color = Raphael.getColor(0.9);

(function (st, state) {

//获取当前图形的中心坐标
            var xx = st.getBBox().x + (st.getBBox().width / 2);
            var yy = st.getBBox().y + (st.getBBox().height / 2);

//写入文字
            china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr);

st[0].onmouseover = function () {//鼠标滑向
                st.animate({fill: st.color, stroke: "#eee"}, 500);
                china[state]['text'].toFront();
                R.safari();
            };
            st[0].onmouseout = function () {//鼠标离开
                st.animate({fill: "#97d6f5", stroke: "#eee"}, 500);
                china[state]['text'].toFront();
                R.safari();
            };

})(china[state]['path'], state);
    }
}

以上代码中运用了raphael提供的方法有:getColor,getBBox,animate,toFront等等,这些可以在raphael文档中找到使用说明,本文不在讲述。
此外由于地图尺寸原因,有些省份名称在地图中的显示位置不恰当,需要修正偏移量,这样看起来舒服点。

代码如下:

window.onload = function () {
    var R = Raphael("map", 600, 500);
    ...
    for (var state in china) {
        ...
        (function (st, state) {
            ....
            switch (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:
            }
            ...
      })(china[state]['path'], state);
   }
}

(0)

相关推荐

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

    前言 raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图.各类图表.以及图像裁剪.旋转.运动动画等等功能.此外raphael.js还跨浏览器兼容,而且还兼容老掉牙的IE6啊.raphael.js的官网地址: http://raphaeljs.com/ 因为最近的项目要用到中国地图,我需要的比较轻量级,所以没用echarts,选择的这个地图. 效果图 方法如下: 1.安装 npm install --save raphael 2.直接上代码 <template

  • vue基于Vue2.0和高德地图的地图组件实例

    前言 在做基于LBS的应用中,时常会和地图打交道,最直接的解决方案,当然是去对应的地图官网找文档,然后一步步来玩.对于简单场景而言,体验应该还好,但对于一些状态多,变化频繁的复杂场景而言,不仅要时刻维护本地数据状态和地图状态同步,还要查找设置各种状态的地图API,实在是让人头疼的事情. 设计vue-amap的初衷,也就是为了让开发者,在编写地图应用时,能从查找众多地图API和繁琐的地图状态同步中解脱出来. 那么vue-amap是如何做到的,又能给开发者带来怎样的便利与开发体验呢?我们就从一个轻点

  • Raphael带文本标签可拖动的图形实现代码

    最近准备学学Javascript和Raphaël,实现一个可拖动的矩形,另外矩形上还得显示标签.查了一下网上这个东西还比较冷门.Javascript才学没几天,代码估计写的很烂. 复制代码 代码如下: <!doctype html> <html charset="utf-8"> <head> <title>Raphaël - Connectivities</title> <script src="raphael

  • vue调用高德地图实例代码

    一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. 按照官方提供的方法引入 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk 引入有两种方式,一种是页面直接引入 复制代码 代码如下: <script type="text/javascript" src=&q

  • Map.vue基于百度地图组件重构笔记分享

    Map.vue是为iview组件开发的一个基于百度地图的组件,实现了点是否在框内的判断,画多边形覆盖物,添加自定义富文本标记物等功能. 第一步:重构自定义的富文本对象,设置为全局对象. 原代码的富文本对象是声明在addResource这个方法里面的,代码结构非常复杂,在beforeCreate这个钩子函数里面申明为全局的,就可以多次复用,不需要重复声明来了, 否则,每调用一次paintPolygon方法,都要重新声明一次,非常麻烦,效率太低下. 原代码是在父组件中处理好这个富文本对象需要的数据,

  • vue高德地图之玩转周边

    前言:在之前的博客中,有成功引入高德地图,这是以前的地址  vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看  我的github 一 .先看要实现的结果,参考了链家的周边,如图所示.  二 .原理分析 1.引入高德api,这个在之前的博客提到过,vue 调用高德地图. 2.使用地图的周边插件,这是  高德网站的api. AMap.PlaceSearch //地点搜索服务插件,提供某一特定地区的位置查询服务 在插件中的各种方法中选取了searchNearBy的

  • Raphael一个用于在网页中绘制矢量图形的Javascript库

    Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图.饼图.曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作. Raphaël 是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Ex

  • raphael.js绘制中国地图 地图绘制方法

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大家分享如何使用js来完成地图交互. 先简单介绍下raphael.js,raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图.各类图表.以及图像裁剪.旋转.运动动画等等功能.此外raphael.js还跨浏览器兼容,而且还兼容老掉牙的IE6啊.raphael.js的官

  • Python和Perl绘制中国北京跑步地图的方法

    当你在一个城市,穿越大街小巷,跑步跑了几千公里之后,一个显而易见的想法是,我到底和之前比快了多少,跑量有何变化,如果能把在这个城市的所有路线全部画出来,会是怎样的景象呢? 1.数据来源:益动GPS 文章代码比较多,为了不吊人胃口,先看看最终效果: [/code] 首先需要有原始数据信息,手机上众多跑步软件提供了详细的记录,但它们共同的问题是不允许自由导入导出(可能是为了用户粘性吧).因此有一块智能运动手表应该是不二之选.我的是Garmin Fenix3,推荐一下: 益动GPS算是业界良心了,能够

  • Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示

    目录 实现效果 完整代码+详细注释 要点小结 实现效果 完整代码+详细注释 <template> <div class="echart"> <div class="content"> <div id="map_cn"></div> </div> </div> </template> <script> import echarts from

  • vue 使用 echarts 绘制中国地图的实现代码

    1. 插入echarts 所需模块 import echarts from "echarts"; import 'echarts/map/js/china' // 使用中国地图需把China.js文件引入 2. 正式代码部分 //初始化echarts实例 通过传参获取要放置的id名称 var myChart = echarts.init(document.getElementById("容器的id名称")); // 指定图表的配置项和数据 var optionMap

  • Python 使用folium绘制leaflet地图的实现方法

    leaflet为R语言提供了API很好用,这次尝试用Python使用leaflet,需要folium 安装folium pip install folium 一个小例子 import folium import re input = open('C:\\Users\\Administrator\\Desktop\\a.txt','r') text=input.read() list = re.split('\n',text) location = [] for element in list:

  • pyecharts绘制中国2020肺炎疫情地图的实例代码

    近来武汉肺炎肆虐全国,大多人的日常应该是宅在家里.出于好奇,笔者想用Python来绘制中国2020肺炎疫情地图. 本代码采用Python3,需要安装模块:pyecharts和echarts-china-provinces-pypkg. Python代码如下: # -*- coding: utf-8 -*- # author: Jclian91 # time: 2020-01-29 11:37 # -*- coding: utf-8 -*- # author: Jclian91 # time: 2

  • 利用python绘制中国地图(含省界、河流等)

    我们可以使用Basemap这个工具包来实现中国地图的绘制 首先需要加载一些包: import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.basemap import Basemap Basemap包就是气象画图的利器,现在我们就可以愉快的画图了! plt.figure(1) map=Basemap() map.drawcoastlines() plt.title(r'$World\ Map$',fontsize=2

  • Python pyecharts实现绘制中国地图的实例详解

    目录 实例演示 1.pyecharts 1.9.1 版本安装与数据准备 2.添加数据项,默认中国地图显示 常用配置项及参数解析 1.设置是否默认选中 2.设置地图颜色类型是否分段显示 3.缩放平移配置 4.启用和关闭图形标记 5.关闭标签名称显示 6.颜色设置:标签颜色.区域颜色.边框颜色 实例演示 先给大家看下效果图哈. 1.pyecharts 1.9.1 版本安装与数据准备 首先需要安装 pyecharts 库,直接 pip install pyecharts 就好了. 新版本的话不需要单独

随机推荐