Hello Patrick/Mathew,
we are trying to highlight the polygons(rendered through CZMLDataSource) based on mouse hover, the same pice of code works for left click but with mouse_move , It works fine for about 10 to 12 moves after that it is throwing weird issue of mouse hover event itself stopping .
please look at the below code for the mouse move hanlder, please guide me as to where we went wrong.
var highlightObj = null;
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(
function(movement) {
var pickedObject = scene.pick(movement.endPosition);
if (Cesium.defined(pickedObject) && (czmlDataSource.entities.getById(pickedObject.id.id))) {
if (highlightObj == null) {
highlightObj = czmlDataSource.entities.getById(pickedObject.id.id);
highlightObj.polygon.material.color.setValue(Cesium.Color.YELLOW);
}
} else if (highlightObj) {
highlightObj.polygon.material.color.setValue(Cesium.Color.WHITE);
highlightObj.polygon.material.color.setValue(Cesium.Color.RED);
highlightObj = null;
}
},
Cesium.ScreenSpaceEventType.MOUSE_MOVE
);
do i have to unbind the events, the same piece of code works fine with LEFT_CLICK;
it would be great if you could let me know what could be the problem,
thanks and regards
chandrika
Hello Patrick/Mathew,
please let me know whether czmlDataSource.entities.resumeEvents(); and czmlDataSource.entities.suspendEvents(); can help me stabilize the mouse hover , if so please guide me how to go about it. cause even after implementing the above it is still behaviong the weird way.
thanks adn regards
chandrika
What version of Cesium are you using? There were fixes in the recent versions that might have addressed this problem. Can you reproduce this in a small example and post it for us to look at?
Hello Mathew,
we are currently using cesium 1.5 version , please let us know in which of the versions this mouse hover error has been resolved.
Also haveupdated with the sample piece of code as given below .
var highlightObj = null;
this.options.map.handler.setInputAction(
function(movement) {
//czmlDataSource.entities.suspendEvents();
var pickedObject = scene.pick(movement.endPosition);
var highlightedObj;
if (Cesium.defined(pickedObject) && (czmlDataSource.entities.getById(pickedObject.id.id)) && layerData.styleMap) {
if (highlightObj == null) {
highlightObj = czmlDataSource.entities.getById(pickedObject.id.id);
entityHighlight = highlightObj;
console.log('mousehoverr');
console.log(highlightObj);
//highlight fill color for all geofeatures on mousehover
if (fillColor) {
var mouseHoverColor = cesiumDrawUtil._toCesiumColor(fillColor);
if (Cesium.defined(entityHighlight.polygon)) {
entityHighlight.polygon.material.color.setValue(mouseHoverColor);
} else if (Cesium.defined(entityHighlight.billboard)){
entityHighlight.billboard.color.setValue(mouseHoverColor);
} else if (Cesium.defined(entityHighlight.ellipse)) {
entityHighlight.ellipse.material.color.setValue(mouseHoverColor);
}
}
//highlight line color for all geofeatures like polygn, cylinder, extrudedPolygon on mousehover
if (lineColor) {
var mouseHoverLineColor = cesiumDrawUtil._toCesiumColor(lineColor);
if (Cesium.defined(entityHighlight.polyline)) {
entityHighlight.polyline.material.color.setValue(mouseHoverLineColor);
} else if (Cesium.defined(entityHighlight.polygon) && Cesium.defined(entityHighlight.polygon.outline) && Cesium.defined(entityHighlight.polygon.outlineColor)) {
entityHighlight.polygon.outlineColor.setValue(mouseHoverLineColor);
}
}
//highlight line width for all geofeatures like polygn, cylinder, extrudedPolygon on mousehover
if (lineWidth) {
if (Cesium.defined(entityHighlight.polyline) && Cesium.defined(entityHighlight.polyline.width)) {
entityHighlight.polyline.width._value = lineWidth;
} else if (Cesium.defined(entityHighlight.polygon) && Cesium.defined(entityHighlight.polygon.outline) && Cesium.defined(entityHighlight.polygon.outlineWidth)) {
entityHighlight.polygon.outlineWidth._value = lineWidth;
}
}
//highlight label color for all geofeatures like polygn, cylinder, extrudedPolygon on mousehover
if (labelColor) {
var mouseHoverLabelColor = cesiumDrawUtil._toCesiumColor(labelColor);
if (Cesium.defined(entityHighlight.label)) {
entityHighlight.label.fillColor.setValue(mouseHoverLabelColor);
} else { // another entity for gen placemark
var genPlacemarkEntityLabel = czmlDataSource.entities.getById(pickedObject.id.id + "placemark");
if (Cesium.defined(genPlacemarkEntityLabel) && Cesium.defined(genPlacemarkEntityLabel.label)) {
genPlacemarkEntityLabel.label.fillColor.setValue(mouseHoverLabelColor);
}
}
}
//highlight label width for all geofeatures like polygn, cylinder, extrudedPolygon on mousehover
if (labelScale) {
if (Cesium.defined(entityHighlight.label)) {
entityHighlight.label.scale.setValue(labelScale);
} else { // another entity for gen placemark
var genPlacemarkEntityLabelScale = czmlDataSource.entities.getById(pickedObject.id.id + "placemark");
if (Cesium.defined(genPlacemarkEntityLabelScale) && Cesium.defined(genPlacemarkEntityLabelScale.label)) {
genPlacemarkEntityLabelScale.label.scale.setValue(labelScale);
}
}
}
//......... more code
…
… out of mouse hover
else
} else if (highlightObj) {
//fill color for all geofeatures on removing from mousehover
console.log('else');
console.log(highlightObj);
if (Cesium.defined(normalCesiumColor)) {
if (Cesium.defined(highlightObj.polygon)) {
highlightObj.polygon.material.color.setValue(normalCesiumColor);
} else if (Cesium.defined(highlightObj.billboard)){
highlightObj.billboard.color.setValue(normalCesiumColor);
} else if (Cesium.defined(highlightObj.ellipse)) {
highlightObj.ellipse.material.color.setValue(normalCesiumColor);
}
}
//highlight line color for all geofeatures like polygn, cylinder, extrudedPolygon on
// removing the mousehover
if (Cesium.defined(lineColorNormalToCesium)) {
if (Cesium.defined(highlightObj.polyline)) {
highlightObj.polyline.material.color.setValue(lineColorNormalToCesium);
} else if (Cesium.defined(highlightObj.polygon) && Cesium.defined(highlightObj.polygon.outline) && Cesium.defined(highlightObj.polygon.outlineColor)) {
highlightObj.polygon.outlineColor.setValue(lineColorNormalToCesium);
}
}
//highlight line width for all geofeatures like polygn, cylinder, extrudedPolygon
// on removing the mousehover
if (Cesium.defined(lineWidthNormal)) {
if (Cesium.defined(highlightObj.polyline) && Cesium.defined(entityHighlight.polyline.width)) {
highlightObj.polyline.width._value = lineWidthNormal;
} else if (Cesium.defined(highlightObj.polygon) && Cesium.defined(highlightObj.polygon.outline) && Cesium.defined(highlightObj.polygon.outlineWidth)) {
highlightObj.polygon.outlineWidth._value = lineWidthNormal;
}
}
//highlight label color for all geofeatures like polygn, cylinder, extrudedPolygon on
// removing the mousehover
if (Cesium.defined(labelColorNormalToCesium)) {
if (Cesium.defined(highlightObj.label)) {
highlightObj.label.fillColor.setValue(labelColorNormalToCesium);
} else { // another entity for gen placemark
var genPlacemarkEntityLabelElse = czmlDataSource.entities.getById(highlightObj.id + "placemark");
if (Cesium.defined(genPlacemarkEntityLabelElse) && Cesium.defined(genPlacemarkEntityLabelElse.label)) {
genPlacemarkEntityLabelElse.label.fillColor.setValue(labelColorNormalToCesium);
}
}
}
//highlight label scale for all geofeatures like polygn, cylinder, extrudedPolygon on
// removing the mousehover
if (Cesium.defined(labelScaleNormal)) {
if (Cesium.defined(highlightObj.label)) {
highlightObj.label.scale.setValue(labelScaleNormal);
} else { // another entity for gen placemark
var genPlacemarkEntityLabelScaleElse = czmlDataSource.entities.getById(highlightObj.id + "placemark");
if (Cesium.defined(genPlacemarkEntityLabelScaleElse) && Cesium.defined(genPlacemarkEntityLabelScaleElse.label)) {
genPlacemarkEntityLabelScaleElse.label.scale.setValue(labelScaleNormal);
}
}
}....................................................................
… more code
.please let us know whether suspendEvents and resumeEvents can resolve the above issue.
thank you so much for the reply.
thanks and regards,
chandrika
The latest version, Cesium 1.7.1, should fix this. Let me know if it doesn’t. I appreciate the sample code, but I was hoping for something I could copy and paste into Sandcastle that would work as-is without modifications.