API/rangeChart.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>
<script type="text/javascript" src="js/tianjinValue.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(117.38,39.35);	
		mapObj.setCenter(center);

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


		addFeatureLayer();
		// 绘图
		mapObj.draw();
	}

	function addFeatureLayer(){
		
		var fields = [
			{
				name : "fname",  // 字段名称
				type : "string"  // 字段类型
			},{
				name : "gdp",
				type : "int"
			},{
				name : "populat",
				type : "int"
			},{
				name : "shape",
				type : "geometry"
			}
		];
		// 面
		var geomType  = GeoBeans.Geometry.Type.POLYGON;
		var name = "tianjin";

		// 创建一个featureLayer
		// 第一个参数图层名称，第二个参数字段设置，第三个参数，图层的类型（面图层）
		var featureLayer = mapObj.createFeatureLayer(name,fields,geomType);
		
		// 添加图层
		mapObj.addLayer(featureLayer);

		var length = g_tianjinValue.length;
		for(var i = 0; i < length;++i){
			var v = g_tianjinValue[i];
			var name = v.name;
			var wkt = v.shape;
			var gdp = v.gdp;
			var populat = v.populat;

			// 使用wkt转换为geometry
			var geometry = GeoBeans.Utility.createGeometryFromWKT(wkt);
			var id = "id_" + i;
			var values = [name,gdp,populat,geometry];
			// 第一个参数要素的ID值，第二个参数要素的geometry，第三个参数要素字段值，与字段顺序一致
			featureLayer.addFeatureObj(id,geometry,values); 	
		}

		// 设定样式
		var style = createStyle();
		featureLayer.setStyle(style);
		mapObj.draw();
	}

	function createStyle(){

		// 定义元素的样式
		var style = new GeoBeans.Style.FeatureStyle();

		// 定义一个规则
		var rule = new GeoBeans.Rule();

		// 定义一个面样式
		var symbolizer = new GeoBeans.Symbolizer.PolygonSymbolizer();

		// 定义面样式的填充颜色
		symbolizer.fill.color.set(0, 255, 0,0.6);

		// 定义面样式的边框的颜色
		symbolizer.stroke.color.set(255, 0, 0,0.6);

		// 定义面样式的边框的宽度，默认为2
		symbolizer.stroke.width = 1;

		// 定义该规则的样式
		rule.symbolizer = symbolizer;

		// 添加该项规则
		style.addRule(rule);
		
		return style;
	}


	function addChart(){
		// 1、设置分级图的参数
		var option = {
			startColor 		: "#00ff00", //最小值对应的颜色
			endColor 		: "#ff0000", //最大值对应的颜色
			opacity 		: 1.0,		 //填充的透明度
			border 			: "#ffffff", //边界的颜色
			borderOpacity 	: 0.6,		 //边界的透明度	
			borderWidth 	: 0			 //边界的宽度，设置为0，则不显示边界
		};

		// 2、设置图层名称
		var layerName = "chart";  		

		// 3、选取分级图底图的名称
		var baseLayerName = "tianjin";	

		// 4、底图字段
		var baseLayerField = "gdp";		

		// 5、定义分级图
		var chartLayer = new GeoBeans.Layer.RangeChartLayer(layerName,baseLayerName,baseLayerField,option);

		// 6、通过添加图层的方式添加专题图
		mapObj.addLayer(chartLayer);

		// 7、绘图
		mapObj.draw();
	}

	function registerClickEvent(){
		// 定义元素的样式
		var style = new GeoBeans.Style.FeatureStyle();
		var rule = new GeoBeans.Rule();
		var symbolizer = new GeoBeans.Symbolizer.PointSymbolizer();
		symbolizer.size = 6;
		symbolizer.fill.color.set(0, 0, 255,1);
		symbolizer.stroke.color.set(0,255, 0,0.6);
		rule.symbolizer = symbolizer;
		style.addRule(rule);

		// 通用接口，注册点击事件
		mapObj.registerClickEvent("chart",style,clickLayer_callback);
	}

	function unRegisterClickEvent(){
		// 注销图层的点击事件
		mapObj.unRegisterClickEvent("chart");
	}

	function clickLayer_callback(feature,x,y){
		// 返回结果，feature为点击的数据，x,y为点击点的地图坐标
		console.log(feature);
		if(feature != null){
			// 获取字段值
			var gdp = feature.getValue("gdp");
			var name = feature.getValue("fname");

			var html = "<div><div>" + name + ":" + gdp +  "</div></div>";
			var option = {
				title : "天津市GDP产量"
			};
			// 定义infoWindow
			var infoWindow = new GeoBeans.InfoWindow(html,option);
			var point = new GeoBeans.Geometry.Point(x,y);
			// 弹出框
			mapObj.openInfoWindow(infoWindow,point);
		}
	}

	function removeChart(){
		
		// 1、删除图层的方式删除专题图
		mapObj.removeLayer("chart");
		
		// 2、绘图
		mapObj.draw();
	}

	function setLayerVisible(){
		var layer = mapObj.getLayer("tianjin");
		if(layer.visible){
			layer.setVisiable(false);
		}else{
			layer.setVisiable(true);
		}
		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="addChart()">分级图</button>
	<button onclick="setLayerVisible()">隐藏/显示原始图</button>
	<button onclick="registerClickEvent()">点击事件</button>
	<button onclick="unRegisterClickEvent()">注销点击事件</button>
	<button onclick="removeChart()">删除分级图</button>
	
</body>
	