超图leaflet临时图层:在子图层中过滤特定属性的要素生成临时地图服务

超图leaflet临时图层:在子图层中过滤特定属性的要素生成临时地图服务

应用场景

通常直接在前端显示矢量,前端web压力大。为了缓解前端压力,此方法把压力转移到了服务端。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title data-i18n="resources.title_drawFeatures"></title>
		<script type="text/javascript" src="js/include-web.js"></script>
		<script type="text/javascript" include="leaflet.draw" src="dist/leaflet/include-leaflet.js"></script>
		<script type="text/javascript">
			var map,layer, url = "https://iserver.supermap.io/iserver/services/map-jingjin/rest/maps/京津地区土地利用现状图";		
			setsetLayer();
			function setLayer() {
				//子图层属性过滤条件
				var layerStatus = new SuperMap.LayerStatus({
					layerName: "Landuse_R@Jingjin#1",//图层名称
					isVisible: true,//是否可见
					displayFilter: "LANDTYPE='灌丛' "//属性过滤条件
				});
				var setLayerStatusParameters = new SuperMap.SetLayerStatusParameters({
					layerStatusList: [layerStatus]//数组来自上面的layerStatus
					//holdTime:15,//获取或设置资源在服务端保存的时间。
					//resourceID:"2"//获取或设置资源服务 ID。
				});
				var setLayerStatusService = new SuperMap.SetLayerStatusService(url, {
					eventListeners: {
						"processCompleted": setLayerCompleted,
						"processFailed": setLayerFailed
					}
				});
				setLayerStatusService.processAsync(setLayerStatusParameters);
			}		
			function setLayerCompleted(e) {
				tempLayerID = e.result.newResourceID;
				console.log(tempLayerID);
				//创建地图控件
				map = L.map('map', {
					crs: L.CRS.EPSG4326,
					center: [40, 117],
					zoom: 4
				});
				//创建 TiledDynamicRESTLayer
				layer=new L.supermap.tiledMapLayer(url, {
					transparent: true,
					cacheEnabled: false,
					redirect: true,
					layersID: tempLayerID
				}, {
					maxResolution: "auto",
					bufferImgCount: 0
				})
			 layer.bufferImgCount = 0;
				console.log(layer);
				layer.addTo(map);
			}		
			function setLayerFailed(e) {
				console.log(e);
			}
		</script>
	</head>
	<body onload="setLayer()" style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
		<div id="map" style="width: 100%;height:100%"></div>		
	</body>
</html>