# 样式

# 图标-Icon

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

# （一）、图标集合[IconSet]

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

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

常用方法如下：

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

# 1、获取图标集合

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

Cellsys.queryIconSet()
    .then(queryResult => {
        let iconSets = queryResult.data; //图标集合列表
        if(iconSets.length > 0) {
            let iconSet = iconSets[0]; //获取图标集合列表下其中一个图标集合
        }
    })

1
2
3
4
5
6
7

# （二）、图标[Icon]

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

图标的常用属性如下：

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

常用方法如下：

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12

# 颜色-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 = new Cellsys.Color({
    "ribbon": Cellsys.Ribbon["Red"],
    "level": Cellsys.RibbonLevel["L5"]
})

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

1
2
3
4
5
6
7
8
9
10
11
12
13

# 地图样式-symbol

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

# (一)、点符号[PointSymbol]

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

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

常用方法如下：

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

# 点符号声明

let pointSymbol = new Cellsys.PointSymbol({
    "mapSign": icon,
    "fillColor": color
})

//声明后即可用于设置例如图层地图符号等其他操作
Cellsys.organization.createMarkerLayer({
        "name": "标记图层名称",
        "markerSet": markerSet, //标记图层关联的标记集合
        "pointSymbol": pointSymbol //标记图层地图符号表现
})

1
2
3
4
5
6
7
8
9
10
11
12

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

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

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

方法名	返回类型	方法描述
setWidth	void	设置线符号的宽度
setColor	void	设置线符号的颜色
setAlpha	void	设置线符号的透明度

# 线符号声明

let polylineSymbol = new Cellsys.PolylineSymbol({
    "fillColor": color
})

//声明后即可用于设置例如路线集合的地图符号
Cellsys.organization.createLineSet({
    "name": "路线集合的名称",
    "lineSymbol": new Cellsys.PolylineSymbol({
        "fillColor": color
    })
})

1
2
3
4
5
6
7
8
9
10
11

# (三)、面符号[PolygonSymbol]

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

面符号的常用属性如下：

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

面符号的常用方法如下：

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

# 面符号声明

let polygonSymbol = new Cellsys.PolygonSymbol({
    "fillColor": color,
    "strokeSymbol": new Cellsys.PolylineSymbol({
        "fillColor": color
    })
})

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

1
2
3
4
5
6
7
8
9
10
11
12

# 图片-Image

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

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

图片类型[ImageType]包括：

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

# 图片[Image]声明

let image = new Cellsys.Image({
    "data": "xxx", //图片的base64编码部分，不包括前缀
    "type": Cellsys.ImageType["Base64BMP"],
    "fileName": "xxx.png" //图片文件名，需要带有格式后缀
})

//声明后即可用于设置例如事件要素图片属性等操作
let images = [];
images.push(image)
eventSet.createEvent({
    "name": "事件名称",
    "remark": "事件描述",
    "mapPoint": new Cellsys.MapPoint(39.908827, 116.397804);,
    "happenTime": new Cellsys.DateTime(new Date().getTime()),
    "base64Images": images
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17