3d栏上的铯标签文本

时间:2019-01-14 16:39:51

标签: javascript bar-chart data-visualization visualization cesium

我使用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

0 个答案:

没有答案