Parameters:
| Name |
Type |
Description |
options |
Object
|
Properties
| Name |
Type |
Description |
id |
String
|
图层id |
data |
Array
|
数据，geojson格式 |
visibility |
Boolean
|
图层默认是否显示 |
markClusterMaxZoom |
Number
|
聚合标注最大层级 |
rendererOptions |
Object
|
渲染配置
Properties
| Name |
Type |
Description |
markPoint |
Object
|
标注
Properties
| Name |
Type |
Description |
nameField |
String
|
属性名动态选取，可缺省，缺省使用name属性字段 |
hoverable |
Boolean
|
是否启用鼠标悬浮 |
clickable |
Boolean
|
是否启用鼠标点击 |
symbol |
String
|
标注图形类型，可选为：'round' | 'icon' |
symbolSrc |
String
|
标注图标文件路径 |
symbolSize |
Number
|
标注大小 |
symbolWidth |
Number
|
标注宽度 |
symbolHeight |
Number
|
标注高度 |
itemStyle |
Object
|
图形样式属性
Properties
| Name |
Type |
Description |
color |
String
|
标注颜色 |
lineWidth |
Number
|
外圈宽度 |
lineColor |
String
|
外圈颜色 |
shadowColor |
String
|
阴影颜色 |
shadowBlur |
Number
|
阴影模糊度 |
shadowOffsetX |
Number
|
阴影偏移量X |
shadowOffsetY |
Number
|
阴影偏移量Y |
|
|
markCluster |
Object
|
聚合标注
Properties
| Name |
Type |
Description |
hoverable |
Boolean
|
是否启用鼠标悬浮 |
clickable |
Boolean
|
是否启用鼠标点击 |
symbol |
String
|
聚合标注图形类型，可选为：'round' | 'icon' |
symbolSrc |
String
|
Array
|
聚合标注图标文件路径，支持仅配置一张用来配色的白色样图，也支持配置直接使用的多张图片 |
symbolSize |
Array
|
聚合标注大小 |
itemStyle |
Object
|
图形样式属性
Properties
| Name |
Type |
Description |
color |
Array
|
聚合标注颜色 |
lineWidth |
Number
|
外圈宽度 |
lineColor |
String
|
外圈颜色 |
shadowColor |
String
|
阴影颜色 |
shadowBlur |
Number
|
阴影模糊度 |
shadowOffsetX |
Number
|
阴影偏移量X |
shadowOffsetY |
Number
|
阴影偏移量Y |
|
label |
Object
|
标签
Properties
| Name |
Type |
Description |
show |
Boolean
|
标签是否显示 |
color |
String
|
颜色 |
align |
String
|
水平对齐方式，可选为：'start' | 'end' | 'left' | 'right' | 'center' |
baseline |
String
|
垂直对齐方式，可选为：'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom' |
fontFamily |
String
|
字体系列 |
fontSize |
Number
|
字号 ，单位px |
fontStyle |
String
|
样式，可选为：'normal' | 'italic' | 'oblique' |
fontWeight |
String/Number
|
粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900 |
|
|
tooltip |
Object
|
悬浮提示
Properties
| Name |
Type |
Description |
show |
Boolean
|
是否显示悬浮提示框 |
backgroundColor |
String
|
背景颜色 |
borderColor |
String
|
边框颜色 |
borderRadius |
Number
|
边框圆角 |
borderWidth |
Number
|
边框宽度 |
padding |
Number
|
内边距 |
textStyle |
Object
|
文字样式
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 |
|
|
|
|
- Author:
-
- Source:
-
View2D/Visuals/Custom/Cluster.js
Example
//构造地图对象
var map = new GeoGlobe.Map({
style: Cfg.style,
container: 'map',
zoom: 11,
bearing: 0,
pitch: 0,
units: "degrees",
center: [114.77402594421665, 30.28162351834304]
});
//构造可视化定制图层
var custom = new GeoGlobe.Visuals.Custom();
//添加到地图中
custom.addTo(map);
//构造聚合图层
var cluster = new GeoGlobe.Visuals.Custom.Cluster({
id: "cluster_1",
data: data,
visibility: true,
markClusterMaxZoom: 18,
rendererOptions: {
markPoint: {
symbol: 'round',
symbolSize: 8,
itemStyle: {
color: '#f00',
lineWidth: 1,
lineColor: '#fff',
shadowColor: '#000000',
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0
}
},
markCluster: {
symbol: 'round',
// symbol: 'icon',
// symbolSrc: 'http://' + Cfg.host + '/' + Cfg.projectName + '/JsCodeDemo_new/images/bubble.png',
// symbolSrc: [
// [0, 'bubble1.png'],
// [9, 'bubble2.png'],
// [99, 'bubble3.png']
// ],
symbolSize: [
[0, 40],
[9, 60],
[99, 80]
],
itemStyle: {
color: [
[0, 'rgba(0, 0, 255, 0.7)'],
[9, 'rgba(0, 255, 0, 0.7)'],
[99, 'rgba(255, 0, 0, 0.7)']
],
lineWidth: 3,
lineColor: '#fff',
shadowColor: '#000',
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0
},
label: {
show: true,
color: '#fff',
align: 'center',
baseline: 'middle',
fontFamily: 'serif',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal'
}
},
tooltip: {
show: true,
backgroundColor: '#fff',
borderColor: '#333',
borderRadius: 0,
borderWidth: 0,
padding: 10,
textStyle: {
color: "#000",
fontFamily: 'serif',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal'
}
}
}
});
//添加到可视化定制图层
cluster.addTo(custom);
//绘制
custom.render();