diff --git a/DrawHelper.js b/DrawHelper.js index 28c3a4f..d46c034 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,92 @@ var DrawHelper = (function() { } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); - } + }; + + _.prototype.startDrawingEllipse = function startDrawingEllipse(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 _onLeftDown(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({ + center: ellipse.center, + rotation: ellipse.rotation, + semiMajorAxis: ellipse.semiMajorAxis, + semiMinorAxis: ellipse.semiMinorAxis + }); + } + _self.stopDrawing(); + } + } + } + }, Cesium.ScreenSpaceEventType.LEFT_DOWN); + + mouseHandler.setInputAction(function _onMouseMove(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() { @@ -2260,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); @@ -2332,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 0000000..17be85c Binary files /dev/null and b/img/glyphicons_095_vector_path_ellipse.png differ diff --git a/index.html b/index.html index e50d597..27c237f 100644 --- a/index.html +++ b/index.html @@ -122,6 +122,21 @@ loggingMessage('Circle edited: center is ' + event.center.toString() + ' and radius is ' + event.radius.toFixed(1) + ' meters'); }); }); + toolbar.addListener('ellipseCreated', function(event) { + loggingMessage('Ellipse created: center is ' + event.ellipse.toString()); + var ellipse = new DrawHelper.EllipsePrimitive({ + center: event.ellipse.center, + rotaion: event.ellipse.rotation, + semiMajorAxis: event.ellipse.semiMajorAxis, + semiMinorAxis: event.ellipse.semiMinorAxis, + material: Cesium.Material.fromType(Cesium.Material.RimLightingType) + }); + scene.primitives.add(ellipse); + ellipse.setEditable(); + ellipse.addListener('onEdited', function(ellipse) { + loggingMessage('Ellipse edited: center is ' + ellipse.center.toString()); + }); + }); toolbar.addListener('extentCreated', function(event) { var extent = event.extent; loggingMessage('Extent created (N: ' + extent.north.toFixed(3) + ', E: ' + extent.east.toFixed(3) + ', S: ' + extent.south.toFixed(3) + ', W: ' + extent.west.toFixed(3) + ')');