Cesium ES6-navigation 修改版

// import Cesium from 'cesium/Cesium' import loadView from '../core/loadView' import ResetViewNavigationControl from './ResetViewNavigationControl' import ZoomNavigationControl from './ZoomNavigationControl' import svgCompassOuterRing from '../svgPaths/svgCompassOuterRing' import svgCompassGyro from '../svgPaths/svgCompassGyro' import svgCompassRotationMarker from '../svgPaths/svgCompassRotationMarker' import Utils from '../core/Utils' var defined = Cesium.defined var CesiumMath = Cesium.Math var getTimestamp = Cesium.getTimestamp var EventHelper = Cesium.EventHelper var Transforms = Cesium.Transforms var SceneMode = Cesium.SceneMode var Cartesian2 = Cesium.Cartesian2 var Cartesian3 = Cesium.Cartesian3 var Matrix4 = Cesium.Matrix4 var BoundingSphere = Cesium.BoundingSphere var HeadingPitchRange = Cesium.HeadingPitchRange var Knockout = Cesium.knockout var NavigationViewModel = function (options) { this.terria = options.terria this.eventHelper = new EventHelper() this.enableZoomControls = (defined(options.enableZoomControls)) ? options.enableZoomControls : true this.enableCompass = (defined(options.enableCompass)) ? options.enableCompass : true this.navigationLocked = false // if (this.showZoomControls) // { this.controls = options.controls if (!defined(this.controls)) { this.controls = [ new ZoomNavigationControl(this.terria, true), new ResetViewNavigationControl(this.terria), new ZoomNavigationControl(this.terria, false) ] } // } this.svgCompassOuterRing = svgCompassOuterRing this.svgCompassGyro = svgCompassGyro this.svgCompassRotationMarker = svgCompassRotationMarker this.showCompass = defined(this.terria) && this.enableCompass this.heading = this.showCompass ? this.terria.scene.camera.heading : 0.0 this.isOrbiting = false this.orbitCursorAngle = 0 this.orbitCursorOpacity = 0.0 this.orbitLastTimestamp = 0 this.orbitFrame = undefined this.orbitIsLook = false this.orbitMouseMoveFunction = undefined this.orbitMouseUpFunction = undefined this.isRotating = false this.rotateInitialCursorAngle = undefined this.rotateFrame = undefined this.rotateIsLook = false this.rotateMouseMoveFunction = undefined this.rotateMouseUpFunction = undefined this._unsubcribeFromPostRender = undefined Knockout.track(this, ['controls', 'showCompass', 'heading', 'isOrbiting', 'orbitCursorAngle', 'isRotating']) var that = this NavigationViewModel.prototype.setNavigationLocked = function (locked) { this.navigationLocked = locked if (this.controls && this.controls.length > 1) { this.controls[1].setNavigationLocked(this.navigationLocked) } } function widgetChange () { if (defined(that.terria)) { if (that._unsubcribeFromPostRender) { that._unsubcribeFromPostRender() that._unsubcribeFromPostRender = undefined } that.showCompass = true && that.enableCompass that._unsubcribeFromPostRender = that.terria.scene.postRender.addEventListener(function () { that.heading = that.terria.scene.camera.heading }) } else { if (that._unsubcribeFromPostRender) { that._unsubcribeFromPostRender() that._unsubcribeFromPostRender = undefined } that.showCompass = false } } this.eventHelper.add(this.terria.afterWidgetChanged, widgetChange, this) // this.terria.afterWidgetChanged.addEventListener(widgetChange); widgetChange() } NavigationViewModel.prototype.destroy = function () { this.eventHelper.removeAll() // loadView(require('fs').readFileSync(baseURLEmpCesium + 'js-lib/terrajs/lib/Views/Navigation.html', 'utf8'), container, this); } NavigationViewModel.prototype.show = function (container) { var testing if (this.enableZoomControls && this.enableCompass) { testing = '<div class="compass" title="" data-bind="visible: showCompass, event: { mousedown: handleMouseDown, dblclick: handleDoubleClick }">' + '<div class="compass-outer-ring-background"></div>' + ' <div class="compass-rotation-marker" data-bind="visible: isOrbiting, style: { transform: \'rotate(-\' + orbitCursorAngle + \'rad)\', \'-webkit-transform\': \'rotate(-\' + orbitCursorAngle + \'rad)\', opacity: orbitCursorOpacity }, cesiumSvgPath: { path: svgCompassRotationMarker, width: 145, height: 145 }"></div>' + ' <div class="compass-outer-ring" title="" data-bind="style: { transform: \'rotate(-\' + heading + \'rad)\', \'-webkit-transform\': \'rotate(-\' + heading + \'rad)\' }, cesiumSvgPath: { path: svgCompassOuterRing, width: 145, height: 145 }"></div>' + ' <div class="compass-gyro-background"></div>' + ' <div class="compass-gyro" data-bind="cesiumSvgPath: { path: svgCompassGyro, width: 145, height: 145 }, css: { \'compass-gyro-active\': isOrbiting }"></div>' + '</div>' + '<div class="navigation-controls">' + '<!-- ko foreach: controls -->' + '<div data-bind="click: activate, attr: { title: $data.name }, css: $root.isLastControl($data) ? \'navigation-control-last\' : \'navigation-control\' ">' + ' <!-- ko if: $data.hasText -->' + ' <div data-bind="text: $data.text, css: $data.isActive ? \'navigation-control-icon-active \' + $data.cssClass : $data.cssClass"></div>' + ' <!-- /ko -->' + ' <!-- ko ifnot: $data.hasText -->' + ' <div data-bind="cesiumSvgPath: { path: $data.svgIcon, width: $data.svgWidth, height: $data.svgHeight }, css: $data.isActive ? \'navigation-control-icon-active \' + $data.cssClass : $data.cssClass"></div>' + ' <!-- /ko -->' + ' </div>' + ' <!-- /ko -->' + '</div>' } else if (!this.enableZoomControls && this.enableCompass) { testing = '<div class="compass" title="" data-bind="visible: showCompass, event: { mousedown: handleMouseDown, dblclick: handleDoubleClick }">' + '<div class="compass-outer-ring-background"></div>' + ' <div class="compass-rotation-marker" data-bind="visible: isOrbiting, style: { transform: \'rotate(-\' + orbitCursorAngle + \'rad)\', \'-webkit-transform\': \'rotate(-\' + orbitCursorAngle + \'rad)\', opacity: orbitCursorOpacity }, cesiumSvgPath: { path: svgCompassRotationMarker, width: 145, height: 145 }"></div>' + ' <div class="compass-outer-ring" title="" data-bind="style: { transform: \'rotate(-\' + heading + \'rad)\', \'-webkit-transform\': \'rotate(-\' + heading + \'rad)\' }, cesiumSvgPath: { path: svgCompassOuterRing, width: 145, height: 145 }"></div>' + ' <div class="compass-gyro-background"></div>' + ' <div class="compass-gyro" data-bind="cesiumSvgPath: { path: svgCompassGyro, width: 145, height: 145 }, css: { \'compass-gyro-active\': isOrbiting }"></div>' + '</div>' + '<div class="navigation-controls" style="display: none;" >' + '<!-- ko foreach: controls -->' + '<div data-bind="click: activate, attr: { title: $data.name }, css: $root.isLastControl($data) ? \'navigation-control-last\' : \'navigation-control\' ">' + ' <!-- ko if: $data.hasText -->' + ' <div data-bind="text: $data.text, css: $data.isActive ? \'navigation-control-icon-active \' + $data.cssClass : $data.cssClass"></div>' + ' <!-- /ko -->' + ' <!-- ko ifnot: $data.hasText -->' + ' <div data-bind="cesiumSvgPath: { path: $data.svgIcon, width: $data.svgWidth, height: $data.svgHeight }, css: $data.isActive ? \'navigation-control-icon-active \' + $data.cssClass : $data.cssClass"></div>' + ' <!-- /ko -->' + ' </div>' + ' <!-- /ko -->' + '</div>' } else if (this.enableZoomControls && !this.enableCompass) { testing = '<div class="compass" style="display: none;" title="" data-bind="visible: showCompass, event: { mousedown: handleMouseDown, dblclick: handleDoubleClick }">' + '<div class="compass-outer-ring-background"></div>' + ' <div class="compass-rotation-marker" data-bind="visible: isOrbiting, style: { transform: \'rotate(-\' + orbitCu