Hi everyone
I am trying to draw some vector tiles by using QuadtreePrimitive in the Sandcastle demo of Cesium 1.16.
-
It works in 1.16, but the performance is not good (it will draw lots of rectangles in very detailed levels), I think the problem might be an improper geometricError, but I don’t know how to change the geometricError in each level to draw less rectangles.
-
Another problem is the code in 1.16 sandcastle doesn’t work in 1.32. It doesn’t draw rectangles anymore.
var DemoTileProvider = function() {
this._quadtree = undefined;
this._tilingScheme = new Cesium.GeographicTilingScheme();
this._errorEvent = new Cesium.Event();
this._levelZeroMaximumError = Cesium.QuadtreeTileProvider.computeDefaultLevelZeroMaximumGeometricError(this._tilingScheme);
};
Object.defineProperties(DemoTileProvider.prototype, {
quadtree : {
get : function() {
return this._quadtree;
},
set : function(value) {
this._quadtree = value;
}
},
ready : {
get : function() {
return true;
}
},
tilingScheme : {
get : function() {
return this._tilingScheme;
}
},
errorEvent : {
get : function() {
return this._errorEvent;
}
}
});
DemoTileProvider.prototype.beginUpdate = function(frameState) {
};
DemoTileProvider.prototype.endUpdate = function(frameState) {
};
DemoTileProvider.prototype.getLevelMaximumGeometricError = function(level) {
return this._levelZeroMaximumError / (1 << level);
};
DemoTileProvider.prototype.loadTile = function(frameState, tile) {
if (tile.state === Cesium.QuadtreeTileLoadState.START) {
tile.data = {
primitive : undefined,
freeResources : function() {
if (Cesium.defined(this.primitive)) {
this.primitive.destroy();
this.primitive = undefined;
}
}
};
var color = Cesium.Color.fromBytes(255, 0, 0, 255);
if(tile.rectangle.west>=-Cesium.Math.PI&&tile.rectangle.east<=Cesium.Math.PI){ //Here is the code I add to make it work in Cesium 1.16
tile.data.primitive = new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : new Cesium.RectangleOutlineGeometry({
rectangle : tile.rectangle
}),
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(color)
}
}),
appearance : new Cesium.PerInstanceColorAppearance({
flat : true
})
});
tile.data.boundingSphere3D = Cesium.BoundingSphere.fromRectangle3D(tile.rectangle);
tile.data.boundingSphere2D = Cesium.BoundingSphere.fromRectangle2D(tile.rectangle, frameState.mapProjection);
Cesium.Cartesian3.fromElements(tile.data.boundingSphere2D.center.z, tile.data.boundingSphere2D.center.x, tile.data.boundingSphere2D.center.y, tile.data.boundingSphere2D.center);
tile.state = Cesium.QuadtreeTileLoadState.LOADING;
}
}
if (tile.state === Cesium.QuadtreeTileLoadState.LOADING) {
tile.data.primitive.update(frameState);
if (tile.data.primitive.ready) {
tile.state = Cesium.QuadtreeTileLoadState.DONE;
tile.renderable = true;
}
}
};
DemoTileProvider.prototype.computeTileVisibility = function(tile, frameState, occluders) {
var boundingSphere;
if (frameState.mode === Cesium.SceneMode.SCENE3D) {
boundingSphere = tile.data.boundingSphere3D;
} else {
boundingSphere = tile.data.boundingSphere2D;
}
return frameState.cullingVolume.computeVisibility(boundingSphere);
};
DemoTileProvider.prototype.showTileThisFrame = function(tile, frameState) {
tile.data.primitive.update(frameState);
};
var subtractScratch = new Cesium.Cartesian3();
DemoTileProvider.prototype.computeDistanceToTile = function(tile, frameState) {
var boundingSphere;
if (frameState.mode === Cesium.SceneMode.SCENE3D) {
boundingSphere = tile.data.boundingSphere3D;
} else {
boundingSphere = tile.data.boundingSphere2D;
}
return Math.max(0.0, Cesium.Cartesian3.magnitude(Cesium.Cartesian3.subtract(boundingSphere.center, frameState.camera.positionWC, subtractScratch)) - boundingSphere.radius);
};
DemoTileProvider.prototype.isDestroyed = function() {
return false;
};
DemoTileProvider.prototype.destroy = function() {
return Cesium.destroyObject(this);
};
var viewer = new Cesium.Viewer(‘cesiumContainer’);
var scene = viewer.scene;
var primitives = scene.primitives;
primitives.add(new Cesium.QuadtreePrimitive({
tileProvider : new DemoTileProvider()
}));
``
How should I do to make it work in 1.32 and draw less rectangle by modifying the geometricError?
Thank you.
Chris
