From 2ce7e6ba51e2ac8bf0d890ee69408e68bf64949f Mon Sep 17 00:00:00 2001 From: Jed Fong Date: Tue, 9 Feb 2016 09:19:24 -0600 Subject: [PATCH 1/3] Add startDrawingEllipse functionality --- DrawHelper.js | 99 +++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 93 insertions(+), 6 deletions(-) diff --git a/DrawHelper.js b/DrawHelper.js index 28c3a4f..7e83ec7 100644 --- a/DrawHelper.js +++ b/DrawHelper.js @@ -510,24 +510,32 @@ var DrawHelper = (function() { _.prototype.setCenter = function(center) { this.setAttribute('center', center); - this._markers.updateBillboardsPositions(this._getMarkerPositions()); + if (this._markers) { + this._markers.updateBillboardsPositions(this._getMarkerPositions()); + } }; _.prototype.setSemiMajorAxis = function(semiMajorAxis) { if(semiMajorAxis < this.getSemiMinorAxis()) return; this.setAttribute('semiMajorAxis', semiMajorAxis); - this._markers.updateBillboardsPositions(this._getMarkerPositions()); + if (this._markers) { + this._markers.updateBillboardsPositions(this._getMarkerPositions()); + } }; _.prototype.setSemiMinorAxis = function(semiMinorAxis) { if(semiMinorAxis > this.getSemiMajorAxis()) return; this.setAttribute('semiMinorAxis', semiMinorAxis); - this._markers.updateBillboardsPositions(this._getMarkerPositions()); + if (this._markers) { + this._markers.updateBillboardsPositions(this._getMarkerPositions()); + } }; _.prototype.setRotation = function(rotation) { var result = this.setAttribute('rotation', rotation); - this._markers.updateBillboardsPositions(this._getMarkerPositions()); + if (this._markers) { + this._markers.updateBillboardsPositions(this._getMarkerPositions()); + } return result; }; @@ -554,7 +562,6 @@ var DrawHelper = (function() { } return new Cesium.EllipseGeometry({ - ellipsoid : this.ellipsoid, center : this.center, semiMajorAxis : this.semiMajorAxis, semiMinorAxis : this.semiMinorAxis, @@ -1121,7 +1128,87 @@ var DrawHelper = (function() { } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); - } + }; + + _.prototype.startDrawingEllipse = function(options) { + + var options = copyOptions(options, defaultSurfaceOptions); + + this.startDrawing( + function cleanUp() { + if(ellipse != null) { + primitives.remove(ellipse); + } + if (markers != null) { + markers.remove(); + } + mouseHandler.destroy(); + tooltip.setVisible(false); + } + ); + + var _self = this; + var scene = this._scene; + var primitives = this._scene.primitives; + var tooltip = this._tooltip; + + var ellipse = null; + var markers = null; + + var mouseHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas); + + // Now wait for start + mouseHandler.setInputAction(function(movement) { + if(movement.position != null) { + var cartesian = scene.camera.pickEllipsoid(movement.position, ellipsoid); + if (cartesian) { + if(ellipse == null) { + ellipse = new _.EllipsePrimitive({ + ellipsoid: options.ellipsoid || Cesium.Ellipsoid.WGS84, + center: cartesian, + semiMajorAxis: 1, + semiMinorAxis: 1, + rotation: 0, + height: options.height || 0, + vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT, + material : options.material, + stRotation: 0, + granularity: options.granularity || Math.PI / 180.0 + }); + + ellipse.asynchronous = false; + + primitives.add(ellipse); + markers = new _.BillboardGroup(_self, defaultBillboard); + markers.addBillboards([cartesian]); + } else { + if(typeof options.callback == 'function') { + options.callback(ellipse); + } + _self.stopDrawing(); + } + } + } + }, Cesium.ScreenSpaceEventType.LEFT_DOWN); + + mouseHandler.setInputAction(function(movement) { + var position = movement.endPosition; + if(position != null) { + if(ellipse == null) { + tooltip.showAt(position, "

Click to start drawing the ellipse

"); + } else { + var cartesian = scene.camera.pickEllipsoid(position, ellipsoid); + if (cartesian) { + var semiMajorAxis = Cesium.Cartesian3.distance(ellipse.getCenter(), cartesian); + ellipse.setSemiMajorAxis(semiMajorAxis); + ellipse.setSemiMinorAxis(semiMajorAxis/3); + markers.updateBillboardsPositions(cartesian); + tooltip.showAt(position, "

Move mouse to change ellipse semi major axis

Click again to finish drawing

"); + } + } + } + }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); + }; _.prototype.enhancePrimitives = function() { From ab5355f01f6c4e737c348afe3f60081c74648fb7 Mon Sep 17 00:00:00 2001 From: Brandon McAllister Date: Tue, 9 Feb 2016 10:16:15 -0600 Subject: [PATCH 2/3] Add ellipse to widget Add ability to draw an ellipse from the widget tool. Update object passed back on creation to be the minimal info required for the ellipse (center, rotation, semiMajorAxis, semiMinorAxis) --- DrawHelper.js | 19 +++++++++++++++++-- img/glyphicons_095_vector_path_ellipse.png | Bin 0 -> 662 bytes index.html | 15 +++++++++++++++ 3 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 img/glyphicons_095_vector_path_ellipse.png diff --git a/DrawHelper.js b/DrawHelper.js index 7e83ec7..29a0f66 100644 --- a/DrawHelper.js +++ b/DrawHelper.js @@ -1183,7 +1183,12 @@ var DrawHelper = (function() { markers.addBillboards([cartesian]); } else { if(typeof options.callback == 'function') { - options.callback(ellipse); + options.callback({ + center: ellipse.center, + rotation: ellipse.rotation, + semiMajorAxis: ellipse.semiMajorAxis, + semiMinorAxis: ellipse.semiMinorAxis + }); } _self.stopDrawing(); } @@ -2347,12 +2352,14 @@ var DrawHelper = (function() { polylineIcon: "./img/glyphicons_097_vector_path_line.png", polygonIcon: "./img/glyphicons_096_vector_path_polygon.png", circleIcon: "./img/glyphicons_095_vector_path_circle.png", + ellipseIcon: "./img/glyphicons_095_vector_path_ellipse.png", extentIcon: "./img/glyphicons_094_vector_path_square.png", clearIcon: "./img/glyphicons_067_cleaning.png", polylineDrawingOptions: defaultPolylineOptions, polygonDrawingOptions: defaultPolygonOptions, extentDrawingOptions: defaultExtentOptions, - circleDrawingOptions: defaultCircleOptions + circleDrawingOptions: defaultCircleOptions, + circleEllipseOptions: defaultEllipseOptions }; fillOptions(options, drawOptions); @@ -2419,6 +2426,14 @@ var DrawHelper = (function() { }); }) + addIcon('ellipse', options.ellipseIcon, 'Click to start drawing an Ellipse', function() { + drawHelper.startDrawingEllipse({ + callback: function(ellipse) { + _self.executeListeners({name: 'ellipseCreated', ellipse: ellipse}); + } + }); + }) + // add a clear button at the end // add a divider first var div = document.createElement('DIV'); diff --git a/img/glyphicons_095_vector_path_ellipse.png b/img/glyphicons_095_vector_path_ellipse.png new file mode 100644 index 0000000000000000000000000000000000000000..17be85ce15c3b2b7fd28c4f164467a2e1ccc2ca7 GIT binary patch literal 662 zcmV;H0%`q;P)*9!5*8Nz0c%DSD;8vG+H^!;G-mx3&vRaC z>*bx$8zZqcjxOUN9%D3yq7vn;aohm|u@3v=;KaP0juvCHnEG!f@;rhdr<; z5ZuP@WKq!ysu#F}UD+F-EEE`lWr_G)qN!*lrHc^adS-vDY&tj|CVa+(?6r0DM0Hp; z6Nie>uNS6cKs%IKiWY984`yLh5jd(aHq>j+Xhatb#u$7k$4%Ug!O?a=RED~c=3Xei zp}=xnNRi&eu&ppP;8hg98Cwdx#*T<>Mnu!l257otcHq7r(JDgE6S$h Date: Tue, 9 Feb 2016 11:13:29 -0600 Subject: [PATCH 3/3] Name anonymous ellipse functions --- DrawHelper.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/DrawHelper.js b/DrawHelper.js index 29a0f66..d46c034 100644 --- a/DrawHelper.js +++ b/DrawHelper.js @@ -1130,7 +1130,7 @@ var DrawHelper = (function() { }; - _.prototype.startDrawingEllipse = function(options) { + _.prototype.startDrawingEllipse = function startDrawingEllipse(options) { var options = copyOptions(options, defaultSurfaceOptions); @@ -1158,7 +1158,7 @@ var DrawHelper = (function() { var mouseHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas); // Now wait for start - mouseHandler.setInputAction(function(movement) { + mouseHandler.setInputAction(function _onLeftDown(movement) { if(movement.position != null) { var cartesian = scene.camera.pickEllipsoid(movement.position, ellipsoid); if (cartesian) { @@ -1196,7 +1196,7 @@ var DrawHelper = (function() { } }, Cesium.ScreenSpaceEventType.LEFT_DOWN); - mouseHandler.setInputAction(function(movement) { + mouseHandler.setInputAction(function _onMouseMove(movement) { var position = movement.endPosition; if(position != null) { if(ellipse == null) {