微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

ArcGIS API for Flex(六)加载自定义Web平铺图层

效果如下



<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:esri="http://www.esri.com/2008/ags"
			   pageTitle="WebTiled Layer">
	<fx:Script>
		<![CDATA[
			import com.esri.ags.events.LayerEvent;
			
			import mx.controls.Alert;
			import mx.events.CloseEvent;
			
			import spark.events.IndexChangeEvent;
			
			private static const ESRI_NATGEO_URL:String = "http://{subDomain}.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{level}/{row}/{col}";
			private static const MQ_URL:String = "http://{subDomain}.mqcdn.com/tiles/1.0.0/vx/map/{level}/{col}/{row}.jpg";
			private static const OCM_URL:String = "http://{subDomain}.tile.opencyclemap.org/cycle/{level}/{col}/{row}.png";
			private static const Trulia_CRIME_URL:String = "http://tiles.trulia.com/tiles/crime_heatmap/{level}/{col}/{row}.png";
			
			private static const CM_MIDNIGHT_URL:String = "http://tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/999/256/{level}/{col}/{row}.png";
			private static const CM_PALE_URL:String = "http://{subDomain}.tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/998/256/{level}/{col}/{row}.png";
			
			private static const MB_DARK_URL:String = "http://{subDomain}.tiles.mapBox.com/v3/examples.map-cnkhv76j/{level}/{col}/{row}.png";
			private static const MB_STREETS_URL:String = "http://{subDomain}.tiles.mapBox.com/v3/examples.map-vyofok3q/{level}/{col}/{row}.png";
			private static const MB_TERRAIN_URL:String = "http://{subDomain}.tiles.mapBox.com/v3/mapBox.mapBox-warden/{level}/{col}/{row}.png";
			
			private static const STMN_TERRAIN_URL:String = "http://{subDomain}.tile.stamen.com/terrain/{level}/{col}/{row}.jpg";
			private static const STMN_WATERCOLOR_URL:String = "http://{subDomain}.tile.stamen.com/watercolor/{level}/{col}/{row}.jpg";
			private static const STMN_TONER_URL:String = "http://{subDomain}.tile.stamen.com/toner/{level}/{col}/{row}.png";
			
			private static const APPLE_OSM_URL:String = "http://gsp2.apple.com/tile?api=1&style=slideshow&layers=default&lang=en_GB&z={level}&x={col}&y={row}&v=9";
			
			// subdomains
			private static const MQ_SUBDOMAINS:Array = [ "mtile01","mtile02","mtile03","mtile04" ];
			private static const ABC:Array = [ "a","b","c" ];
			private static const ABCD:Array = [ "a","c","d" ];
			
			protected function ddlWebTiledLayer_changeHandler(event:IndexChangeEvent):void
			{
				var selectedItem:Object = DropDownList(event.currentTarget).selectedItem;
				webTiledLayer.urlTemplate = selectedItem.urlTemplate;
				webTiledLayer.copyright = selectedItem.copyright;
				webTiledLayer.subDomains = selectedItem.subDomains;
			}
			//确认加载web图层
			protected function loadWebTiledLayerButton_clickHandler(event:MouseEvent):void
			{
				if (customURLTemplate.text != "")
				{
					var customWebTiledLayerObject:Object = {};
					if (customSubDomains.text != "")
					{
						var subDomainsArray:Array = customSubDomains.text.split(",");
						if (subDomainsArray.length >= 0)
						{
							customWebTiledLayerObject.subDomains = subDomainsArray;
						}
						else
						{
							customWebTiledLayerObject.subDomains = null;
						}
					}
					else
					{
						customWebTiledLayerObject.subDomains = null;
					}
					customWebTiledLayerObject.urlTemplate = customURLTemplate.text;
					customWebTiledLayerObject.copyright = customcopyright.text;
					
					setWebTiledLayer(customWebTiledLayerObject);
					customWebTileLayerPanel.visible = false;
				}
				else
				{
					var msg:String = "URL Template must not be blank.\nTo read more about WebTiledLayer click 'OK'";
					Alert.show(msg,"WebTiledLayer information",Alert.OK | Alert.CANCEL,this,onAlertClose,null,Alert.CANCEL);
					function onAlertClose(event:CloseEvent):void
					{
						switch (event.detail) {
							case Alert.OK:
							{
								navigatetoURL(new URLRequest("http://resources.arcgis.com/en/help/flex-api/apiref/com/esri/ags/layers/WebTiledLayer.html"),"_blank");
								break;
							}
							case Alert.CANCEL:
							{
								customURLTemplate.selectAll();
								break;
							}
						}
					}
				}
			}
			//设置websetWebTiledLayer
			protected function setWebTiledLayer(value:Object):void
			{
				if (value)
				{
					webTiledLayer.urlTemplate = value.urlTemplate;
					webTiledLayer.copyright = value.copyright;
					
					if (value.subDomains != null)
					{
						webTiledLayer.subDomains = value.subDomains;
					}
				}
			}
			//清除
			protected function clearWebTiledLayerFormButton_clickHandler(event:MouseEvent):void
			{
				customcopyright.text = "";
				customSubDomains.text = "";
				customURLTemplate.text = "";
			}
			
			protected function webTiledLayer_loadErrorHandler(event:LayerEvent):void
			{
				Alert.show(event.fault.faultString + "\n\n" + event.fault.faultDetail,"WebTiledLayer load error " + event.fault.faultCode);
			}
		]]>
	</fx:Script>
	
	<s:controlBarLayout>
		<s:VerticalLayout gap="10"
						  paddingBottom="7"
						  paddingLeft="10"
						  paddingRight="10"
						  paddingTop="7"/>
	</s:controlBarLayout>
	<s:controlBarContent>	
		<s:HGroup width="100%" verticalAlign="middle">
			<s:Label text="Select a service "/>
			<s:DropDownList id="ddlWebTiledLayer"
							width="220"
							change="ddlWebTiledLayer_changeHandler(event)"
							requireSelection="true">
				<s:dataProvider>
					<!--下拉框-->
					<s:ArrayList>
						<fx:Object copyright="mapquest"
								   label="mapquest"
								   subDomains="{MQ_SUBDOMAINS}"
								   urlTemplate="{MQ_URL}"/>
						
						<!--<fx:Object copyright="National Geographic,Esri,DeLorme,NAVTEQ,UNEP-WCMC,USGS,NASA,ESA,METI,NRCAN,GEBCO,NOAA,iPC"
						label="Esri National Geographic"
						subDomains="{[ 'services','server' ]}"
						urlTemplate="{ESRI_NATGEO_URL}"/>-->
						
						<fx:Object copyright="Open Cycle Map"
								   label="OpenCycleMap"
								   subDomains="{ABC}"
								   urlTemplate="{OCM_URL}"/>
						
						<!--<fx:Object copyright="Trulia"
						label="Trulia Crime Heat Map"
						subDomains="{null}"
						urlTemplate="{Trulia_CRIME_URL}"/>-->
						
						<fx:Object copyright="Cloudmade Midnight Commander"
								   label="Cloudmade Midnight Commander"
								   subDomains="{ABCD}"
								   urlTemplate="{CM_MIDNIGHT_URL}"/>
						
						<fx:Object copyright="Cloudmade Pale Dawn"
								   label="Cloudmade Pale Dawn"
								   subDomains="{ABC}"
								   urlTemplate="{CM_PALE_URL}"/>
						
						<fx:Object copyright="MapBox Dark"
								   label="MapBox Dark"
								   subDomains="{ABCD}"
								   urlTemplate="{MB_DARK_URL}"/>
						
						<fx:Object copyright="MapBox Streets"
								   label="MapBox Streets"
								   subDomains="{ABCD}"
								   urlTemplate="{MB_STREETS_URL}"/>
						
						<fx:Object copyright="MapBox Terrain"
								   label="MapBox Terrain"
								   subDomains="{ABCD}"
								   urlTemplate="{MB_TERRAIN_URL}"/>
						
						<fx:Object copyright="Stamen Terrain"
								   label="Stamen Terrain"
								   subDomains="{ABCD}"
								   urlTemplate="{STMN_TERRAIN_URL}"/>
						
						<fx:Object copyright="Apple's rendering of OSM data."
								   label="Apple's OpenStreetMap"
								   subDomains="{null}"
								   urlTemplate="{APPLE_OSM_URL}"/>
						
						<fx:Object copyright="Stamen Toner"
								   label="Stamen Toner"
								   subDomains="{ABCD}"
								   urlTemplate="{STMN_TONER_URL}"/>
						
						<fx:Object copyright="Stamen Watercolor"
								   label="Stamen Watercolor"
								   subDomains="{ABCD}"
								   urlTemplate="{STMN_WATERCOLOR_URL}"/>
						
					</s:ArrayList>
				</s:dataProvider>
			</s:DropDownList>
			
			<s:Label text=" or try "/>
			
			<s:Button click="customWebTileLayerPanel.visible=true" label="custom web tiled layer"/>
		</s:HGroup>
	</s:controlBarContent>
	
	<esri:Map level="9" wrapAround180="true">
		<esri:center>
			<esri:WebMercatorMapPoint lon="-116.693230" lat="33.820853"/>
		</esri:center>
		<esri:WebTiledLayer id="webTiledLayer"
							copyright="mapquest"
							loadError="webTiledLayer_loadErrorHandler(event)"
							subDomains="{MQ_SUBDOMAINS}"
							urlTemplate="{MQ_URL}"/>
	</esri:Map>
	
	<s:Panel id="customWebTileLayerPanel"
			 horizontalCenter="0"
			 title="Custom Web Tiled Layer"
			 verticalCenter="0"
			 visible="false">
		<s:Form width="100%" backgroundColor="0xEEEEEE">
			<s:layout>
				<s:Formlayout gap="-5"/>
			</s:layout>
			<s:FormItem label="copyright:">
				<s:TextArea id="customcopyright"
							width="220" height="50"
							editable="true"
							text="Humanitarian OSM"/>
			</s:FormItem>
			<s:FormItem label="subdomains:">
				<s:TextArea id="customSubDomains"
							width="220" height="50"
							editable="true"
							text="a,b"/>
			</s:FormItem>
			<s:FormItem label="URL template:">
				<s:TextArea id="customURLTemplate"
							width="220" height="50"
							editable="true"
							text="http://\{subDomain}.tile.openstreetmap.fr/hot/\{level}/\{col}/\{row}.png"/>
				
			</s:FormItem>
			<s:Spacer height="20"/>
			//弹出框按钮
			<s:HGroup width="100%" horizontalAlign="center">
				<s:Button id="clearWebTiledLayerFormButton"
						  click="clearWebTiledLayerFormButton_clickHandler(event)"
						  label="Clear Form"/>
				<s:Button click="customWebTileLayerPanel.visible=false" label="Cancel"/>
				<s:Button id="loadWebTiledLayerButton"
						  click="loadWebTiledLayerButton_clickHandler(event)"
						  label="OK"/>
			</s:HGroup>
		</s:Form>
	</s:Panel>
</s:Application>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐