newDrawhelperCesium

// modified from here https://gist.github.com/theplatapi/0a7d789afc8028a3c20b
// and various other forums and api docs

        var viewer = new Cesium.Viewer('cesiumContainer', {
          targetFrameRate: 60,
          homeButton: false,
          sceneModePicker: false,
          navigationHelpButton: false,
          baseLayerPicker: false,
          imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
            url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer',
            enablePickFeatures: false
          }),
          //Saves GPU memory
          scene3DOnly: true,
          automaticallyTrackDataSourceClocks: false
        });

        var selector;
        var rectangleSelector;
        var screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        var cartesian = new Cesium.Cartesian3();
        var tempCartographic = new Cesium.Cartographic();
        var center = new Cesium.Cartographic();
        var firstPoint = new Cesium.Cartographic();
        // var firstPointSet = false;
        var mouseDown = false;
        var camera = viewer.camera;


        // OLD Draw the selector while the user drags the mouse while holding shift
        var allowDraw = false;
        $('#drawBtn').click(function(){
          console.info('Enable Draw Extent Rectangle')
          // make a new rectangle selector so we don't accidentally show the extent from any old rectangles
          rectangleSelector = new Cesium.Rectangle();
          firstPointSet = false;
          allowDraw = true;

        })
        $('#clearBtn').click(function(){
          console.info('Clearing Extent Rectangle');
          allowDraw = false;
          // viewer.entities.removeById('selectorRectangle');
          selector.show = false;
        })

        screenSpaceEventHandler.setInputAction(function drawSelector(movement) {
          if (!allowDraw) {
            return;
          }

          cartesian = camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid, cartesian);

          if (cartesian && mouseDown) {
            //mouse cartographic
            tempCartographic = Cesium.Cartographic.fromCartesian(cartesian, Cesium.Ellipsoid.WGS84, tempCartographic);

            if (!firstPointSet) {
              Cesium.Cartographic.clone(tempCartographic, firstPoint);
              firstPointSet = true;
            }
            else {
              rectangleSelector.east = Math.max(tempCartographic.longitude, firstPoint.longitude);
              rectangleSelector.west = Math.min(tempCartographic.longitude, firstPoint.longitude);
              rectangleSelector.north = Math.max(tempCartographic.latitude, firstPoint.latitude);
              rectangleSelector.south = Math.min(tempCartographic.latitude, firstPoint.latitude);
              selector.show = true;
            }
          }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        var getSelectorLocation = new Cesium.CallbackProperty(function getSelectorLocation(time, result) {
            return Cesium.Rectangle.clone(rectangleSelector, result);
          }, false);

          screenSpaceEventHandler.setInputAction(function(e) {
            //dont select the new entity
            viewer.selectedEntity = undefined;

            // take the position and make sure it's on the earth
            cartesian = camera.pickEllipsoid(e.position, viewer.scene.globe.ellipsoid, cartesian);
            if(cartesian){
              firstPointSet = false;
              mouseDown = !mouseDown;
              selector.rectangle.coordinates = getSelectorLocation;
            }
          }, Cesium.ScreenSpaceEventType.LEFT_UP);

          screenSpaceEventHandler.setInputAction(function(mvmt) {
            //don't select the new entity on dbl click
            viewer.selectedEntity = undefined;
            //dont track new entity
            viewer.trackedEntity = undefined;
            // don't refocus the camera on the new entity
            // viewer.scene.completeMorphOnUserInput = false;

            selector.rectangle.coordinates = rectangleSelector;

            // dont allow any more drawing changes until the draw button is clicked again
            allowDraw = false;
          }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

        selector = viewer.entities.add({
          selectable: false,
          id: 'selectorRectangle',
          show: false,
          rectangle: {
            coordinates: getSelectorLocation,
            material: new Cesium.GridMaterialProperty({color: Cesium.Color.LAWNGREEN})
          }
        });