Good Day all,
I've been working with Cesium for a bit now and I started when Primitive Collections were the thing to use. I had click and drag primitive rendering working, but now I want to upgrade Cesium and move on to entities. I moved over the code, refactored, and can click and drag to draw shapes; however, before I was able to flip the asynchronous flag and it would render as I moved the mouse. Now, I'm unable to do that. I tried setting 'allowDataSourcesToSuspendAnimation' on the viewer to false, but to no avail. Any help would be extremely appreciated.
In my naivety I forgot to add a code snippet to my question. This is in a clock tick event listener that only fires when mouse down is happening(Boolean value set to true)
var radius = Cesium.Cartesian3.distance(cartesianStartMousePosition, cartesianMousePosition);
if (radius > 0) {
if (currentEntity && currentEntity.id) {
currentEntity.position = cartesianStartMousePosition;
currentEntity.ellipse = {
semiMinorAxis: radius,
semiMajorAxis: radius,
material: new Cesium.ColorMaterialProperty(myColor)
};
currentEntity.label = {
text: 'New Overlay',
scale: 0.35
};
overlayEntities.resumeEvents();
}
else {
currentEntity = new Cesium.Entity({
position: cartesianStartMousePosition,
ellipse: {
semiMinorAxis: radius,
semiMajorAxis: radius,
material: new Cesium.ColorMaterialProperty(myColor)
},
label: {
text: 'New Overlay',
scale: 0.35
},
isSaved: false
});
overlayEntities.add(currentEntity);
}
bDrewPrim = true;
}
It looks to me like you're doing too much work to update the entity. You only need to set the values that have changed, and you should only do that if the change was substantial enough to warrant a graphics update. Try replacing the top half of your if statement with something like this:
var lastRadius = 0;
...
if (radius > 0 && !Cesium.Math.equalsEpsilon(radius, lastRadius, Cesium.Math.EPSILON2)) {
lastRadius = radius;
if (currentEntity && currentEntity.id) {
currentEntity.ellipse.semiMinorAxis = radius;
currentEntity.ellipse.semiMajorAxis = radius;
} else {
// Same as before...
I believe the ellipsoid primitive is being built on a worker thread, so this code tries to avoid setting the new radius every tick unless a real change has been applied to it.
Also, you don't show your mouse down handler, but make sure that you're setting this flag, if you aren't already setting it:
viewer.scene.screenSpaceCameraController.enableInputs = false;
This stops the globe from spinning while you drag-select the ellipse. You can reset this to true on mouse up.
Related
this.drawInteraction = new ol.interaction.Draw({
features: this.sourceFeatures,
type: 'Polygon',
geometryFunction: (coords, geom) => this.onDrawGeometryFunction(coords, geom)
});
private onDrawGeometryFunction(coords, geom): void {
if (!geom) {
geom = new ol.geom.Polygon(null);
}
if (coords[0].length !== this.coords_length) {
//if intersects undo last point
if (this.intersectionsExistInPolygon(coords[0])) {
this.drawInteraction.removeLastPoint();
return geom;
}
this.coords_length = coords[0].length;
}
geom.setCoordinates(coords);
return geom;
}
I can able to identify the intersection until I click on the starting point to complete the draw(by connecting through the drawn line). Is there a way to listen the draw complete(but not the 'drawend') before it happen? to keep the draw mode active by removing the intersecting last point.
Well, I was using Openlayers#v3.14.2 this finishcondition is available from v3.16.0. So I had to update only the version it worked fine..
I'm trying to draw few polygons that dynamically change their position.
The problem is that by using:
onUpdatePolygonData(data){
/// DO SOME CALCULATIONS TO GET point1, point2 point3...
if(Cesium.defined(entity.polygon)
entity.polygon.hierarchy = new Cesium.PolygonHierarchy([point1, point2, point3])
else entity.polygon = viewer.entities.add({
polygon = new Cesium.PolygonGraphics({
hierarchy: new Cesium.PolygonHierarchy([point1, point2, point3])
})
});
}
The result is disturbing blinking on the map.
Updating location occurs roughly once in 40ms though seems like frequency of updates have nothing to do with it.
Anyone knows a way to make the changes smoother?
Thanks for help,
David.
You need to use Callbackproperty, it executed every frame so it won't blink and be smoother.
In typescript you can write:
let poly = viewer.entities.add({
polygon: {
hierarchy: new CallbackProperty (() => {
return new PolygonHierarchy([point1, point2,
point3]) ;
}, false)
});
We are working on a school project where the aim is to create a map in which based on the amount of zoom the layer switches from one aggregate level to a smaller aggregate level. Additionally, we have several groups of layers based on a theme for which this needs to apply. So you'd click on a theme and a new group of layers that switches based on zoom level become active and when you click another theme another group of layers become active and switch based on zoom level. This means that the themes are exclusionary, ideally you can't have more than one theme active at a time.
We tried to make this work in several ways already but without much success. Using the L.Control.Layers we were unable to group different layers together under one radio button and have them switch based on zoom since the layer control build into leaflet always splits them up into separate ones. Even using L.layerGroup to combine several layer variables or creating several layers into one variable and then adding them to the map using l.control.layer.
We also tried to use L.easyButton (https://github.com/CliffCloud/Leaflet.EasyButton). This allowed us to put the variables under one button and add a zoom based layer switching inside of it. However, the issue here is that we are unable to deactivate the functionality once activated. Which results in several of them being active at one point and overlapping each other.
If possible we would like to know if we should use a different approach or if either the leaflet control function or the use of easyButton could work and how?
This is example code for one of the buttons, which would appear several times but show a different theme:
L.easyButton( '<span class="star">★</span>', function (polygon) {
var ejerlav_polygon = new L.tileLayer.betterWms(
'http://[IP]:[PORT]/geoserver/prlayer/wms', {
layers: 'prlayer:ejerlav',
transparent: true,
styles: 'polygon',
format: 'image/png'});
var municipality_polygon = new L.tileLayer.betterWms(
'http://[IP]:[PORT]/geoserver/prlayer/wms', {
layers: 'prlayer:municipality',
transparent: true,
styles: 'polygon',
format: 'image/png'});
map.on("zoomend", function() {
if (map.getZoom() <= 10 && map.getZoom() >= 2) {
map.addLayer(municipality_polygon);
} else if (map.getZoom() > 10 || map.getZoom() < 2) {
map.removeLayer(municipality_polygon);
}
});
map.on("zoomend", function() {
if (map.getZoom() <= 11 && map.getZoom() >= 11) {
map.addLayer(ejerlav_polygon);
} else if (map.getZoom() > 11 || map.getZoom() < 11) {
map.removeLayer(ejerlav_polygon);
}
});
}).addTo(map);
If my understanding is correct, you would like to give the user the ability to switch between "themes" (some sort of group of layers that switch themselves based on the map current zoom level), possibly using Leaflet Layers Control?
And regarding the switch based on map zoom, you cannot just change the Tile Layer template URL because you use some WMS?
As for the latter functionality (switching layers within a group / theme based on map zoom), a "simple" solution would be to create your own type of layer that will listen to map "zoomend" event and change the Tile Layer WMS accordingly.
L.LayerSwitchByZoom = L.Class.extend({
initialize: function (layersArray) {
var self = this;
this._layersByZoom = layersArray;
this._maxZoom = layersArray.length - 1;
this._switchByZoomReferenced = function () {
self._switchByZoom();
};
},
onAdd: function (map) {
this._map = map;
map.on("zoomend", this._switchByZoomReferenced);
this._switchByZoom();
},
onRemove: function (map) {
map.off("zoomend", this._switchByZoomReferenced);
this._removeCurrentLayer();
this._map = null;
},
addTo: function (map) {
map.addLayer(this);
return this;
},
_switchByZoom: function () {
var map = this._map,
z = Math.min(map.getZoom(), this._maxZoom);
this._removeCurrentLayer();
this._currentLayer = this._layersByZoom[z];
map.addLayer(this._currentLayer);
},
_removeCurrentLayer: function () {
if (this._currentLayer) {
map.removeLayer(this._currentLayer);
}
}
});
You would then instantiate that layer "theme" / group by specifying an array of layers (your Tile Layers WMS), where the array index corresponds to the zoom level at which that Tile Layer should appear.
var myLayerSwitchByZoomA = new L.LayerSwitchByZoom([
osmMapnik, // zoom 0, osmMapnik is a Tile Layer or any other layer
osmDE, // zoom 1
osmFR, // zoom 2
osmHOT // zoom 3, etc.
]);
Once this new layer type is set, you can use it in the Layers Control like any other type of Layer / Tile Layer, etc.
L.control.layers({
"OpenStreetMap": myLayerSwitchByZoomA,
"ThunderForest": myLayerSwitchByZoomB
}).addTo(map);
Demo: http://jsfiddle.net/ve2huzxw/85/
Note that you could further improve the implementation of L.LayerSwitchByZoom to avoid flickering when changing the layer after zoom end, etc.
I'm very new in action script. I have single frame timeline and there is function that moves movie clip verticaly. i want to repeat this only three times.
The code works, I'm just not sure if this is the correct way or if it's too complicated.
var pocet:Number = 0;
pruh.addEventListener(Event.ENTER_FRAME, fl_AnimateVertically);
function fl_AnimateVertically(event:Event)
{
if (pruh.y >= stage.stageHeight) {
pocet++;
}
if (pruh.y < stage.stageHeight) {
pruh.y += 3;
}
else {
pruh.y = 0 - pruh.y;
}
if (pocet == 3) {
pruh.removeEventListener(Event.ENTER_FRAME, fl_AnimateVertically);
}
}
thanx
Congratulations on achieving your goal.
Your code could be improved in terms of readability. You have fl_AnimateVertically as a descriptive name, but other than that it's kind of hard to figure out what's going on exactly. I mean sure it adds 3 to y which probably results in movement, but it's not trivial to understand the exact behaviour.
That's why you want to use abstraction or more of a top down approach as it often called..
What you are doing at the moment is adding a value to the coordinate, which as a result creates an animation. What you actually want is to create an animation, without going into details what that actually means.
And sure enough, people created animations with code before. That's why you can create an animation in the abstract sense: An animation is the change of a property of an object over time. In the realm of flash an animation is called a tween and there's a class doing exactly that..
Let's take the example code there:
var myTween:Tween = new Tween(myObject, "x", Elastic.easeOut, 0, 300, 3, true);
And apply it to your situation.
var verticalAnimation:Tween = new Tween(pruh, "y", Elastic.easeOut, pruh.y, stage.stageHeight, 3, true);
You have to adjust the duration to your liking. I hope you see how this is easier to read and maintain, because you specify properties of the animation like duration. You can also specify easing, which makes the motion more interesting.
Ok, this is only one animation, but you want 3, right?
More precisely, you want to do that same animation again, when it finished.
And you can do exactly that:
var animationCount:uint = 0;
var verticalAnimation:Tween = new Tween(pruh, "y", Elastic.easeOut, pruh.y, stage.stageHeight, 3, true);
verticalAnimation.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish); // wait for the animation to be finished
function onMotionFinish(e:TweenEvent):void
{
animationCount++; // add 1 to the counter
if(animationCount >= 3) // check how many times the animation finished so far
{
// if it was the last one, remove the listener
verticalAnimation.removeEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);
}
else
{
// otherwise rewind and start again
verticalAnimation.rewind();
verticalAnimation.start();
}
}
There are other libraries than this built in Tween class that are far more powerful.
The one from greensock is very popular and easy to use you can find the documentation for the flash version here
Try this
var pocet:Number = 0;
pruh.addEventListener(Event.ENTER_FRAME, fl_AnimateVertically);
var startY:int=pruh.y;
function fl_AnimateVertically(event:Event)
{
if (pruh.y >= stage.stageHeight) {
pocet++;
pruh.y=startY;
}
if (pruh.y < stage.stageHeight) {
pruh.y += 3;
}
else {
pruh.y = 0 - pruh.y;
}
if (pocet ==3) {
pruh.removeEventListener(Event.ENTER_FRAME, fl_AnimateVertically);
trace("done");
}
}
I'm trying to implement a rubber-band selection box in Dojo's gfx with Canvas as the renderer. My intention is to have the selection box drawn when the mouse is clicked down and dragged, then disappear once the mouse is released. Unfortunately I've run into a problem.
jsFiddle example: http://jsfiddle.net/7F9fy/
The main problem is somewhere in onmousemove (or related to it):
whiteRect.connect("onmousemove",function(e) {
if(isMouseDown) {
if(whiteRect.groupSelector_) {
pStat.innerHTML = "dragging...";
console.debug("dragging...");
e.stopImmediatePropagation();
e.preventDefault();
var ex = (e.x ? e.x : e.clientX);
var ey = (e.y ? e.y : e.clientY);
if(groupSelector) {
// Also tried getShape, editing that shape, and setShape on groupSelector--same
// behavior, though.
var rectX = (ex - cnvDiv.offsetLeft < whiteRect.groupSelector_.x ? ex - cnvDiv.offsetLeft : whiteRect.groupSelector_.x);
var rectY = (ey - cnvDiv.offsetTop < whiteRect.groupSelector_.y ? ey - cnvDiv.offsetTop : whiteRect.groupSelector_.y);
surface.remove(groupSelector);
groupSelector = surface.createRect({
x: rectX,
y: rectY,
width: Math.abs(ex - cnvDiv.offsetLeft - whiteRect.groupSelector_.x),
height: Math.abs(ey - cnvDiv.offsetTop - whiteRect.groupSelector_.y)
}).setStroke({color: "blue", width: 3});
} else {
groupSelector = surface.createRect({
x: whiteRect.groupSelector_.x,
y: whiteRect.groupSelector_.y,
width: Math.abs(ex - cnvDiv.offsetLeft - whiteRect.groupSelector_.x),
height: Math.abs(ey - cnvDiv.offsetTop - whiteRect.groupSelector_.y)
}).setStroke({color: "blue", width: 3});
}
e.stopPropagation();
}
}
});
If I hold down the left mouse button in the shape/group (the white square in the above example) to which my mouse events are connected and start dragging, the box begins to draw, following my drag motion. When I release the mouse, sometimes the box disappears, and sometimes, it doesn't. When it doesn't, the box keeps being drawn and follows mouse movements as defined to do when I'm dragging.
In the jsFiddle, if you watch console.debug or the paragraph reporter under the canvas, you'll see that on occasion, onmouseup doesn't fire when you release the mouse (I checked for mouseup as well, but that has the same issue). In cases where onmouseup never fires, onmousemove continues to fire. If you click again, sometimes a full mouse click series fires (down, up, click, and move), which then makes the drawn rectangle disappear. Sometimes this doesn't happen, though, and onmousemove keeps firing. If you click after the drag/onmousemove becomes 'stuck' and nothing happens, there are no debug lines or changes to reporters for those events, so it's as if all mouse events except onmousemove are being squelched. I tried adding in stopPropagation, stopImmediatePropagation, and preventDefault, but that didn't help. I also tried using Dojo event's stop, but that didn't change the behavior.
For re-drawing the box in onmousemove, I've tried both 'getShape -> edit properties -> setShape' as well as deleting the shape and making a whole new one; neither of these methods stopped the problem and there wasn't any appreciable difference between them.
I'm using Dojo 1.8.3, and this happens in both Chrome (v25) and Firefox (v19), with either Canvas or SVG as the renderer.
Thoughts? Am I missing something obvious here?
Sorted it out. The problem is the onmouseup event when you decide to stop dragging out the shape can fire on the underlying/attached shape, or on the shape you're dragging. It's random, depending on the cursor position, but favors the drawn shape if you don't have an offset or delay in your drag. (Moveable.js and Mover.js in dojox/gfx pointed me in the right direction.)
I changed my box to a path in the course of trying to make it work, and this seems to perform better, but isn't necessary.
The key was to make a general 'onMouseUp' function, then call that from both the originator-shape's onmouseup as well as the dragged shape's onmouseup. My example is sloppy, but I hope it gets the point across.
jsFiddle: http://jsfiddle.net/n3KGY/1/
Key code:
// General method to clear out a selector if
// one was being drawn.
var selectorMouseUp = function(e) {
reporter.innerHTML = "onmouseup";
isMouseDown = false;
whiteRect.groupSelector_ = null;
if(groupSelector) {
if(selectorUp) {
groupSelector.disconnect(selectorUp);
}
surface.remove(groupSelector);
groupSelector = null;
}
e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
};
// Mouseup event for the background/workspace
whiteRect.connect("onmouseup",function(e){
selectorMouseUp(e);
});
// Make a selector as a path on the surface
// and attach a mouseup to it
var makeSelector = function(x,y,w,h) {
groupSelector = surface.createPath()
.moveTo(x,y)
.hLineTo(x+w).vLineTo(y+h).hLineTo(x).vLineTo(y)
.setStroke({color: "blue", width: 3})
.closePath();
// Attach the same mouseup method as the workspace/background
selectorUp = groupSelector.connect("onmouseup",function(e){
reporter.innerHTML = "onmouseup (selector)";
selectorMouseUp(e);
});
};
bigRect.connect("onmousemove",function(e){
if(isMouseDown) {
if(bigRect.groupSelector_) {
var ex = e.clientX;
var ey = e.clientY;
reporter.innerHTML = "dragging at " + ex+","+ey;
var downX = bigRect.groupSelector_.x;
var downY = bigRect.groupSelector_.y;
var leadingX = (ex - grn.offsetLeft < downX ? ex - grn.offsetLeft : downX);
var leadingY = (ey - grn.offsetTop < downY ? ey - grn.offsetTop : downY);
var selWidth = Math.abs(ex - grn.offsetLeft - downX);
var selHeight = Math.abs(ey - grn.offsetTop - downY);
if(groupSelector) {
// If there's already a selector being drawn, get rid of it.
groupSelector.disconnect(selectorUp);
surface.remove(groupSelector);
}
// Draw the current selector
makeSelector(leadingX,leadingY,selWidth,selHeight);
e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
}
}
});