Текст на цезиевом ярлыке на 3d панели - PullRequest
Новая
       31

Текст на цезиевом ярлыке на 3d панели

0 голосов
/ 14 января 2019

Я использую React.js для создания проекта с Caesium.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>
    );
  }
}

Я пытаюсь использовать лейбл, но он не работает так, как я хочу. У кого-то есть идея, как я могу справиться с этим?

Я использовал topoJOSN из https://github.com/samateja/D3topoJson

...