API/geoLineLayer.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../lib/css/Map5.min.css">
<script type="text/javascript" src="../lib/Map5.min.js"></script>

<style type="text/css">
	body{
		margin: 0px;
	}
</style>
<script type="text/javascript">
	// 地图变量
	var mapObj = null;
	function  init(){
		
		// 地图的范围
		var extent = new GeoBeans.Envelope(-180,-90,180,90);
		
		// 地图的容器为"mapDiv",地图名称"map"，地图范围，地图的空间参考，4326为经纬度
		mapObj = new GeoBeans.Map("mapDiv","map",extent,4326);
		if(mapObj == null){
			return;
		}
		
		// 定义一个QuadServer图层，作为底图，第一个参数为图层名称，第二个参数为QuadServer地址
		var layer = new GeoBeans.Layer.QSLayer("base","/QuadServer/maprequest?services=world_vector");

		// 添加图层
		mapObj.addLayer(layer);

		// 设置中心点
		var center = new GeoBeans.Geometry.Point(0,0);	
		mapObj.setCenter(center);

		// 设置级别
		mapObj.setLevel(3);	

		// 绘图
		mapObj.draw();
	}


	function addLayer(){
		// 1、定义图层明恒
		var name = "geoline";

		// 2、定义数据
		var data = [{
			from : new GeoBeans.Geometry.Point(116.4551,40.253),
			to : new GeoBeans.Geometry.Point(91.1865,30.1465),
			value : 10
		},{
			from : new GeoBeans.Geometry.Point(116.4551,40.253),
			to : new GeoBeans.Geometry.Point(108.479,23.1152),
			value : 10
		}];

		// 3、定义点样式
		var pointSymbolizer = new GeoBeans.Symbolizer.PointSymbolizer();
		pointSymbolizer.size = 4;
		var color = new GeoBeans.Color();
		color.setByHex("#ff0000",1);
		pointSymbolizer.fill.color = color;
		pointSymbolizer.stroke = null;

		// 4、定义线样式
		var lineSymbolizer = new GeoBeans.Symbolizer.LineSymbolizer();
		var color = new GeoBeans.Color();
		color.setByHex("#A6C84C",1);
		lineSymbolizer.stroke.color = color;
		lineSymbolizer.fill = null;

		// 5、定义参数
		var option = {
			curveness : 0.2,	 				// 曲率，若曲率为0，则为直线
			mapDelta : 4, 						//按照秒走的距离
			symbolizer : lineSymbolizer,		//贝塞尔曲线的样式
			pointSymbolizer : pointSymbolizer ,	// 动态迁移点的样式
			trailLength : 0.2 , 				//拖尾比例
		};

		// 6、定义一个图层
		var layer = new GeoBeans.Layer.GeoLineLayer(name,data,option);

		// 7、添加图层
		mapObj.addLayer(layer);

		// 8、绘制
		mapObj.draw();		
	}

</script>
<title>Map5 -- 动态迁移图</title>
<body onload="init()">
	<!-- mapDiv 为初始化地图的容器，给定高度和宽度，并指定定位方式为绝对定位 -->
	<div id="mapDiv" style="height:800px;width:100%;position:absolute;top:80px;">
	</div>
	<button onclick="addLayer()">加载</button>
	
</body>
	