Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

ctc0911/GeoMap

Open more actions menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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
	},
	...
};

About

JavaScript geoJSON map

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
Morty Proxy This is a proxified and sanitized view of the page, visit original site.