API/layer_add_pgis.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(){
		
		// 1、设置地图的范围
		var extent = new GeoBeans.Envelope(-180,-90,180,90);
		
		// 2、初始化地图变量，参数分别为:
		// 地图的容器为"mapDiv",地图名称"map"，地图范围，地图的空间参考，4326为经纬度
		mapObj = new GeoBeans.Map("mapDiv","map",extent,4326);
		if(mapObj == null){
			return;
		}

		// 3、定义PGIS图层的范围，定义一个矩形，通过该范围，确定获取瓦片的范围
		var layerExtent = new GeoBeans.Envelope(113.9414,38.10546,119.01953,42.16015);

		// 4、定义PGIS图层，参数分别为：
		// 地图名称，PGIS图层地址，图层范围
		var layer = new GeoBeans.Layer.PGISLayer("pgis","/PGIS_S_TileMapServerTDT/Maps/vec_tj_tdt/EzMap",layerExtent);

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

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

		// 7、设置级别
		mapObj.setLevel(9);	

		// 8、添加一个天津的矢量图层，对比显示
		addTianjinLayer();

		// 9、绘图
		mapObj.draw();

	}


	// 添加要素图层，具体解释见要素图层部分
	function addTianjinLayer(){
		var fields = [
			{
				name : "fname",  // 字段名称
				type : "string"  // 字段类型
			},{
				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;

			// 使用wkt转换为geometry
			var geometry = GeoBeans.Utility.createGeometryFromWKT(wkt);
			var id = "id_" + i;
			var values = [name,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 = null;

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

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

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

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


	function setLayerMaxLevel(){

		// 1、根据名称获取图层
		var layer = mapObj.getLayer("pgis");
		if(layer == null){
			return;
		}

		// 2、设置该图层的最大级别
		layer.setMaxLevel(19);
	}

	function setLayerMinLevel(){

		// 1、根据名称获取图层
		var layer = mapObj.getLayer("pgis");
		if(layer == null){
			return;
		}

		// 2、设置该图层的最小级别
		layer.setMinLevel(9);
	}


	function setOpacity(){

		// 1、根据名称获取图层
		var layer = mapObj.getLayer("pgis");
		if(layer == null){
			return;
		}

		// 2、设置图层的透明度
		layer.setOpacity(0.5);

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

</script>
<title>Map5 -- WMTS 图层</title>
<body onload="init()">
	<!-- mapDiv 为初始化地图的容器，给定高度和宽度，并指定定位方式为绝对定位 -->
	<div id="mapDiv" style="height:800px;width:100%;position:absolute;top:80px;">
	</div>
	<button onclick="setLayerMaxLevel()">设置图层的最大级别</button>
	<button onclick="setLayerMinLevel()">设置图层的最小级别</button>
	<button onclick="setOpacity()">设置透明度</button>
</body>
	