# 样式

# 图标-Icon

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

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

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

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

常用方法如下:

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

# 1、获取图标集合

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

Cellsys.queryIconSet { obj, errorMessage in
    let iconSets = queryResult.data //图标集合列表
    let iconSet = iconSets.first //获取图标集合列表下其中一个图标集合
}
1
2
3
4

# (二)、图标[Icon]

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

图标的常用属性如下:

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

常用方法如下:

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

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

iconSet.queryIcon { obj, errorMessage in
    let icons = queryResult.data //图标集合列表
    if(icons.count > 0) {
        let icon = icons.first //获取图标列表下其中一个图标
        icon.color = color //为图标设置颜色
        //获取图标后即可用于创建标记集合等需要图标的操作
        Cellsys.shared.organization.createMarkerSet("集合名称", "集合描述", icon)
    }
}

1
2
3
4
5
6
7
8
9
10

# 颜色-Color

Cellsys的颜色由色带和色带对应的色号。每个色带有10个色号,对应由浅至深的10个不同色彩级别。

颜色[Color]的常用属性如下:

属性名 值类型 属性描述
ribbon Ribbon 色带
level RibbonLevel 色带对应的色号
value String 16进制RGB颜色值
方法名 返回类型 方法描述
setRibbon void 设置色带
setLevel void 设置色号

# 色带[Ribbon]

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

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

# 色号[RibbonLevel]

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

# 颜色声明

let color = Color.new(ribbon: Ribbon.Yellow, level: RibbonLevel.L4)

//声明后即可用于设置例如标记集合图标颜色等其他操作
let markerSets = Cellsys.shared.organization.markerSets
if(markerSets.count > 0) {
    let markerSet = markerSets.first //获取组织下的某个标记集合
    let icon = markerSet.icon
    icon.color = color
}

1
2
3
4
5
6
7
8
9
10

# 地图样式-symbol

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

# (一)、点符号[PointSymbol]

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

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

常用方法如下:

方法名 返回类型 方法描述
setMapSign void 设置点符号的图标样式
setColor void 设置点符号的颜色
setAlpha void 设置点符号的透明度

# 点符号声明

let pointSymbol = PointSymbol.new(mapSign: icon, fillColor: color)

//声明后即可用于设置例如图层地图符号等其他操作
Cellsys.shared.organization.createLayer(name: "标记图层名称", markerSet: markerSet, pointSymbol: pointSymbol)

1
2
3
4
5

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

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

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

# 线符号声明

let polylineSymbol = PolylineSymbol.new(width: 2, strokeType: StrokeType.SolidLine, fillColor: Color.new(ribbon: Ribbon.Blue, level: RibbonLevel.L4), alpha: 1)

//声明后即可用于设置例如路线集合的地图符号
Cellsys.shared.organization.createLineSet(name: "路线集合的名称", lineSymbol: polylineSymbol)
1
2
3
4

# (三)、面符号[PolygonSymbol]

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

面符号的常用属性如下:

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

面符号的常用方法如下:

方法名 返回类型 方法描述
setColor void 设置面符号的填充颜色
setAlpha void 设置面符号的透明度

# 面符号声明

let polygonSymbol = PolygonSymbol.new(fillColor: Color.new(ribbon: Ribbon.Blue))

//声明后即可用于设置例如路线集合的地图符号
Cellsys.shared.organization.createAreaSet(name: "区域集合的名字", polygonSymbol: polygonSymbol)
1
2
3
4

# 图片-Image

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

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

图片类型[ImageType]包括:

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

# 图片[Image]声明

let imageA = Image.new(type: ImageType.Base64BMP, data: imageABase64Str, fileName: "xxx.png")
let imageB = Image.new(type: ImageType.Base64BMP, data: imageBBase64Str, fileName: "xxx.png")
let images = [imageA,imageB]

//声明后即可用于设置例如事件要素图片属性等操作
eventSet.createEvent(name: "事件名称",remark: "事件描述",mapPoint: mapPoint,happenTime: time,base64Images: images)
    
1
2
3
4
5
6
7