| <!DOCTYPE html> | <!DOCTYPE html> | ||||
| <html lang="en"> | <html lang="en"> | ||||
| <head> | |||||
| <meta charset="utf-8" /> | |||||
| <meta name="viewport" content="width=device-width,initial-scale=1.0" /> | |||||
| <title>dc-example</title> | |||||
| <script src="/libs/dc-sdk/dc.min.js"></script> | |||||
| <script src="../dat.gui.min.js"></script> | |||||
| <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" /> | |||||
| <link href="../index.css" type="text/css" rel="stylesheet" /> | |||||
| </head> | |||||
| <body> | |||||
| <div id="viewer-container" class="viewer-container"></div> | |||||
| <script> | |||||
| let viewer = undefined | |||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | |||||
| <title>dc-example</title> | |||||
| <script src='/libs/dc-sdk/dc.min.js'></script> | |||||
| <script src="../dat.gui.min.js"></script> | |||||
| <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'> | |||||
| <link href='../index.css' type='text/css' rel='stylesheet'> | |||||
| </head> | |||||
| function initViewer() { | |||||
| viewer = new DC.Viewer('viewer-container') | |||||
| let baseLayer = DC.ImageryLayerFactory.createAMapImageryLayer({ | |||||
| style: 'img', | |||||
| crs: 'WGS84', | |||||
| }) | |||||
| viewer.addBaseLayer(baseLayer) | |||||
| viewer.tooltip.enable = true | |||||
| viewer.on(DC.MouseEventType.MOUSE_MOVE, (e) => { | |||||
| viewer.tooltip.showAt(e.windowPosition, '我是鼠标提示') | |||||
| }) | |||||
| addGuiController() // add controller | |||||
| } | |||||
| <body> | |||||
| <div id="viewer-container" class="viewer-container"></div> | |||||
| <script> | |||||
| let viewer = undefined | |||||
| function initViewer() { | |||||
| viewer = new DC.Viewer('viewer-container') | |||||
| let baseLayer = DC.ImageryLayerFactory.createAMapImageryLayer({ | |||||
| style: 'img', | |||||
| crs:'WGS84' | |||||
| }) | |||||
| viewer.addBaseLayer( baseLayer) | |||||
| viewer.tooltip.enable = true | |||||
| viewer.on(DC.MouseEventType.MOUSE_MOVE, e => { | |||||
| viewer.tooltip.showAt(e.windowPosition, '我是鼠标提示') | |||||
| }) | |||||
| addGuiController() // add controller | |||||
| } | |||||
| function addGuiController(){ | |||||
| let controls = { | |||||
| enable :true, | |||||
| } | |||||
| let gui = new dat.GUI(); | |||||
| gui.add(controls,'enable',).onChange(value=>{ | |||||
| viewer.tooltip.enable = value | |||||
| }) | |||||
| } | |||||
| DC.ready({ | |||||
| baseUrl:'../libs/dc-sdk/resources/' | |||||
| }).then(initViewer) | |||||
| </script> | |||||
| </body> | |||||
| function addGuiController() { | |||||
| let controls = { | |||||
| enable: true, | |||||
| } | |||||
| let gui = new dat.GUI() | |||||
| gui.add(controls, 'enable').onChange((value) => { | |||||
| viewer.tooltip.enable = value | |||||
| }) | |||||
| } | |||||
| DC.ready({ | |||||
| baseUrl: '../libs/dc-sdk/resources/', | |||||
| }).then(initViewer) | |||||
| </script> | |||||
| </body> | |||||
| </html> | </html> |
| "dist" | "dist" | ||||
| ], | ], | ||||
| "dependencies": { | "dependencies": { | ||||
| "@dvgis/dc-common": "^3.0.0" | |||||
| "@dvgis/dc-common": "^3.5.0" | |||||
| } | } | ||||
| } | } |
| // 返回转换后的坐标。 | // 返回转换后的坐标。 | ||||
| return new Cesium.Cartesian2(x, y) | return new Cesium.Cartesian2(x, y) | ||||
| } | } | ||||
| /** | /** | ||||
| * | * | ||||
| * Gets the mouse information for the mouse event | * Gets the mouse information for the mouse event | ||||
| * | * | ||||
| */ | */ | ||||
| _getMouseInfo(position) { | _getMouseInfo(position) { | ||||
| let adjustedPosition = this._adjustPosition(position) | |||||
| let scene = this._viewer.scene | let scene = this._viewer.scene | ||||
| let target = scene.pick(adjustedPosition) | |||||
| let target = scene.pick(position) | |||||
| let cartesian = undefined | let cartesian = undefined | ||||
| let surfaceCartesian = undefined | let surfaceCartesian = undefined | ||||
| let wgs84Position = undefined | let wgs84Position = undefined | ||||
| let wgs84SurfacePosition = undefined | let wgs84SurfacePosition = undefined | ||||
| if (scene.pickPositionSupported) { | if (scene.pickPositionSupported) { | ||||
| cartesian = scene.pickPosition(adjustedPosition) | |||||
| cartesian = scene.pickPosition(position) | |||||
| } | } | ||||
| if (cartesian) { | if (cartesian) { | ||||
| let c = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian) | let c = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian) | ||||
| scene.mode === Cesium.SceneMode.SCENE3D && | scene.mode === Cesium.SceneMode.SCENE3D && | ||||
| !(this._viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider) | !(this._viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider) | ||||
| ) { | ) { | ||||
| let ray = scene.camera.getPickRay(adjustedPosition) | |||||
| let ray = scene.camera.getPickRay(position) | |||||
| surfaceCartesian = scene.globe.pick(ray, scene) | surfaceCartesian = scene.globe.pick(ray, scene) | ||||
| } else { | } else { | ||||
| surfaceCartesian = scene.camera.pickEllipsoid( | surfaceCartesian = scene.camera.pickEllipsoid( | ||||
| adjustedPosition, | |||||
| position, | |||||
| Cesium.Ellipsoid.WGS84 | Cesium.Ellipsoid.WGS84 | ||||
| ) | ) | ||||
| } | } | ||||
| return { | return { | ||||
| target: target, | target: target, | ||||
| windowPosition: adjustedPosition, | |||||
| windowPosition: position, | |||||
| position: cartesian, | position: cartesian, | ||||
| wgs84Position: wgs84Position, | wgs84Position: wgs84Position, | ||||
| surfacePosition: surfaceCartesian, | surfacePosition: surfaceCartesian, |
| this._renderRemoveCallback = scene.postRender.addEventListener(() => { | this._renderRemoveCallback = scene.postRender.addEventListener(() => { | ||||
| let cp = this._viewer.camera.positionWC | let cp = this._viewer.camera.positionWC | ||||
| let cd = this._viewer.camera.direction | let cd = this._viewer.camera.direction | ||||
| const offset = this._viewer.getOffset(); | |||||
| const offset = this._viewer.getOffset() | |||||
| this.eachOverlay((item) => { | this.eachOverlay((item) => { | ||||
| if (item && item.position) { | if (item && item.position) { | ||||
| let position = Transform.transformWGS84ToCartesian(item.position) | let position = Transform.transformWGS84ToCartesian(item.position) | ||||
| position, | position, | ||||
| new Cesium.Cartesian3() | new Cesium.Cartesian3() | ||||
| ) | ) | ||||
| let windowCoord = Cesium.SceneTransforms.wgs84ToWindowCoordinates( | |||||
| let windowCoord = Cesium.SceneTransforms.worldToWindowCoordinates( | |||||
| scene, | scene, | ||||
| position | position | ||||
| ) | ) | ||||
| if (windowCoord) { | if (windowCoord) { | ||||
| windowCoord.x += offset.x; | |||||
| windowCoord.y += offset.y; | |||||
| windowCoord.x += offset.x | |||||
| windowCoord.y += offset.y | |||||
| } | } | ||||
| item._updateStyle( | item._updateStyle( | ||||
| windowCoord, | windowCoord, |
| */ | */ | ||||
| static transformWGS84ToWindow(position, viewer) { | static transformWGS84ToWindow(position, viewer) { | ||||
| let scene = viewer.scene | let scene = viewer.scene | ||||
| return Cesium.SceneTransforms.wgs84ToWindowCoordinates( | |||||
| return Cesium.SceneTransforms.worldToWindowCoordinates( | |||||
| scene, | scene, | ||||
| this.transformWGS84ToCartesian(position) | this.transformWGS84ToCartesian(position) | ||||
| ) | ) |
| } | } | ||||
| this._delegate = Cesium.Viewer | this._delegate = Cesium.Viewer | ||||
| ? new Cesium.Viewer(id, { | ? new Cesium.Viewer(id, { | ||||
| ...DEF_OPTS, | |||||
| ...options, | |||||
| }) | |||||
| ...DEF_OPTS, | |||||
| ...options, | |||||
| }) | |||||
| : new CesiumViewer(id, { | : new CesiumViewer(id, { | ||||
| ...DEF_OPTS, | |||||
| ...options, | |||||
| }) // Initialize the viewer | |||||
| ...DEF_OPTS, | |||||
| ...options, | |||||
| }) // Initialize the viewer | |||||
| /** | /** | ||||
| * Registers events | * Registers events | ||||
| return this | return this | ||||
| } | } | ||||
| /** | |||||
| * | |||||
| * @returns | |||||
| */ | |||||
| getOffset() { | getOffset() { | ||||
| const offset = { x: 0, y: 0 }; | |||||
| const container = this._delegate?.container; | |||||
| const offset = { x: 0, y: 0 } | |||||
| const container = this._delegate?.container | |||||
| if (container) { | if (container) { | ||||
| if (container.getBoundingClientRect) { | if (container.getBoundingClientRect) { | ||||
| const rect = container.getBoundingClientRect(); | |||||
| offset.x = rect.left; | |||||
| offset.y = rect.top; | |||||
| const rect = container.getBoundingClientRect() | |||||
| offset.x = rect.left | |||||
| offset.y = rect.top | |||||
| } else { | } else { | ||||
| offset.x = container.offsetLeft; | |||||
| offset.y = container.offsetTop; | |||||
| offset.x = container.offsetLeft | |||||
| offset.y = container.offsetTop | |||||
| } | } | ||||
| } | } | ||||
| return offset; | |||||
| return offset | |||||
| } | } | ||||
| } | } | ||||
| * mount content | * mount content | ||||
| * @private | * @private | ||||
| */ | */ | ||||
| _mountContent() { } | |||||
| _mountContent() {} | |||||
| /** | /** | ||||
| * binds event | * binds event | ||||
| * @private | * @private | ||||
| */ | */ | ||||
| _bindEvent() { } | |||||
| _bindEvent() {} | |||||
| /** | /** | ||||
| * Unbinds event | * Unbinds event | ||||
| * @private | * @private | ||||
| */ | */ | ||||
| _unbindEvent() { } | |||||
| _unbindEvent() {} | |||||
| /** | /** | ||||
| * When enable modifies the hook executed, the subclass copies it as required | * When enable modifies the hook executed, the subclass copies it as required | ||||
| * @param windowCoord | * @param windowCoord | ||||
| * @private | * @private | ||||
| */ | */ | ||||
| _updateWindowCoord(windowCoord) { } | |||||
| _updateWindowCoord(windowCoord) {} | |||||
| /** | /** | ||||
| * Hook for installed | * Hook for installed | ||||
| * @private | * @private | ||||
| */ | */ | ||||
| _installHook() { } | |||||
| _installHook() {} | |||||
| /** | |||||
| * | |||||
| * @returns | |||||
| */ | |||||
| _getViewerOffset() { | |||||
| if (!this._viewer) { | |||||
| return { x: 0, y: 0 } | |||||
| } | |||||
| return this._viewer.getOffset() | |||||
| } | |||||
| /** | /** | ||||
| * Installs to viewer | * Installs to viewer | ||||
| `) | `) | ||||
| } | } | ||||
| getViewerOffset() { | |||||
| if (!this._viewer) { | |||||
| return { x: 0, y: 0 }; | |||||
| } | |||||
| return this._viewer.getOffset(); | |||||
| } | |||||
| /** | /** | ||||
| * Registers type | * Registers type | ||||
| * @param type | * @param type |
| * @private | * @private | ||||
| */ | */ | ||||
| _updateWindowCoord(windowCoord) { | _updateWindowCoord(windowCoord) { | ||||
| let visibility = this._ulEl.hasChildNodes() ? 'visible' : 'hidden'; | |||||
| let { x, y } = windowCoord; | |||||
| const offset = this.getViewerOffset(); | |||||
| x += offset.x; | |||||
| y += offset.y; | |||||
| let visibility = this._ulEl.hasChildNodes() ? 'visible' : 'hidden' | |||||
| let { x, y } = windowCoord | |||||
| let offset = this._getViewerOffset() | |||||
| x += offset.x | |||||
| y += offset.y | |||||
| this._wrapper.style.cssText = ` | this._wrapper.style.cssText = ` | ||||
| visibility:${visibility}; | visibility:${visibility}; | ||||
| z-index:1; | z-index:1; | ||||
| transform:translate3d(${Math.round(x)}px,${Math.round( | |||||
| y | |||||
| )}px, 0); | |||||
| transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0); | |||||
| ` | ` | ||||
| } | } | ||||
| self._updateWindowCoord && | self._updateWindowCoord && | ||||
| self._wrapper.style.visibility === 'visible' | self._wrapper.style.visibility === 'visible' | ||||
| ) { | ) { | ||||
| let windowCoord = Cesium.SceneTransforms.wgs84ToWindowCoordinates( | |||||
| let windowCoord = Cesium.SceneTransforms.worldToWindowCoordinates( | |||||
| scene, | scene, | ||||
| self._position | self._position | ||||
| ) | ) | ||||
| x = windowCoord.x | x = windowCoord.x | ||||
| y = windowCoord.y | y = windowCoord.y | ||||
| } | } | ||||
| const offset = this.getViewerOffset(); | |||||
| x += offset.x; | |||||
| y += offset.y; | |||||
| let offset = this._getViewerOffset() | |||||
| x += offset.x | |||||
| y += offset.y | |||||
| this._wrapper.style.cssText = ` | this._wrapper.style.cssText = ` | ||||
| visibility:visible; | visibility:visible; |
| */ | */ | ||||
| _updateWindowCoord(windowCoord) { | _updateWindowCoord(windowCoord) { | ||||
| let x = windowCoord.x + 10 | let x = windowCoord.x + 10 | ||||
| let y = windowCoord.y - this._wrapper.offsetHeight / 2; | |||||
| const offset = this.getViewerOffset(); | |||||
| x += offset.x; | |||||
| y += offset.y; | |||||
| let y = windowCoord.y - this._wrapper.offsetHeight / 2 | |||||
| let offset = this._getViewerOffset() | |||||
| x += offset.x | |||||
| y += offset.y | |||||
| this._wrapper.style.cssText = ` | this._wrapper.style.cssText = ` | ||||
| visibility:visible; | visibility:visible; | ||||
| z-index:1; | z-index:1; |
| this._delegate.project = (coordinate) => { | this._delegate.project = (coordinate) => { | ||||
| let position = Cesium.Cartesian3.fromDegrees(coordinate[0], coordinate[1]) | let position = Cesium.Cartesian3.fromDegrees(coordinate[0], coordinate[1]) | ||||
| let coord = Cesium.SceneTransforms.wgs84ToWindowCoordinates( | |||||
| let coord = Cesium.SceneTransforms.worldToWindowCoordinates( | |||||
| scene, | scene, | ||||
| position | position | ||||
| ) | ) |