chenjing 1 год назад
Родитель
Сommit
6bd8944b44

+ 40
- 43
examples/widget/tooltip.html Просмотреть файл

<!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>

+ 1
- 1
package.json Просмотреть файл

"dist" "dist"
], ],
"dependencies": { "dependencies": {
"@dvgis/dc-common": "^3.0.0"
"@dvgis/dc-common": "^3.5.0"
} }
} }

+ 6
- 7
src/modules/event/type/MouseEvent.js Просмотреть файл

// 返回转换后的坐标。 // 返回转换后的坐标。
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,

+ 4
- 4
src/modules/layer/type/HtmlLayer.js Просмотреть файл

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,

+ 1
- 1
src/modules/transform/Transform.js Просмотреть файл

*/ */
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)
) )

+ 18
- 14
src/modules/viewer/Viewer.js Просмотреть файл

} }
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
} }
} }



+ 16
- 12
src/modules/widget/Widget.js Просмотреть файл

* 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

+ 6
- 11
src/modules/widget/type/ContextMenu.js Просмотреть файл

* @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);
` `
} }



+ 5
- 4
src/modules/widget/type/Popup.js Просмотреть файл

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;

+ 4
- 6
src/modules/widget/type/Tooltip.js Просмотреть файл

*/ */
_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;

+ 1
- 1
src/modules/wind/WindLayer.js Просмотреть файл



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
) )

Загрузка…
Отмена
Сохранить