FlexViewer 框架更改比例尺创建比例尺

主要实现比例尺汉化,不是英文版的mi,是中文的米或千米

创建项目:

<?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="Custom ScaleBar Skin">
<!--
@@includeFiles com/esri/ags/samples/skins/ScaleBarSkin.mxml
This sample shows you how to use a custom scale bar.
-->
<fx:Style>
@namespace esri "http://www.esri.com/2008/ags";
esri|ScaleBar
{
skinClass: ClassReference("com.aa");
}
</fx:Style>
<esri:Map>
<esri:ArcGISDynamicMapServiceLayer url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer"/>
</esri:Map>
</s:Application>


创建组件; ScaleBarSkin.mxml

<?xml version="1.0" encoding="utf-8"?> <!--      ////////////////////////////////////////////////////////////////////////////////      //      // copyright (c) 2010 ESRI      //      // All rights reserved under the copyright laws of the United States.      // You may freely redistribute and use this software,with or      // without modification,provided you include the original copyright      // and use restrictions.  See use restrictions in the file:      // <install location>/License.txt      //      //////////////////////////////////////////////////////////////////////////////// --> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="200"> <fx:Metadata> [HostComponent("com.esri.ags.components.ScaleBar")] </fx:Metadata> <fx:Script> <![CDATA[ /** * Here we override the measure method and adjust the position of parts * _before_ we call the super.measure that will define the width and height based on the newly * position. */ [Bindable]private var barLength:Number = 0; [Bindable]private var barHeight:Number = 5; private var useMetric:Boolean = true; //use it to toggle between metric and US units override protected function measure():void { barLength = useMetric == false ? hostComponent.lengthUS : hostComponent.lengthMetric; scaleLbl.text = useMetric == false ? hostComponent.textUS : hostComponent.textMetric; if(scaleLbl.text!=null) { var scaleText:Array=scaleLbl.text.split(' '); if(scaleText!=null) { switch(scaleText[1]) { case "km": scaleLbl.text = scaleText[0] + " 公里"; break; case "m": scaleLbl.text = scaleText[0] + " 米"; break; case "": break; default: break; } } } scaleLbl.x = barLength + 3; scaleLbl.y = -(scaleLbl.getExplicitOrMeasuredHeight() / 4); super.measure(); } ]]> </fx:Script> <s:Label id="scaleLbl" fontFamily="宋体" fontSize="11" fontWeight="bold" color="black"/> <s:Rect id="baseRect" x="0.5" width="{barLength}" height="{barHeight}"> <s:fill> <s:SolidColor color="#ee0202"/> </s:fill> </s:Rect> <s:Rect x="{baseRect.width/4}" width="{baseRect.width/4}" height="{barHeight}"> <s:fill> <s:SolidColor color="#009cff"/> </s:fill> </s:Rect> <s:Rect x="{(baseRect.width/4)*3}" width="{baseRect.width/4}" height="{barHeight}"> <s:fill> <s:SolidColor color="#009cff"/> </s:fill> </s:Rect> </s:Skin>

相关文章

一:display:flex布局display:flex是一种布局方式。它即可以...
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何...
移动端开发知识点pc端软件和移动端apppc端软件是什么,有哪些...
最近挺忙的,准备考试,还有其他的事,没时间研究东西,快周...
display:flex;把容器设置为弹性盒模型(设置为弹性盒模型之后...
我在网页上运行了一个Flex应用程序,我想使用Command←组合键...