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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值