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
|
是否显示图例 |
title |
String
|
图例标题 |
left |
Number
|
距左边界的距离 |
right |
Number
|
距右边界的距离 |
top |
Number
|
距上边界的距离 |
bottom |
Number
|
距下边界的距离 |
col |
Number
|
图例项的列数 |
itemWidth |
Number
|
图例项图形宽度 |
itemHeight |
Number
|
图例项图形高度 |
itemColors |
Array
|
图例项图形颜色集 |
itemStatuses |
Array
|
图例项启用状态，0表示未启用、1表示启用 |
hLegendLabels |
Array
|
横向图例标签名数组 |
vLegendLabels |
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 |
|
|
rendererOptions |
Object
|
渲染配置
Properties
| Name |
Type |
Description |
markPoint |
Object
|
标注
Properties
| Name |
Type |
Description |
hoverable |
Boolean
|
是否启用鼠标悬浮 |
clickable |
Boolean
|
是否启用鼠标点击 |
slope |
Number
|
标注图形3d模式的角度 |
symbol |
String
|
标注图形类型，可选为：'column' | 'pie' |
symbolMinSize |
Number
|
标注最小高度/半径 |
symbolMinSize |
Number
|
标注最大高度/半径 |
symbolWidth |
Number
|
标注宽度，标注类型=pie时为圆环宽度 |
symbolThickness |
Number
|
标注厚度，>0时显示为3d模式 |
symbolGap |
Number
|
标注间隙 |
opacity |
Number
|
标注不透明度（全局） |
itemStyle |
Object
|
图形样式属性
Properties
| Name |
Type |
Description |
color |
String
|
颜色 |
shadowColor |
String
|
阴影颜色，column标注类型时才有效 |
shadowBlur |
Number
|
阴影模糊度 |
shadowOffsetX |
Number
|
阴影偏移量X |
shadowOffsetY |
Number
|
阴影偏移量Y |
|
|
tooltip |
Object
|
悬浮提示
Properties
| Name |
Type |
Description |
show |
Boolean
|
是否显示悬浮提示框 |
width |
Number
|
悬浮提示框宽度 |
backgroundColor |
String
|
背景颜色 |
borderColor |
String
|
边框颜色 |
borderRadius |
Number
|
边框圆角 |
borderWidth |
Number
|
边框宽度 |
padding |
Number/String
|
内边距 |
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/Proportion.js
Example
//构造地图对象
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/geostar.json', function (result) {
//构造占比图层
var proportion = new GeoGlobe.Visuals.Custom.Proportion({
id: "proportion_1",
data: result.features,
visibility: true,
legend: {
show: true,
left: 10,
top: 10,
col: 3,
itemWidth: 20,
itemHeight: 12,
itemColors: ["#3EEAFE","#8187FF","#ED5E2A"],
itemStatuses: [1,1,1],
hLegendLabels: ["武大吉奥"],
vLegendLabels: ["智慧城市", "国土", "测绘"],
backgroundColor: "transparent",
borderWidth: 0,
shadowBlur: 0,
padding: 0,
textStyle: {
color: "#fff"
}
},
rendererOptions: {
markPoint: {
slope: 0,
symbol: 'pie',
symbolMinSize: 20,
symbolMaxSize: 100,
symbolWidth: 20,
symbolThickness: 10,
symbolGap: 5,
opacity: 0.8,
itemStyle: {
color: 'rgba(0,0,0,0.5)'
}
},
tooltip: {
show: true,
textStyle: {
fontFamily: 'Microsoft YaHei'
}
}
}
});
//添加到可视化定制图层
proportion.addTo(custom);
//绘制
custom.render();
});