ctc0911/geomap

JavaScript geoJSON map

GeoMap.js

概述

• GeoMap.js是一个绘制矢量地图的sea.js模块，基于jQuery、Raphael，

• 支持geoJSON格式的数据源

• 通过Raphael绘制地图，默认采用svg，低版本IE采用vml，兼容性较好

文件结构

china.json			// **地图数据
geomap.js			// 模块压缩文件
geomap.debug.js	// 模块源文件

使用方法

使用sea.js加载

//需要先加载jquery和raphael模块
var GeoMap = require('(路径)/geomap');

实例化一个GeoMap对象

var map = new GeoMap(element, width, height);
// element: 放置map的位置，支持tagName/#id/.class

渲染一张地图

// 渲染地图的参数
var config = {
	// 数据文件的路径
	srcPath: '../json/china.map.data.json',
	// 缩放比例，x轴和y轴采用不同的缩放比例
	scale:{x:2,y:3}
};

// 渲染地图的回调函数
function callback(){
	// 可以对地图进行操作
}

// 渲染
map.render(config, callback);

操作地图上的地区

// 实例化的GeoMap对象里，拥有一个mapPaths属性，其中记录了当前地图上的所有地区
map.render(function(){
	// 在回调函数中，给各个地区增加鼠标经过事件
	$.each(map.mapPaths, function(k, v){
		
		v.hover(function(){
			this.attr({fill:"#369"});
		});
		
	});
});

画点

// 定义一个点（如果半径大，就是一个圆形）
var oPoint = {
	"x" : 10.1,		// 经度（必须）
	"y" : 100.2,	// 纬度（必须）
	"r" : 1,		// 点的半径
	"opacity" : 0.5,	// 点的透明度
	"fill" : "#238CC3",		// 点的颜色
	"stroke" : "#238CC3",	// 外边框的颜色
	"stroke-width" : 0.1	// 外边框的粗度
};

// 把点画到地图上
var p = map.setPoint(oPoint);	

// 把点删掉
p.remove();

画线

// 数组中的坐标对象就是线段上的各个点
var aPoints = [{x:1,y:2},{x:2,y:3},…];

// 定义一条线
var oLine = {
	"ps": aPoints 			// ps属性就是点数组
	"stroke": "#369"		// 线的颜色
	"stroke-width": 0.5		// 线的粗细
}；

// 把线画出来
var l = map.setLine(oLine);

// 把线删掉
l.remove();

缩放

map.viewScale('up');    // 放大
map.viewScale('down');  // 缩小
// 可以设置两个dom节点作为放大和缩小按钮，用点击事件调用放大和缩小方法
// 在放大状态时，可以拖动地图

平移地图

//在同一张画布上重复渲染不同的地图时，由于地图尺寸比例不一致，造成地图无法自动居中。
//默认情况下，会根据geoJSON的尺寸，自动让地图居左，如果想要让地图居中，需要在渲染地图的设置项里增加translate属性
var config = {
	...
	// x轴偏移1度坐标，y轴不偏移;
	'translate':{
		'x' : 1,
		'y' : 0
	},
	...
};