API/animation.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(2);	

		// 绘图
		mapObj.draw();
	}

	var movePoint = null;
	function addMovePoint(){
		var point = new GeoBeans.Geometry.Point(0,0);
		var wkt = "LINESTRING (0 0, 10 30, 40 40)";
		var lineString = GeoBeans.Utility.createGeometryFromWKT(wkt);
		var pointSymbolizer = new GeoBeans.Symbolizer.PointSymbolizer();
		pointSymbolizer.fill.color.set(255, 0, 0,1);
		pointSymbolizer.stroke = null;
		pointSymbolizer.size = 6;
		var lineSymbolizer = new GeoBeans.Symbolizer.LineSymbolizer();
		lineSymbolizer.stroke.color.set(0,255, 0,0.6);
		lineSymbolizer.stroke.width = 4;
		var option = {
			pointSymbolizer : pointSymbolizer,
			lineSymbolizer : lineSymbolizer,
			duration : 5000,
			once : false
		};

		var id = "1";
		movePoint = new GeoBeans.MovePoint(id,point,lineString,option);
		mapObj.addMoveObject(movePoint);
		mapObj.draw();
	}


	function beginAnimate(){
		movePoint.start();
	}

	function endAnimate(){
		movePoint.stop();
	}

	function removeMovePoint(){
		mapObj.removeMoveObject("1");
	}

	// function addMovePoint_2(){
	// 	var point = new GeoBeans.Geometry.Point(0,0);
	// 	var wkt = "LINESTRING (80 22, 44 30, 90 -60)";
	// 	var lineString = GeoBeans.Utility.createGeometryFromWKT(wkt);
	// 	var pointSymbolizer = new GeoBeans.Symbolizer.PointSymbolizer();
	// 	pointSymbolizer.fill.color.set(122, 46, 0,1);
	// 	pointSymbolizer.stroke.color.set(0,255, 0,0);
	// 	pointSymbolizer.size = 6;
	// 	var lineSymbolizer = new GeoBeans.Symbolizer.LineSymbolizer();
	// 	lineSymbolizer.stroke.color.set(0,255, 0,0.6);
	// 	lineSymbolizer.stroke.width = 4;
	// 	var option = {
	// 		pointSymbolizer : pointSymbolizer,
	// 		lineSymbolizer : lineSymbolizer,
	// 		duration : 5000,
	// 		once : false
	// 	};

	// 	var id = "2";
	// 	movePoint = new GeoBeans.MovePoint(id,point,lineString,option);
	// 	mapObj.addMoveObject(movePoint);
	// 	mapObj.draw();
	// }

	// function beginAnimate_2(){
	// 	var movePoint = mapObj.getMoveObject("2");
	// 	if(movePoint != null){
	// 		movePoint.start();
	// 	}
	// }

	// function endAnimate_2(){
	// 	var movePoint = mapObj.getMoveObject("2");
	// 	if(movePoint != null){
	// 		movePoint.stop();
	// 	}
	// }

	// function removeMovePoint_2(){
	// 	mapObj.removeMoveObject("2");
	// }
</script>
<title>Map5 -- 动态</title>
<body onload="init()">
	<!-- mapDiv 为初始化地图的容器，给定高度和宽度，并指定定位方式为绝对定位 -->
	<div id="mapDiv" style="height:800px;width:100%;position:absolute;top:80px;">
	</div>
	<span>一个</span>
	<button onclick="addMovePoint()">加载</button>
	<button onclick="beginAnimate()">动画开始</button>
	<button onclick="endAnimate()">动画结束</button>
	<button onclick="removeMovePoint()">删除</button>
	<!-- <span>另一个</span>
	<button onclick="addMovePoint_2()">加载</button>
	<button onclick="beginAnimate_2()">动画开始</button>
	<button onclick="endAnimate_2()">动画结束</button>	
	<button onclick="removeMovePoint_2()">删除</button> -->
</body>
	