GeoBarLayer

柱图专题图

new Cesium.GeoBarLayer(options)

Name Type Description
options Object optional 参数选项：
Name Type Default Description
viewer Viewer optional 三维球
show Boolean true optional 图层是否显示
featureRenderer function optional 每个要素渲染时的渲染器，是一个函数，例如function myRenderer(feature,features,target) {}， 其中feature表示一条数据，为点要素geojson；features是完整的点要素数据集合；target是该图层的实例的引用。 返回值是HTML串或者是HTML DOM对象，用于渲染Popup，详见example.
tooltip Object optional 柱图提示框
color Array optional 柱图各部分颜色
anchor String optional 柱图锚点位置，可以是以下值之一：'center'、'top'、'bottom'、'left'、'right'
barWidth Number optional 柱条的宽度，不设时自适应。可以是绝对值例如40或者百分数例如'60%'
width String optional 柱图的宽度
height String optional 柱图的高度
legendRight String optional 图例位置，图例相对于右边偏移多少像素
legendBottom String optional 图例位置，图例相对于底部偏移多少像素
Author:
  • zhoue
Example:
//直接添加柱图图层
var data = [
	{
		type: 'Feature',
		geometry: {
			type: 'Point',
			coordinates: [114.25,30.54]
		},
		properties: {
			name:"武汉",
			data:[
				{value:300000, name:"老年"},
				{value:600000, name:"中年}，
				{value:500000,name:" 青年}
			]
		}
	},
	{
		type: 'Feature',
		geometry: {
			type: 'Point',
			coordinates: [116.39127,39.9071]
		},
		properties: {
			name:"北京",
			data:[
				{value:200000, name:"老年"},
				{value:500000, name:"中年"},
				{value:400000,name:" 青年"}		
			]
		}
	},
	{
		type: 'Feature',
		geometry: {
			type: 'Point',
			coordinates: [104.01,30.86]
		},
		properties: {
			name:"成都",
			data:[
				{value:1300000, name:"老年"},
				{value:400000, name:"中年"},
				{value:500000,name:" 青年"}		
			]
		}
	},
	{
		type: 'Feature',
		geometry: {
			type: 'Point',
			coordinates: [123.48,41.85]
		},
		properties: {
			name:"沈阳",
			data:[
				{value:200000, name:"老年"},
				{value:1500000, name:"中年"},
				{value:400000,name:" 青年"}		
			]
		}
	},
	{
		type: 'Feature',
		geometry: {
			type: 'Point',
			coordinates: [113.29,23.22]
		},
		properties: {
			name:"广州",
			data:[
				{value:200000, name:"老年"},
				{value:500000, name:"中年"},
				{value:1400000,name:" 青年"}		
			]
		}
	},
	{
		type: 'Feature',
		geometry: {
			type: 'Point',
			coordinates: [121.20,31.61]
		},
		properties: {
			name:"上海",
			data:[
				{value:800000, name:"老年"},
				{value:1800000, name:"中年"},
				{value:400000,name:" 青年"}		
			]
		}
	},
	{
		type: 'Feature',
		geometry: {
			type: 'Point',
			coordinates: [91.05,29.72]
		},
		properties: {
			name:"拉萨",
			data:[
					{value:600000, name:"老年"},
					{value:100000, name:"中年"},
					{value:2000000,name:" 青年"}	
			]
		}
	 }
];
var geoBarLayer = new Cesium.GeoBarLayer({
     viewer: viewer,
     anchor:'center',
});
geoBarLayer.addTo(viewer);
// 或者
// viewer.effectLayers.add(geoBarLayer);
geoBarLayer.setData(data);

//使用echarts添加饼图图层
var data = [
	{
		type: 'Feature',
		geometry: {
			type: 'Point',
			coordinates: [114.25,30.54]
		},
		properties: {
			name:"武汉",
			data:[
				{value:300000, name:"老年"},
				{value:600000, name:"中年},
				{value:500000,name:" 青年}
			]
		}
	},
	{
		type: 'Feature',
		geometry: {
			type: 'Point',
			coordinates: [116.39127,39.9071]
		},
		properties: {
			name:"北京",
			data:[
				{value:200000, name:"老年"},
				{value:500000, name:"中年"},
				{value:400000,name:" 青年"}		
			]
		}
	},
	{
		type: 'Feature',
		geometry: {
			type: 'Point',
			coordinates: [104.01,30.86]
		},
		properties: {
			name:"成都",
			data:[
				{value:1300000, name:"老年"},
				{value:400000, name:"中年"},
				{value:500000,name:" 青年"}		
			]
		}
	},
	{
		type: 'Feature',
		geometry: {
			type: 'Point',
			coordinates: [123.48,41.85]
		},
		properties: {
			name:"沈阳",
			data:[
				{value:200000, name:"老年"},
				{value:1500000, name:"中年"},
				{value:400000,name:" 青年"}		
			]
		}
	},
	{
		type: 'Feature',
		geometry: {
			type: 'Point',
			coordinates: [113.29,23.22]
		},
		properties: {
			name:"广州",
			data:[
				{value:200000, name:"老年"},
				{value:500000, name:"中年"},
				{value:1400000,name:" 青年"}		
			]
		}
	},
	{
		type: 'Feature',
		geometry: {
			type: 'Point',
			coordinates: [121.20,31.61]
		},
		properties: {
			name:"上海",
			data:[
				{value:800000, name:"老年"},
				{value:1800000, name:"中年"},
				{value:400000,name:" 青年"}		
			]
		}
	},
	{
		type: 'Feature',
		geometry: {
			type: 'Point',
			coordinates: [91.05,29.72]
		},
		properties: {
			name:"拉萨",
			data:[
					{value:600000, name:"老年"},
					{value:100000, name:"中年"},
					{value:2000000,name:" 青年"}	
			]
		}
	 }
];
var color = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
function myRenderer(feature, features, target ) {
     let canvasDom = document.createElement('div');
     canvasDom.style.width = "200px";
     canvasDom.style.height = "200px";
     let myChart = echarts.init(canvasDom);
     var option = {
         color: color,
         tooltip: {
             trigger: 'item',
             formatter: "{b}: {d}%",
         },
         series: [{	
             type:'bar',
             label: {
                 normal:{
                     show:false
                 },
             },
             center:['50%', '50%'],
             radius: [0,50],
             data:feature.properties.data,
         }]
     };
     option && myChart.setOption(option);
     return canvasDom;
 }
var geoBarLayer = new Cesium.GeoBarLayer({
		viewer: viewer,
		featureRenderer: myRenderer
});
geoBarLayer.addTo(viewer);
geoBarLayer.setData(data);

Extends

Methods

addLegend()

添加图例

addTo(map)

绑定到三维地图
Name Type Description
map viewer
Inherited From:

destroy()

销毁图层对象

getData()

获得图层数据

getDataSource()

获取图层数据源

hide()

隐藏图层

pickFeatures(pickedFeatures, windowPosition) → Object

拾取要素
Name Type Description
pickedFeatures Array 场景中被拾取的对象集合，需要在图层自己内部判断识别出属于自己的，并挂接上图层的属性信息
windowPosition Cartesian2 画布的二维坐标
Returns:
返回固定形态的结构数据
Example:
//返回结构参考样例
{
     eventType: ScreenSpaceEventType.LEFT_CLICK,
     originalLayer: GeoBarLayer,
     feature: popup._feature
}

remove()

将图层从视图中移除

removeDataSource()

移除图层数据源

removeLegend()

移除图例

render()

渲染图层

setData(data)

设置图层的数据
Name Type Description
data Array 要素集合，此处必须是点要素集合。例如[{type: 'Feature',geometry: {type: 'Point',coordinates: [117.177, 34.281, 0]}}, {type: 'Feature',geometry: {type: 'Point',coordinates: [117.177, 34.281, 300]}}...]， 如果坐标没有指定高程值，则默认是0

setDataSource(dataSource)

设置图层数据源
Name Type Description
dataSource GeoDataSource

setFeatureRenderer(featureRendererCallBack)

设置要素的渲染器，是一个函数，具体见构造函数的描述
Name Type Description
featureRendererCallBack function

show()

显示图层