JS地图工具FusionMaps如何设置渐变色-控件新闻-慧都网

JS地图工具FusionMaps如何设置渐变色

原创|使用教程|编辑：龚雪|2014-06-03 09:58:56.000|阅读 663 次

概述：JS地图工具FusionMaps关于设置渐变色的属性以及方法。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

相关链接：

FusionMaps XT允许使用渐变色填充地图上各种元素。

首先以填充地图背景为例。配置填充图所需要用到的属性如下所示：

bgColor-这个属性是设置地图背景颜色的。要使用渐变色做背景，需要用逗号将十六位颜色代码分开，比如：FF5904,FFFFFF。注意不要有符号#和空白格。
bgAlpha-这个属性是为背景设置alpha (透明度) 的。如果你已经选择了渐变色背景你就需要设置一列用逗号分隔的alpha（s）。
bgRatio-这个属性是用来设置渐变色颜色比例的。
bgAngle-设置背景色的角度值.

下面来详细说说怎么用FusionMaps XT做成渐变色背景吧。我们的示例是用橙色(#ff5904) 开头，然后渐渐褪变成白色（#ffffff) 。起初，我们将两种颜色的alpha设置为100，从左到右的角度为0，代码如下：

XML

<map bgColor='FF5904,FFFFFF' bgAlpha='100,100' bgRatio='0,100' bgAngle='0' fillColor="FFFFFF" showBevel="0" ></map>

这里，我们先是把bgColor设置为一列由逗号分隔开的颜色，这是我们的渐变色里需要用到的。

首先，每个颜色都必须在 bgAlpha属性设定一个alpha，同样由逗号隔开。当这个属性设为 bgAlpha="80,50"，且withbgColor="FF5904,FFFFFF"，颜色 FF5904 就会显示为80%的透明度，颜色 FFFFFF的透明度为50%。要注意，每个属性设定的颜色数量要一致。

其次，要设定渐变色的比例。当颜色比例属性设置为bgRatio="80,20" 且bgColor="FF5904,FFFFFF"时，颜色FF5904 占据80% 的比例而颜色FFFFFF 占据20%。比例的总数都是 100。默认情况下，Fusionmaps XT 会按比例拆分颜色，就是说，如果你有两种颜色的话，并且没有定义属性，那这两个颜色比例就各占50%。

最后，我们把渐变色的角度定为0度（从左到右），这样一个渐变色的背景就诞生了：