OpenSource
/
dc-sdk
镜像来自 https://github.com/dvt3d/dc-sdk
關注 4
收藏 0
複製 0
程式碼 問題 0 版本發佈 92 Wiki 活動
瀏覽代碼

add mouse event Propagation

tags/3.3.0
cavencj 2 年之前
父節點
19ede29818
當前提交
8c50e8baa9
共有 7 個檔案被更改，包括 150 行新增 和 78 行删除
分割檢視 顯示文件統計
  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 查看文件

@@ -1,61 +1,62 @@
<!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>

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

+ 65
- 0
examples/event/overlay_mouse_propagation.html 查看文件

@@ -0,0 +1,65 @@
<!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 查看文件

@@ -109,6 +109,10 @@ const EXAMPLE_LIST = [
name: '要素鼠标事件',
page: 'overlay_mouse.html',
},
{
name: '要素鼠标事件(支持冒泡)',
page: 'overlay_mouse_propagation.html',
},
{
name: '相机事件',
page: 'camera.html',

+ 1
- 1
package.json 查看文件

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

+ 25
- 10
src/modules/event/type/MouseEvent.js 查看文件

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

// 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 &&
event.numberOfListeners > 0 &&
event.raiseEvent({
...targetInfo,
...mouseInfo,
})
}

// get Viewer Event
if (
(!event || event.numberOfListeners === 0) &&
(!event || event.numberOfListeners === 0 || this._eventPropagation) &&
this._viewer?.viewerEvent
) {
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
if (overlay?.allowDrillPicking) {
let drillInfos = this._getDrillInfos(mouseInfo.windowPosition)

+ 0
- 13
src/modules/parse/Parse.js 查看文件

@@ -49,19 +49,6 @@ class Parse {
positions = positions.split(';').filter((item) => !!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)
})
}

+ 1
- 1
src/modules/viewer/Viewer.js 查看文件

@@ -42,7 +42,7 @@ class Viewer {
/**
* 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._sceneEvent = new SceneEvent(this) // Register scene events


Write Preview
Loading…
取消
儲存