# 样式
# 图标-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();//错误信息
}
});
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();//错误信息
}
});
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
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;//透明度设置
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);//修改线颜色
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;//修改边框样式
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");
2
3
4
5
6
7
8
9
10
11
12
13
14
15