# 样式

# 图标-Icon

图标是用于表现要素信息的图形符号。为要素定义一个合适的图标能够更加清晰地和直观地表现出该要素的特征。Cellsys体系下的图标都是svg数据格式。

# (一)、图标集合[IconSet]

Cellsys预设了一系列可以表现行业属性的图标集合。要获取指定图标时,首先要获取图标集合。 图标集合的常用属性如下:

属性名 值类型 属性描述
name String 图标集合名称
count String 图标集合下图标的数量

常用方法如下:

方法名 返回类型 方法描述
queryIcon Promise< QueryResult > 查询图标集合下所有的图标

# 1、获取图标集合

初始化成功后,可直接通过Cellsys获取空天提供的图标集合。与其他要素集合不同的是,图标集合并不是从organization对象下获取。

Cellsys.queryIconSet(new CsCallback<QueryResult<IconSet>>() {
    @Override
    public void onSuccess(QueryResult<IconSet> object) {
        /*分页信息-查询方法特有*/
        PageInfo pageInfo = object.pageInfo;//查询接口特有的分页信息
        int totalCount = pageInfo.totalCount;//数据总数
        int totalPage = pageInfo.totalPage;//总页数
        int pageNo = pageInfo.pageNo;//当前页码(从1开始)
        int pageSize = pageInfo.pageSize;//每页查询数量(注意!不一定和当前查询的数据总量匹配)
        
        List<IconSet> iconSets = object.data;//查询结果可能为null
        if (iconSets != null && iconSets.size() > 0) {
            IconSet iconSet = iconSets.get(0);
            String name = iconSet.getName();//图标集合名称
            int count = iconSet.getCount();//集合下图标总数
        }
    }
          
    @Override
    public void onFailure(ErrorMessage errorMessage) {
        /*失败*/
        int code = errorMessage.getCode();//错误码
        String errMsg = errorMessage.getMessage();//错误信息   
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# (二)、图标[Icon]

Cellsys提供的图标都是以svg代码的形式。

图标的常用属性如下:

属性名 值类型 属性描述
name String 图标名称
svgData String 图标的svg代码
color Color 图标的颜色
iconSetInfo 图标所属的图标集合基础信息

常用方法如下:

方法名 返回类型 方法描述
setColor void 设置图标颜色

图标集合[IconSet]提供了query方法来查询自身集合中的图标,示例如下:

iconSet.queryIcon(new CsCallback<QueryResult<Icon>>() {
    @Override
    public void onSuccess(QueryResult<Icon> object) {
        /*分页信息-查询方法特有*/
        PageInfo pageInfo = object.pageInfo;//查询接口特有的分页信息
        int totalCount = pageInfo.totalCount;//数据总数
        int totalPage = pageInfo.totalPage;//总页数
        int pageNo = pageInfo.pageNo;//当前页码(从1开始)
        int pageSize = pageInfo.pageSize;//每页查询数量(注意!不一定和当前查询的数据总量匹配)
       
        List<Icon> icons = object.data;//查询结果可能为null
        if (icons != null && icons.size() > 0) {
            Icon icon = icons.get(0);
            String name = icon.getName();//图标名称
            Color color = icon.getColor();//图标填充颜色
            String data = icon.getSvgData();//svg的path字段
            String setName = icon.getSortName();//图标分类名称(集合名称)
           
            //获取图标后即可用于创建标记集合等需要图标的操作
            Cellsys.organization.createMarkerSet("集合名称", "集合备注", icon, new CsCallback<MarkerSet>() {
                @Override
                public void onSuccess(MarkerSet object) {
                    //...
                }

                @Override
                public void onFailure(ErrorMessage errorMessage) {
                    //...
                }
            });
        }
    }
          
    @Override
    public void onFailure(ErrorMessage errorMessage) {
        /*失败*/
        int code = errorMessage.getCode();//错误码
        String errMsg = errorMessage.getMessage();//错误信息
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# 颜色-Color

CoreSDK自定义的Color类,为开发者预设了多种颜色。具体分成13种色带[Ribbon],每种色带提供10种色阶[RibbonLevel],对应由浅至深的10个不同色彩级别。基本满足开发需求。另外色带还提供了另一种枚举'Custom',满足开发者自定义颜色的需求。 颜色[Color]的常用属性如下:

属性名 值类型 属性描述
ribbon Ribbon 色带
level RibbonLevel 色带对应的色号
value String 16进制RGB颜色值
方法名 返回类型 方法描述
getValue String 获取颜色的十六进制值

# 色带[Ribbon]

Cellsys提供了适用于不同场景的13个色带,基本可以满足大部分产品对于颜色的需求。

色带 描述
Red 红色
Volcano 火山色
Orange 橙色
Gold 金色
Yellow 黄色
LightGreen 浅绿色
Green 绿色
Cyan 青色
GeekBlue 极客蓝
Blue 蓝色
Purple 紫色
Pink 粉色
Gray 灰色

# 色号[RibbonLevel]

每个色带由浅至深对应有L1至L10,10个不同等级的色号。

# 颜色声明

/*从枚举Ribbon和枚举RibbonLevel中选择色带和色阶*/
Color color = new Color(Ribbon.Gold, RibbonLevel.L3);
String value = color.getValue();//获取颜色的十六进制码。如:#ffd591
1
2
3

# 地图样式-symbol

地图样式是用于显示在地图上的符号表现。Cellsys提供了三种不同类型的地图样式,分别是点符号[PointSymbol]、线符号[PolylineSymbol]和面符号[PolygonSymbol]

# (一)、点符号[PointSymbol]

点符号可以用于表现标记、事件、任务要素在地图上的展示效果。点符号[PointSymbol]不仅需要一个图标[Icon]类,其还拥有尺寸、填充色、透明度等属性。

属性名 值类型 属性描述
mapSign Icon 点符号的图标表现
size Number 点符号尺寸
fillColor Color 点符号的填充颜色
alpha Number 点符号的透明度

常用方法如下:

方法名 返回类型 方法描述
- - -

# 点符号示例

Icon icon = getIcon();//点样式的图标
Color fillColor = new Color(Ribbon.GeekBlue, RibbonLevel.L2);//点样式的填充颜色
PointSymbol pointSymbol = new PointSymbol(icon, fillColor);//自定义图层样式,可传null,直接使用标记集合的默认样
pointSymbol.size = 10;//设置尺寸
pointSymbol.alpha = 0.9f;//透明度设置
1
2
3
4
5

# (二)、线符号的常用属性如下:

线符号[PolylineSymbol]可以用于表现路线要素在地图上的展示效果。

属性名 值类型 属性描述
width Number 线宽度
fillColor Color 线的填充颜色
alpha Number 线符号的透明度
方法名 返回类型 方法描述
- - -

# 线符号示例

int strokeWidth = 5;//边框宽度
Color strokeColor = new Color(Ribbon.Green, RibbonLevel.L8);
PolylineSymbol polylineSymbol = new PolylineSymbol(strokeWidth, strokeColor);//图层路线样式。传null则使用路线集合的默认样式
polylineSymbol.alpha = 0.8f;//透明度
polylineSymbol.strokeType = StrokeType.SolidLine;//线类型(虚线、实线)
polylineSymbol.width = 3;//修改线宽度
polylineSymbol.fillColor = new Color(Ribbon.Red, RibbonLevel.L5);//修改线颜色
1
2
3
4
5
6
7

# (三)、面符号[PolygonSymbol]

面符号[PolygonSymbol]可以用于表现面要素在地图上的展示效果。

面符号的常用属性如下:

属性名 值类型 属性描述
strokeSymbol PolylineSymbol 面的边框地图符号
fillColor Color 面的填充颜色
alpha Number 面的填充透明度

面符号的常用方法如下:

方法名 返回类型 方法描述
- - -

# 面符号示例

/*边框设置*/
int _strokeWidth = 5;//边框宽度
Color _strokeColor = new Color(Ribbon.Green, RibbonLevel.L8);
float _strokeAlpha = 1f;
PolylineSymbol lineSymbol = new PolylineSymbol(_strokeWidth, _strokeColor);
lineSymbol.alpha = _strokeAlpha;
/*填充设置*/
Color _fillColor = new Color(Ribbon.Green, RibbonLevel.L4);//填充颜色
float _fillAlpha = 0.5f;
 
PolygonSymbol polygonSymbol = new PolygonSymbol(_fillColor, _fillAlpha, lineSymbol, FillType.PureColor, 0);
polygonSymbol.alpha = 0.3f;//修改填充透明度
polygonSymbol.fillColor = new Color(Ribbon.Green, RibbonLevel.L5);//修改填充颜色
polygonSymbol.fillType = FillType.PureColor;//填充类型
polygonSymbol.strokeSymbol = lineSymbol;//修改边框样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 图片-Image

图片[Image]的常用属性如下:

属性名 值类型 属性描述
type ImageType 图片类型
data String 图片的数据内容
fileName String 图片文件名,需要带有格式后缀

图片类型[ImageType]包括:

类型 描述
InternetImage 网络图片,data属性为图片的网络链接
Base64BMP base64格式图片,data属性为图片的base64编码部分,不包括前缀

# 图片[Image]示例

/*Image处理*/
if (image.type.equals(ImageType.InternetImage)) {
    /*网络图片处理*/
    String imgUrl = image.data;
} else if (image.type.equals(ImageType.Base64BMP)) {
    String fileName = image.fileName;
    String base64 = image.data;
}
 
/*Base64Image新增*/
String base64 = getBase64();//base64转换方法略
Image base64Image = new Image(ImageType.Base64BMP, base64, "photo.png");
/*InternetImage新增*/
String url = getPhotoUrl();//https链接
Image internetImage = new Image(ImageType.InternetImage, url, "photo.png");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15