GeoGlobe JS SDK

Class: Fluorescence

.Visuals.Custom. Fluorescence

荧光图层

new Fluorescence(options)

Parameters:
Name Type Description
options Object
Properties
Name Type Description
id String 图层id
data Array 数据，geojson格式
visibility Boolean 图层默认是否显示
legend Object 图例配置
Properties
Name Type Description
show Boolean 是否显示图例
left Number 距左边界的距离
right Number 距右边界的距离
top Number 距上边界的距离
bottom Number 距下边界的距离
col Number 图例项的列数
itemSize Number 图例项图形大小
symbol Number 图例项图形样式，可选为：'ring' | 'circle'
itemColors Array 图例项图形颜色集
backgroundColor String 背景颜色
borderColor String 边框颜色
borderWidth Number 边框线宽
borderRadius Number 边框圆角
shadowColor String 阴影颜色
shadowBlur Number 阴影模糊度
shadowOffsetX Number 阴影水平偏移量
shadowOffsetY Number 阴影垂直偏移量
padding Number 内边距
textStyle String 文字样式
Properties
Name Type Description
color String 颜色
fontFamily String 字体系列
fontSize Number 字号 ，单位px
fontStyle String 样式，可选为：'normal' | 'italic' | 'oblique'
fontWeight String | Number 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
legend_rightop Object 右上角图例配置
Properties
Name Type Description
show Boolean 是否显示图例
left Number 距左边界的距离
right Number 距右边界的距离
top Number 距上边界的距离
bottom Number 距下边界的距离
col Number 图例项的列数
itemSize Number 图例项图形大小
itemSize_ringBig Number 图例项标注大号ring的大小
itemSize_circle Number 图例项标注circle的大小
itemSize_ringSmall Number 图例项标注小号ring的大小
vLegendLabels Number 图例项阈值
itemWidth Number 图例项图形大小
itemHeight Number 图例项图形高度
backgroundColor String 背景颜色
borderColor String 边框颜色
borderWidth Number 边框线宽
borderRadius Number 边框圆角
shadowColor String 阴影颜色
shadowBlur Number 阴影模糊度
shadowOffsetX Number 阴影水平偏移量
shadowOffsetY Number 阴影垂直偏移量
padding Number 内边距
textStyle String 文字样式
Properties
Name Type Description
color String 颜色
fontFamily String 字体系列
fontSize Number 字号 ，单位px
fontStyle String 样式，可选为：'normal' | 'italic' | 'oblique'
fontWeight String | Number 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
rendererOptions Object 渲染配置
Properties
Name Type Description
markPoint Object 标注
Properties
Name Type Description
unactivatedDrawable Boolean 是否绘制未激活状态的标注，为true时以灰色调进行绘制
itemSymbol String 标注样式，itemSymbol: ["ring", "ring", "circle"]
symbolSize Number 标注大小
itemStyle Object 图形样式属性
Properties
Name Type Description
color String 颜色
shadowColor String 阴影颜色
shadowBlur Number 阴影模糊度
shadowOffsetX Number 阴影偏移量X
shadowOffsetY Number 阴影偏移量Y
Source:
View2D/Visuals/Custom/Fluorescence.js
Example
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

//构造地图对象
 var map = new GeoGlobe.Map({
    style: Cfg.style,
    container: 'map',
    zoom: 16,
    bearing: 0,
    pitch: 0,
    units: "degrees",
    center: [114.20509630753577, 30.776055193053764]
 });
 //构造可视化定制图层
 var custom = new GeoGlobe.Visuals.Custom();
 //添加到地图中
 custom.addTo(map);
 //通过jquery加载json数据
 $.getJSON('../../data/xuzhou.json', function (result) {
    var fluorescence = new GeoGlobe.Visuals.Custom.Fluorescence({
        id: "fluorescence_1",
        data: result.features,
        visibility: true,
        dragdrawing: true,
        legend: {
            show: true,
            left: 10,
            right: null,
            top: 10,
            bottom: null,
            col: 1,
            itemSize: 10,
            symbol: "ring",
            itemColors: ["rgba(0,255,255,0.7)", "rgba(255,215,0,0.7)", "rgba(255,140,0,0.7)", "rgba(127,255,170,0.7)", "rgba(0,255,255,0.7)", "rgba(255,215,0,0.7)", "rgba(255,140,0,0.7)", "rgba(127,255,170,0.7)", "rgba(0,255,255,0.7)", "rgba(255,215,0,0.7)", "rgba(255,140,0,0.7)", "rgba(127,255,170,0.7)", "rgba(0,255,255,0.7)", "rgba(255,215,0,0.7)", "rgba(255,140,0,0.7)", "rgba(127,255,170,0.7)", "rgba(0,255,255,0.7)", "rgba(255,215,0,0.7)", "rgba(255,140,0,0.7)"],
            backgroundColor: "rgba(0,0,0,0.5)",
            borderColor: "#000",
            borderWidth: 1,
            borderRadius: 0,
            shadowColor: "#fff",
            shadowBlur: 5,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            padding: 5,
            textStyle: {
                color: "#fff",
                fontFamily: "serif",
                fontSize: 12,
                fontStyle: "normal",
                fontWeight: "normal"
            }
        },
        legend_rightop: {
            show: true,
            left: null,
            right: 10,
            top: 10,
            bottom: null,
            col: 3,
            itemSize: 10,
            itemSize_ringBig: [7, 15],
            itemSize_circle: [10, 15, 20, 25],
            itemSize_ringSmall: [3, 8],
            vLegendLabels: ["<66", "<95", "<99"],
            itemWidth: 20,
            itemHeight: 50,
            backgroundColor: "rgba(0,0,0,0.5)",
            borderColor: "#000",
            borderWidth: 1,
            borderRadius: 0,
            shadowColor: "#fff",
            shadowBlur: 5,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            padding: 5,
            textStyle: {
                color: "#fff",
                fontFamily: "serif",
                fontSize: 12,
                fontStyle: "normal",
                fontWeight: "normal"
            }
        },
        rendererOptions: {
            markPoint: {
                hoverable: true,
                itemSymbol: ["ring", "ring", "circle"],
                unactivatedDrawable: false,
                symbolSize: 20,
                effect: {
                    scaleSize: 3,
                    period: 30,
                    show: true
                },
                itemStyle: {
                    shadowColor: '#000',
                    shadowBlur: 0,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    color: "rgba(0,255,255,0.7)"
                }
            },
            tooltip: {
                show: true,
                backgroundColor: 'rgba(0,0,0,0.7)',
                borderColor: '#333',
                borderRadius: 0,
                borderWidth: 0,
                padding: 5,
                textStyle: {
                    color: "#fff",
                    fontFamily: 'serif',
                    fontSize: 12,
                    fontStyle: 'normal',
                    fontWeight: 'normal'
                }
            }
        }
    });
    //添加到可视化定制图层
    fluorescence.addTo(custom);
    //绘制
    custom.render();
 });

Members

cacheCanvas :Array

离屏画布集合
Type:
  • Array
Source:
View2D/Visuals/Custom/Fluorescence.js

cacheCanvasContext :Array

离屏画布的上下文集合
Type:
  • Array
Source:
View2D/Visuals/Custom/Fluorescence.js

canvas :Array

画布集合，使用分层画布分别绘制
Type:
  • Array
Source:
View2D/Visuals/Custom/Fluorescence.js

canvasContext :Array

画布的上下文集合
Type:
  • Array
Source:
View2D/Visuals/Custom/Fluorescence.js

legendLabels :Array

图例标签名数组
Type:
  • Array
Source:
View2D/Visuals/Custom/Fluorescence.js

MarkPointsSet :function

标注对象集类
Type:
  • function
Source:
View2D/Visuals/Custom/Fluorescence.js

markPointsSets :Array

标注对象集
Type:
  • Array
Source:
View2D/Visuals/Custom/Fluorescence.js

visibility :Boolean

图层默认是否显示
Type:
  • Boolean
Source:
View2D/Visuals/Custom/Fluorescence.js

Methods

addTo(custom)

关联可视化定制图层对象
Parameters:
Name Type Description
custom GeoGlobe.Visuals.Custom
Source:
View2D/Visuals/Custom/Fluorescence.js

clearCanvas()

画布清空
Source:
View2D/Visuals/Custom/Fluorescence.js

destroy()

销毁图层
Source:
View2D/Visuals/Custom/Fluorescence.js

draw()

图层绘制
Source:
View2D/Visuals/Custom/Fluorescence.js

drawCanvas()

绘制标注集到画布
Source:
View2D/Visuals/Custom/Fluorescence.js

drawLegend(index)

绘制图例
Parameters:
Name Type Description
index Number 当前绘制的类型索引
Source:
View2D/Visuals/Custom/Fluorescence.js

lazydraw()

图层懒绘制
Source:
View2D/Visuals/Custom/Fluorescence.js

onMove()

图层（地图）移动时触发
Source:
View2D/Visuals/Custom/Fluorescence.js

onMoveEnd()

图层（地图）移动结束触发
Source:
View2D/Visuals/Custom/Fluorescence.js

onResize()

图层自适应
Source:
View2D/Visuals/Custom/Fluorescence.js

redraw()

图层重绘
Source:
View2D/Visuals/Custom/Fluorescence.js

render()

渲染图层
Source:
View2D/Visuals/Custom/Fluorescence.js

setData(data)

数据的处理，构造标注对象集对象
Parameters:
Name Type Description
data Array 数据
Source:
View2D/Visuals/Custom/Fluorescence.js

setVisible(visibility)

图层、图例的显示与隐藏
Parameters:
Name Type Description
visibility Boolean 可见性
Source:
View2D/Visuals/Custom/Fluorescence.js

stopDraw()

停止绘制
Source:
View2D/Visuals/Custom/Fluorescence.js

updateXY()

重新计算标注集的屏幕坐标
Source:
View2D/Visuals/Custom/Fluorescence.js