我使用React.js与Cesium.js创建项目。
我必须在地图上加条形说明。我已经在地图上创建了条形图,现在我必须在一个省的每个条形图上创建这些条形图,但是我遇到了问题。
我见过https://cesiumjs.org/demos/4DChoroplethMap,我不知道他如何在每个省的每个酒吧添加说明。
我的代码如下:
import React from "react";
import { Color, Math as mathCesium, Cartesian3, BoundingSphere, Cartesian2, VerticalOrigin } from "cesium";
import { Viewer, GeoJsonDataSource } from "resium";
import usa from './usa.json';
export default class Cesium extends React.PureComponent {
render() {
return (
<Viewer full>
<GeoJsonDataSource data={usa}
onLoad={dataSource => {
mathCesium.setRandomNumberSeed(0)
const entities = dataSource.entities.values;
const colorHash = {};
const entityLabelCollectionIdx = {}
const entityLabelCollection = [];
let id = 0;
let labelEntity;
let positions;
let center;
for (let i = 0; i < entities.length; i++) {
let entity = entities[i];
let name = entity.name;
let color = colorHash[name];
if (!color) {
color = Color.fromRandom({
alpha : 1
});
colorHash[name] = color;
}
entity.polygon.material = color;
entity.polygon.outline = false;
entity.polygon.extrudedHeight = Math.floor(Math.random() * (800000 - 50000 + 1)) + 50000;
if (!entityLabelCollectionIdx[name]) {
labelEntity = {
name: (id + "_label"),
label: {
text: name + "",
font: '14px Arial',
outlineWidth: 0,
fillColor: Color.WHITE,
verticalOrigin: VerticalOrigin.TOP,
show: true,
pixelOffset: new Cartesian2(-10.0, -10.0),
showBackground: true,
position : Cartesian3.fromDegrees(-75.10, 39.57, entity.polygon.extrudedHeight),
}
};
positions = entity.polygon.hierarchy['_value'].positions;
center = BoundingSphere.fromPoints(positions).center;
labelEntity.position = new Cartesian3(center.x, center.y, center.z+=300000.0);
entityLabelCollection.push(labelEntity);
entityLabelCollectionIdx[name] = labelEntity;
}
entityLabelCollection.forEach(function(item) {
dataSource.entities.add(item);
});
}
}}/>
</Viewer>
);
}
}
我尝试使用标签,但无法按照我想要的方式使用。有人知道我该如何处理?
我曾经使用https://github.com/samateja/D3topoJson中的topoJOSN