OpenSource
/
dc-sdk
mirror of https://github.com/dvt3d/dc-sdk
Watch 4
Star 0
Fork 0
Code Issues 0 Releases 92 Wiki Activity
Browse Source

add mouse event Propagation

tags/3.3.0
cavencj 2 years ago
parent
19ede29818
commit
8c50e8baa9
7 changed files with 150 additions and 78 deletions
Unified View Show Diff Stats
  1. 54
    53
      examples/event/overlay_mouse.html
  2. 65
    0
      examples/event/overlay_mouse_propagation.html
  3. 4
    0
      examples/list.js
  4. 1
    1
      package.json
  5. 25
    10
      src/modules/event/type/MouseEvent.js
  6. 0
    13
      src/modules/parse/Parse.js
  7. 1
    1
      src/modules/viewer/Viewer.js

+ 54
- 53
examples/event/overlay_mouse.html View File

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


<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


<body>

<div id="viewer-container" class="viewer-container"></div>
<script>
let viewer = undefined
function generatePosition(num) {
let list = []
for (let i = 0; i < num; i++) {
let lng = 120.38105869 + Math.random() * 0.5
let lat = 31.10115627 + Math.random() * 0.5
list.push([lng, lat, 0])
}
return list
}


function generatePosition(num) {
let list = []
for (let i = 0; i < num; i++) {
let lng = 120.38105869 + Math.random() * 0.5
let lat = 31.10115627 + Math.random() * 0.5
list.push([lng, lat, 0])
}
return list
}
function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createAmapImageryLayer({
style: 'img',
crs: 'WGS84',
})
viewer.addBaseLayer(baseLayer)
viewer.popup.config = {
customClass: 'custom-popup',
}
let layer = new DC.VectorLayer('layer').addTo(viewer)
viewer.contextMenu.enable = true
let positions = generatePosition(20)
positions.forEach((item, index) => {
let point = new DC.Point(item)
point.attr = {
index: index + 1,
}
point.on(DC.MouseEventType.CLICK, (e) => {
viewer.popup.showAt(e.position, `我是第${e.overlay.attr.index}点`)
})
point.addTo(layer)
})


function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createAmapImageryLayer({
style: 'img',
crs:'WGS84'
})
viewer.addBaseLayer( baseLayer)
viewer.popup.config = {
customClass: 'custom-popup'
}
let layer = new DC.VectorLayer('layer').addTo(viewer)
viewer.contextMenu.enable = true
let positions = generatePosition(20)
positions.forEach((item,index) => {
let point = new DC.Point(item)
point.attr={
index:index + 1
viewer.on(DC.MouseEventType.CLICK, (e) => {
console.log('我是场景事件')
})
viewer.flyTo(layer)
} }
point.on(DC.MouseEventType.CLICK,e=>{
viewer.popup.showAt(e.position,`我是第${e.overlay.attr.index}点`)
})
point.addTo(layer)
})
viewer.flyTo(layer)

}
DC.ready({
baseUrl:'../libs/dc-sdk/resources/'
}).then(initViewer)
</script>
</body>
DC.ready({
baseUrl: '../libs/dc-sdk/resources/',
}).then(initViewer)
</script>
</body>
</html> </html>

+ 65
- 0
examples/event/overlay_mouse_propagation.html View File

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

function generatePosition(num) {
let list = []
for (let i = 0; i < num; i++) {
let lng = 120.38105869 + Math.random() * 0.5
let lat = 31.10115627 + Math.random() * 0.5
list.push([lng, lat, 0])
}
return list
}

function initViewer() {
viewer = new DC.Viewer('viewer-container', {
eventPropagation: true,
})
let baseLayer = DC.ImageryLayerFactory.createAmapImageryLayer({
style: 'img',
crs: 'WGS84',
})
viewer.addBaseLayer(baseLayer)
viewer.popup.config = {
customClass: 'custom-popup',
}
let layer = new DC.VectorLayer('layer').addTo(viewer)
viewer.contextMenu.enable = true
let positions = generatePosition(20)
positions.forEach((item, index) => {
let point = new DC.Point(item)
point.attr = {
index: index + 1,
}
point.on(DC.MouseEventType.CLICK, (e) => {
viewer.popup.showAt(e.position, `我是第${e.overlay.attr.index}点`)
})
point.addTo(layer)
})

viewer.on(DC.MouseEventType.CLICK, (e) => {
console.log('我是场景事件')
})

viewer.flyTo(layer)
}
DC.ready({
baseUrl: '../libs/dc-sdk/resources/',
}).then(initViewer)
</script>
</body>
</html>

+ 4
- 0
examples/list.js View File

name: '要素鼠标事件', name: '要素鼠标事件',
page: 'overlay_mouse.html', page: 'overlay_mouse.html',
}, },
{
name: '要素鼠标事件(支持冒泡)',
page: 'overlay_mouse_propagation.html',
},
{ {
name: '相机事件', name: '相机事件',
page: 'camera.html', page: 'camera.html',

+ 1
- 1
package.json View File

"@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-transform-runtime": "^7.21.4", "@babel/plugin-transform-runtime": "^7.21.4",
"@babel/preset-env": "^7.21.5", "@babel/preset-env": "^7.21.5",
"@cesium/engine": "^4.0.0",
"@cesium/engine": "^6.1.0",
"@rollup/plugin-babel": "^6.0.3", "@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-commonjs": "^24.1.0", "@rollup/plugin-commonjs": "^24.1.0",
"@rollup/plugin-node-resolve": "^15.0.2", "@rollup/plugin-node-resolve": "^15.0.2",

+ 25
- 10
src/modules/event/type/MouseEvent.js View File

* Mouse events in 3D scene, optimized Cesium event model * Mouse events in 3D scene, optimized Cesium event model
*/ */
class MouseEvent extends Event { class MouseEvent extends Event {
constructor(viewer) {
constructor(viewer, eventPropagation) {
super(MouseEventType) super(MouseEventType)
this._viewer = viewer this._viewer = viewer
this._selected = undefined this._selected = undefined
this._eventPropagation = eventPropagation
this._registerEvent() this._registerEvent()
this._addDefaultEvent() this._addDefaultEvent()
} }
// get Overlay Event // get Overlay Event
if (overlay?.overlayEvent) { if (overlay?.overlayEvent) {
event = overlay.overlayEvent.getEvent(type) event = overlay.overlayEvent.getEvent(type)
event &&
event.numberOfListeners > 0 &&
event.raiseEvent({
...targetInfo,
...mouseInfo,
})
} }


// get Layer Event // get Layer Event
if ((!event || event.numberOfListeners === 0) && layer?.layerEvent) {
if (
(!event || event.numberOfListeners === 0 || this._eventPropagation) &&
layer?.layerEvent
) {
event = layer.layerEvent.getEvent(type) event = layer.layerEvent.getEvent(type)
event &&
event.numberOfListeners > 0 &&
event.raiseEvent({
...targetInfo,
...mouseInfo,
})
} }


// get Viewer Event // get Viewer Event
if ( if (
(!event || event.numberOfListeners === 0) &&
(!event || event.numberOfListeners === 0 || this._eventPropagation) &&
this._viewer?.viewerEvent this._viewer?.viewerEvent
) { ) {
event = this._viewer.viewerEvent.getEvent(type) event = this._viewer.viewerEvent.getEvent(type)
event &&
event.numberOfListeners > 0 &&
event.raiseEvent({
...targetInfo,
...mouseInfo,
})
} }


event &&
event.numberOfListeners > 0 &&
event.raiseEvent({
...targetInfo,
...mouseInfo,
})

// get Drill Pick Event // get Drill Pick Event
if (overlay?.allowDrillPicking) { if (overlay?.allowDrillPicking) {
let drillInfos = this._getDrillInfos(mouseInfo.windowPosition) let drillInfos = this._getDrillInfos(mouseInfo.windowPosition)

+ 0
- 13
src/modules/parse/Parse.js View File

positions = positions.split(';').filter((item) => !!item) positions = positions.split(';').filter((item) => !!item)
} }
return positions.map((item) => { return positions.map((item) => {
// if (typeof item === 'string') {
// return Position.fromString(item)
// } else if (Array.isArray(item)) {
// return Position.fromArray(item)
// } else if (
// !(Object(item) instanceof Position) &&
// Object(item).hasOwnProperty('lng') &&
// Object(item).hasOwnProperty('lat')
// ) {
// return Position.fromObject(item)
// } else if (Object(item) instanceof Position) {
// return item
// }
return this.parsePosition(item) return this.parsePosition(item)
}) })
} }

+ 1
- 1
src/modules/viewer/Viewer.js View File

/** /**
* Registers events * Registers events
*/ */
new MouseEvent(this) // Register global mouse events
new MouseEvent(this, options.eventPropagation) // Register global mouse events
this._viewerEvent = new ViewerEvent() // Register viewer events this._viewerEvent = new ViewerEvent() // Register viewer events
this._sceneEvent = new SceneEvent(this) // Register scene events this._sceneEvent = new SceneEvent(this) // Register scene events



Write Preview
Loading…
Cancel
Save