Comments (12)
You might be right. I will take a look into seeing if that works and get back ASAP
from resium.
I tried 10,000 entities and updating 20 entities every 1s (every 10ms is too heavy), but it works well. (I recommend PointPrimitive than Entity because there are too many points)
But are you using CameraFlyTo or CameraFlyToBoundingSphere component?
I found a bug: camera position is changed every rendering time If it is used as following.
// In this code, camera position is changed every 1s
class Example extends React.PureComponent {
state = { count: 0 };
dest = Cartesian3.fromDegrees(0, 0, 100000);
componentDidMount() {
setInterval(() => {
this.setState(s => ({ count: s.count + 1 })); // update
}, 1000);
}
render() {
return (
<Viewer>
<CameraFlyTo destination={this.dest} duration={0} />
</Viewer>
);
}
}
But it works well as following
// In this code, camera position never change every 1s
class Test extends React.PureComponent {
state = { count: 0 };
dest = Cartesian3.fromDegrees(0, 0, 100000);
componentDidMount() {
setInterval(() => {
this.setState(s => ({ count: s.count + 1 })); // update
}, 1000);
}
render() {
return (
<CameraFlyTo destination={this.dest} duration={0} />
);
}
}
class Example extends React.PureComponent {
render() {
return (
<Viewer>
<Test />
</Viewer>
);
}
}
It is a bug. I have fixed Resium and released new version. Please try v1.2.1!
from resium.
PointPrimitive example:
Documentation:
from resium.
Awesome thank you! I got it almost the speed I want.
from resium.
Hi, thank you for your bug reporting! I will investigate the code you provided.
from resium.
@tmercado It seems not to be a bug. Please fix your code:
return (
<Viewer full>
<Camera onMoveEnd={this.onMoveEnd} ref={ref => this.camera = ref} />
{entities}
</Viewer>
);
Isn't the issue be resolved even if you fix it?
from resium.
Update: used the code you provided and still having the same issue.
Again those entities will be changing location several times a second. With the previous version I wouldn't have any slow down until i hit around 20,000 entities where 20 entity updates would happen every millisecond.
from resium.
Ok, could you provide the code to reproduce that issue?
from resium.
reducer.js
export default function reducer (state = initialState, action) {
switch (action.type) {
case EVENTS_RECEIVED: { // entity updates from backend server only 20 come in at a time
const events = state.get('events').toJS();
const nEvents = action.value;
const nKeys = Object.keys(nEvents);
for (let i = 0; i < nKeys.length; i++) {
events[nKeys[i]] = nEvents[nKeys[i]]; //update or add
}
return state.set('events',fromJS(events)); // update state
}
case GET_BASE_LAYERS_SUCCESS:
return state.set('baseLayers', fromJS(action.value));
default:
return state;
}
}
viewer.js
render() {
const entities = Object.values(events).map((e) => {
const lat = e.coordinates[0];
const long = e.coordinates[1];
const z = e.coordinates[2];
const color = entityColors[e.color]? entityColors[e.color] : '#FFFF00';
return (
<Entity
name={events.name}
position={Cartesian3.fromDegrees(lat, long, z)}
point={{ pixelSize: 5, color: Color.fromCssColorString(color) }} />
);
});
return(
<Viewer full>
<Camera ... />
{entities}
</Viewer>
);
}
let me know if you need more information
from resium.
I tried the following code but it works well.
index.js
import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Provider, connect } from "react-redux";
import { fromJS } from "immutable";
import App from "./app";
const EVENTS_RECEIVED = "EVENTS_RECEIVED";
const GET_BASE_LAYERS_SUCCESS = "GET_BASE_LAYERS_SUCCESS";
const initalState = fromJS({ events: {}, baseLayers: undefined });
const store = createStore((state = initalState, action) => {=
switch (action.type) {
case EVENTS_RECEIVED: {
// entity updates from backend server only 20 come in at a time
const events = state.get("events").toJS();
const nEvents = action.value;
const nKeys = Object.keys(nEvents);
for (let i = 0; i < nKeys.length; i++) {
events[nKeys[i]] = nEvents[nKeys[i]]; //update or add
}
return state.set("events", fromJS(events)); // update state
}
case GET_BASE_LAYERS_SUCCESS:
return state.set("baseLayers", fromJS(action.value));
default:
return state;
}
});
const WrappedApp = connect(state => ({ events: state.get("events").toJS() }))(App);
ReactDOM.render(
<Provider store={store}>
<WrappedApp />
</Provider>,
document.getElementById("root"),
);
// fetch data
window.setTimeout(() => {
const act = {
type: EVENTS_RECEIVED,
value: new Array(20).fill().reduce( // generate dummy data
(a, b, i) => ({
...a,
[`test${i}`]: {
coordinates: [Math.random() * 360 - 180, Math.random() * 180 - 90, 100],
},
}),
{},
),
};
store.dispatch(act);
}, 3000);
app.js
import React from "react";
import { hot } from "react-hot-loader";
import { Cartesian3, Color } from "cesium";
import { Viewer, Entity } from "resium";
const App = ({ events }) => (
<Viewer full>
{Object.entries(events).map(([key, e]) => {
const lat = e.coordinates[0];
const long = e.coordinates[1];
const z = e.coordinates[2];
// const color = entityColors[e.color] ? entityColors[e.color] : "#FFFF00";
return (
<Entity
key={key}
name={key}
position={Cartesian3.fromDegrees(lat, long, z)}
point={{ pixelSize: 5, color: Color.fromCssColorString("#fff") }}
/>
);
})}
</Viewer>
);
export default hot(module)(App);
I think key prop is necessary in Entity component as bellow.
return (
<Entity
key={key} // something like id
name={events.name}
position={Cartesian3.fromDegrees(lat, long, z)}
point={{ pixelSize: 5, color: Color.fromCssColorString(color) }} />
);
If you don't mind, provide the whole project.
from resium.
Can you try with 10,000 entities (then update 20 of them every 10ms)? Unfortunately that is pretty much the whole project. I might have to do some culling when dots are behind the globe/out of view.
from resium.
I'm currently not using CameraFlyTo or CameraFlyToBoundingSphere. Do you have an example of the Point Primitive?
from resium.
Related Issues (20)
- ImageryLayer does not re-render when WMS imagery provider changes HOT 1
- Storybook composition
- Get method is not allowed on a 3dtile asset
- How to change entity's color when hovering HOT 1
- how can i Setting default home view? HOT 1
- I want to make the earth rotate
- Image Material (ImageMaterialProperty) not working with Entity PolygonGraphics with latest cesium release (1.111)
- How to replace the Viewer Infobox with a custom React component? HOT 1
- Add All assets in Bundle.
- Viewer Render problem HOT 5
- Support for Yarn Pnp
- How display coordinates and orientation aircraft ?
- 3DTileset not receiving any url. Reopen
- EntityDescription not loading always HOT 1
- Trying to open index.html from build HOT 1
- Update documentation to support recent Next versions
- The Graphics component using resium in version 1.17.3 has no effect, but 1.17.2 does HOT 1
- Desactivate the rotate view in a 3D map
- Resium Entities not being removed/re-rendered from viewer once added HOT 2
- The map does not appear in version 1.17.3 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from resium.