ArcGIS API for Flex(六)載入自定義Web平鋪圖層
阿新 • • 發佈：2019-01-01
效果如下
<?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", "b", "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>