Browse Source

upgrade the cesium

tags/3.3.0
cavencj 1 year ago
parent
commit
c99387ac25

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

@@ -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 View File

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

+ 8
- 0
examples/list.js View File

@@ -109,6 +109,10 @@ const EXAMPLE_LIST = [
name: '要素鼠标事件',
page: 'overlay_mouse.html',
},
{
name: '要素鼠标事件(支持冒泡)',
page: 'overlay_mouse_propagation.html',
},
{
name: '相机事件',
page: 'camera.html',
@@ -491,6 +495,10 @@ const EXAMPLE_LIST = [
name: '模型(图元)',
page: 'model_primitive.html',
},
{
name: '模型动画(图元)',
page: 'model_primitive_d.html',
},
{
name: '3dtiles-3dmax',
page: '3dtiles_3dmax.html',

+ 59
- 47
examples/model/model_primitive.html View File

@@ -1,53 +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>
<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>
<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>
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(
new DC.Position(
lng,
lat,
1000 * Math.random(),
3600 * Math.random()
)
)
}
return list
}

<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(new DC.Position(lng, lat,1000 * Math.random(),3600 * Math.random()))
}
return list
}

function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
style:'img',
crs:'WGS84'
})
viewer.addBaseLayer( baseLayer,{
brightness:0.1
})
let layer = new DC.PrimitiveLayer('layer').addTo(viewer)
let positions = generatePosition(1000)
positions.forEach(item => {
let model = new DC.ModelPrimitive(item,"../assets/data/Cesium_Air.glb")
model.setStyle({scale:50})
layer.addOverlay(model)
})
viewer.flyToPosition("120.82005120445152,30.903795335982288,60975.10826917929,341.02,-50.29")

}
DC.ready({
baseUrl:'../libs/dc-sdk/resources/'
}).then(initViewer)
</script>
</body>
function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
DC.ImageryType.AMAP,
{
style: 'img',
crs: 'WGS84',
}
)
viewer.addBaseLayer(baseLayer, {
brightness: 0.1,
})
let layer = new DC.PrimitiveLayer('layer').addTo(viewer)
let positions = generatePosition(1000)
positions.forEach((item) => {
let model = new DC.ModelPrimitive(
item,
'../assets/data/Cesium_Air.glb'
)
model.setStyle({ scale: 50 })
layer.addOverlay(model)
})
viewer.flyToPosition(
'120.82005120445152,30.903795335982288,60975.10826917929,341.02,-50.29'
)
}
DC.ready({
baseUrl: '../libs/dc-sdk/resources/',
}).then(initViewer)
</script>
</body>
</html>

+ 77
- 0
examples/model/model_primitive_d.html View File

@@ -0,0 +1,77 @@
<!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>
<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(
new DC.Position(
lng,
lat,
1000 * Math.random(),
3600 * Math.random()
)
)
}
return list
}

function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
DC.ImageryType.AMAP,
{
style: 'img',
crs: 'WGS84',
}
)
viewer.addBaseLayer(baseLayer, {
brightness: 0.1,
})
let layer = new DC.PrimitiveLayer('layer').addTo(viewer)
let positions = generatePosition(1000)
positions.forEach((item) => {
let model = new DC.ModelPrimitive(
item,
'../assets/data/Cesium_Air.glb'
)
model.on(DC.ModelEventType.READY, (model) => {
model.activeAnimations.add({
index: 0,
loop: 1,
multiplier: 1,
})
model.activeAnimations.add({
index: 1,
loop: 1,
multiplier: 1,
})
})
model.setStyle({ scale: 50 })
layer.addOverlay(model)
})
viewer.flyToPosition(
'120.82005120445152,30.903795335982288,60975.10826917929,341.02,-50.29'
)
}
DC.ready({
baseUrl: '../libs/dc-sdk/resources/',
}).then(initViewer)
</script>
</body>
</html>

+ 47
- 46
examples/model/model_vector_d.html View File

@@ -1,53 +1,54 @@
<!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>
<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>
<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>
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(new DC.Position(lng, lat))
}
return list
}

<div id="viewer-container" class="viewer-container"></div>
<script>
let viewer = undefined
function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
DC.ImageryType.AMAP,
{
style: 'img',
crs: 'WGS84',
}
)
viewer.addBaseLayer(baseLayer, {
brightness: 0.1,
})
let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)
let positions = generatePosition(1)
positions.forEach((item) => {
let model = new DC.Model(item, '../assets/data/GroundVehicle.glb')
layer.addOverlay(model)
})

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(new DC.Position(lng, lat))
}
return list
}

function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
style:'img',
crs:'WGS84'
})
viewer.addBaseLayer( baseLayer,{
brightness:0.1
})
let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)
let positions = generatePosition(1)
positions.forEach(item => {
let model = new DC.Model(item, '../assets/data/GroundVehicle.glb')
layer.addOverlay(model)
})

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

+ 5
- 1
src/modules/event/EventType.js View File

@@ -66,7 +66,10 @@ const OverlayEventType = {
POSITION_UPDATE: 'positionUpdate',
}

const ModelEventType = {}
const ModelEventType = {
READY: 'ready',
TEX_READY: 'texturesReady',
}

const TileSetEventType = {
INITIAL_TILES_LOADED: 'initialTilesLoaded',
@@ -126,6 +129,7 @@ export {
LayerEventType,
OverlayEventType,
TileSetEventType,
ModelEventType,
TrackEventType,
PathEventType,
PlotEventType,

+ 1
- 0
src/modules/event/index.js View File

@@ -19,6 +19,7 @@ export { default as LayerGroupEvent } from './type/LayerGroupEvent'
export { default as LayerEvent } from './type/LayerEvent'
export { default as OverlayEvent } from './type/OverlayEvent'
export { default as TilesetEvent } from './type/TilesetEvent'
export { default as ModelEvent } from './type/ModelEvent'

/**
* animation

+ 54
- 0
src/modules/event/type/ModelEvent.js View File

@@ -0,0 +1,54 @@
/**
* @Author : Caven Chen
*/
import { ModelEventType } from '../EventType'
import Event from '../Event'

class ModelEvent extends Event {
constructor(model) {
super(ModelEventType)
this._model = model
}

/**
*
* @param type
* @param callback
* @param context
*/
on(type, callback, context) {
this._model.then((model) => {
switch (type) {
case ModelEventType.READY:
model.readyEvent.addEventListener(callback, context || this)
break
case ModelEventType.TEX_READY:
model.texturesReadyEvent.addEventListener(callback, context || this)
break
default:
break
}
})
return null
}

off(type, callback, context) {
this._model.then((model) => {
switch (type) {
case ModelEventType.READY:
model.readyEvent.removeEventListener(callback, context || this)
break
case ModelEventType.TEX_READY:
model.texturesReadyEvent.removeEventListener(
callback,
context || this
)
break
default:
break
}
})
return true
}
}
export default ModelEvent

+ 34
- 12
src/modules/event/type/MouseEvent.js View File

@@ -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()
}
@@ -236,31 +237,46 @@ class MouseEvent extends Event {
let targetInfo = this._getTargetInfo(mouseInfo.target)
let overlay = targetInfo?.overlay
let layer = targetInfo?.layer

// 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)
@@ -386,7 +402,10 @@ class MouseEvent extends Event {
* @private
*/
_leftUpHandler(movement) {
this._raiseEvent(MouseEventType.LEFT_UP, { movement })
this._raiseEvent(
MouseEventType.LEFT_UP,
this._getMouseInfo(movement.position)
)
}

/**
@@ -410,7 +429,10 @@ class MouseEvent extends Event {
* @private
*/
_rightUpHandler(movement) {
this._raiseEvent(MouseEventType.RIGHT_UP, { movement })
this._raiseEvent(
MouseEventType.RIGHT_UP,
this._getMouseInfo(movement.position)
)
}

/**

+ 6
- 1
src/modules/index.js View File

@@ -4,7 +4,12 @@

export { default as Viewer } from './viewer/Viewer'

export { MouseEventType, SceneEventType } from './event'
export {
MouseEventType,
SceneEventType,
TileSetEventType,
ModelEventType,
} from './event'

export { MouseMode } from './option'


+ 2
- 2
src/modules/overlay/dynamic/DynamicBillboard.js View File

@@ -13,7 +13,7 @@ import { Util } from '../../utils'
class DynamicBillboard extends DynamicOverlay {
constructor(position, icon) {
super()
this._posistion = Parse.parsePosition(position)
this._position = Parse.parsePosition(position)
this._icon = icon
this._delegate = new Cesium.Entity({ billboard: {} })
this._state = State.INITIALIZED
@@ -54,7 +54,7 @@ class DynamicBillboard extends DynamicOverlay {
this._startTime = Cesium.JulianDate.now()
this._sampledPosition.addSample(
this._startTime,
Transform.transformWGS84ToCartesian(this._posistion)
Transform.transformWGS84ToCartesian(this._position)
)
this._delegate.position = this._sampledPosition
this._cache.push(this._startTime)

+ 2
- 2
src/modules/overlay/dynamic/DynamicModel.js View File

@@ -12,7 +12,7 @@ import { Util } from '../../utils'
class DynamicModel extends DynamicOverlay {
constructor(position, modelUrl) {
super()
this._posistion = Parse.parsePosition(position)
this._position = Parse.parsePosition(position)
this._modelUrl = modelUrl
this._delegate = new Cesium.Entity({ model: {} })
this._state = State.INITIALIZED
@@ -40,7 +40,7 @@ class DynamicModel extends DynamicOverlay {
this._startTime = Cesium.JulianDate.now()
this._sampledPosition.addSample(
this._startTime,
Transform.transformWGS84ToCartesian(this._posistion)
Transform.transformWGS84ToCartesian(this._position)
)
this._delegate.position = this._sampledPosition
this._delegate.orientation = new Cesium.VelocityOrientationProperty(

+ 28
- 0
src/modules/overlay/primitive/ModelPrimitive.js View File

@@ -8,6 +8,7 @@ import State from '../../state/State'
import Parse from '../../parse/Parse'
import { Transform } from '../../transform'
import { Util } from '../../utils'
import { ModelEvent } from '../../event'

class ModelPrimitive extends Overlay {
constructor(position, modelUrl) {
@@ -15,6 +16,7 @@ class ModelPrimitive extends Overlay {
this._position = Parse.parsePosition(position)
this._modelUrl = modelUrl
this._delegate = Cesium.Model.fromGltfAsync({ url: modelUrl })
this._modelEvent = new ModelEvent(this._delegate)
this._state = State.INITIALIZED
}

@@ -80,6 +82,32 @@ class ModelPrimitive extends Overlay {
})
return this
}

/**
* Subscribe event
* @param type
* @param callback
* @param context
* @returns {Overlay}
*/
on(type, callback, context) {
this._overlayEvent.on(type, callback, context || this)
this._modelEvent.on(type, callback, context || this)
return this
}

/**
* Unsubscribe event
* @param type
* @param callback
* @param context
* @returns {Overlay}
*/
off(type, callback, context) {
this._overlayEvent.off(type, callback, context || this)
this._modelEvent.off(type, callback, context || this)
return this
}
}

Overlay.registerType('model_primitive')

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

@@ -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
- 0
src/modules/third-part/index.js View File

@@ -40,4 +40,5 @@ export const THIRD_PART = {
createGooglePhotorealistic3DTileset:
Cesium.createGooglePhotorealistic3DTileset,
createElevationBandMaterial: Cesium.createElevationBandMaterial,
ModelAnimationLoop: Cesium.ModelAnimationLoop,
}

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

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


Loading…
Cancel
Save