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

tags/3.3.0
cavencj 2 years ago
parent
075b9c7efb
commit
1f222d1e59
11 changed files with 465 additions and 258 deletions
Split View Show Diff Stats
  1. 232
    206
      examples/index.html
  2. 4
    0
      examples/list.js
  3. 59
    47
      examples/model/model_primitive.html
  4. 77
    0
      examples/model/model_primitive_d.html
  5. 5
    1
      src/modules/event/EventType.js
  6. 1
    0
      src/modules/event/index.js
  7. 54
    0
      src/modules/event/type/ModelEvent.js
  8. 2
    2
      src/modules/overlay/dynamic/DynamicBillboard.js
  9. 2
    2
      src/modules/overlay/dynamic/DynamicModel.js
  10. 28
    0
      src/modules/overlay/primitive/ModelPrimitive.js
  11. 1
    0
      src/modules/third-part/index.js

+ 232
- 206
examples/index.html View File

@@ -1,209 +1,235 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DC SDK examples</title>
<script src="./jquery.min.js"></script>
<script src="./jquery.accordion.js"></script>
<style>

* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.container{
display: flex;
height: 100%;

}


.example-list::-webkit-scrollbar{
width:10px;
height:10px;
/**/
}
.example-list::-webkit-scrollbar-track{
background: #424242;
}
.example-list::-webkit-scrollbar-thumb{
background: #686868;
max-height: 20px;
}


.nav{
width: 250px;
height: 100%;
overflow: hidden;
background: #222;
color: #fff;
display: flex;
flex-direction: column;
}
.example{
flex: 1;
height: 100%;
overflow: hidden;
}

iframe{
width: 100%;
height: 100%;
overflow: hidden;
}

.nav .banner{
padding: 20px 20px 0 20px;
color:#1e80ff;
font-weight: bold;
font-style: italic;
}
.example-list-wrapper{
flex: 1;
overflow: hidden;
user-select: none;
margin-top: 15px;
display: flex;
flex-direction: column;
}

.example-list{
flex: 1;
overflow: hidden;
overflow-y: auto;
}

.example-list-wrapper .desc{
height: 150px;
}

.example-list .example-item{
border-top: 1px solid #444 ;
}

.example-list h4{
padding-left: 20px;
font-size: 14px ;
margin: 7px 0;
color: #bcbcbc;
}

.example-list h4:hover,.example-list ul li:hover{
cursor: pointer;
}

.example-list ul{
padding-left: 35px;
list-style: none;
margin-top: 5px;
background: #181717;
}

.example-list ul li{
margin: 5px 0;
font-size: 13px;
}

.example-list ul li:hover a,.example-list ul li.active a{
color: #1e80ff;
}

.example-list ul li:hover,.example-list ul li a{
color: #fff;
text-decoration: none;
}


#code-link{
position: fixed;
bottom: 16px;
left: 270px;
padding: 8px;
border-radius: 50%;
margin-bottom: 0;
background-color: #FFF;
opacity: .9;
z-index: 999;
box-shadow: 0 0 4px rgba(0,0,0,.15);
display: flex;
}

#code-link img{
width: 30px;
}


</style>
</head>
<body>

<div class="container">
<div class="nav">
<div class="banner"> DC-SDK v3.1.0 </div>
<div class="example-list-wrapper">
<div id="example-list" class="example-list" data-accordion-group> </div>
<div class="desc"></div>
</div>
</div>
<div class="example">
<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" id="inner-page" name="inner-page" style="border: 0" allow="fullscreen; xr-spatial-tracking;" > </iframe>
<a id="code-link" href="" target="_blank"><img src="./assets/icon/code.svg" title="源码" alt=“”></a>
</div>

<script src="./list.js"></script>
<script type="text/javascript">
$(document).ready(function() {
let href =undefined
let $currentPage = undefined
if(window.location.href.indexOf("#")> -1){
let hrefArr = window.location.href.split('#')
if(hrefArr[1]){
href = hrefArr[1].replace('_','/')
}
$('#code-link').attr('href','https://github.com/dvgis/dc-sdk/blob/master/examples/'+href)
}
$('#inner-page').attr('src',href || 'info/start.html')

EXAMPLE_LIST.forEach(item => {
let $section = $('<div data-accordion ></div>')
$section.addClass('example-item')
let $title = $('<h4 data-control ></h4>').text(item.name)
$title.appendTo($section)
let $pageWrapper= $('<ul data-content></ul>')
$pageWrapper.appendTo($section)
if(item.children){
item.children.forEach(child => {
let $page = $('<li></li>')
let $link = $('<a></a>').text(child.name)
$link.attr('href',item.folder+'/'+child.page).attr('target','inner-page')
$link.bind('click',e=>{
if($currentPage){
$currentPage.removeClass('active')
}
window.location.href = window.location.href.replace(/#\w*\.?\w*/g,'') +'#'+ item.folder+ '_'+child.page
$page.addClass('active')
$('#code-link').attr('href','https://github.com/dvgis/dc-sdk/blob/master/examples/'+item.folder +'/'+child.page)
$currentPage =$page
})
$page.append($link)
$pageWrapper.append($page)
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>DC SDK examples</title>
<script src="./jquery.min.js"></script>
<script src="./jquery.accordion.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.container {
display: flex;
height: 100%;
}

.example-list::-webkit-scrollbar {
width: 10px;
height: 10px;
/**/
}
.example-list::-webkit-scrollbar-track {
background: #424242;
}
.example-list::-webkit-scrollbar-thumb {
background: #686868;
max-height: 20px;
}

.nav {
width: 250px;
height: 100%;
overflow: hidden;
background: #222;
color: #fff;
display: flex;
flex-direction: column;
}
.example {
flex: 1;
height: 100%;
overflow: hidden;
}

iframe {
width: 100%;
height: 100%;
overflow: hidden;
}

.nav .banner {
padding: 20px 20px 0 20px;
color: #1e80ff;
font-weight: bold;
font-style: italic;
}
.example-list-wrapper {
flex: 1;
overflow: hidden;
user-select: none;
margin-top: 15px;
display: flex;
flex-direction: column;
}

.example-list {
flex: 1;
overflow: hidden;
overflow-y: auto;
}

.example-list-wrapper .desc {
height: 150px;
}

.example-list .example-item {
border-top: 1px solid #444;
}

.example-list h4 {
padding-left: 20px;
font-size: 14px;
margin: 7px 0;
color: #bcbcbc;
}

.example-list h4:hover,
.example-list ul li:hover {
cursor: pointer;
}

.example-list ul {
padding-left: 35px;
list-style: none;
margin-top: 5px;
background: #181717;
}

.example-list ul li {
margin: 5px 0;
font-size: 13px;
}

.example-list ul li:hover a,
.example-list ul li.active a {
color: #1e80ff;
}

.example-list ul li:hover,
.example-list ul li a {
color: #fff;
text-decoration: none;
}

#code-link {
position: fixed;
bottom: 16px;
left: 270px;
padding: 8px;
border-radius: 50%;
margin-bottom: 0;
background-color: #fff;
opacity: 0.9;
z-index: 999;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
display: flex;
}

#code-link img {
width: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="nav">
<div class="banner">DC-SDK v3.2.0</div>
<div class="example-list-wrapper">
<div
id="example-list"
class="example-list"
data-accordion-group
></div>
<div class="desc"></div>
</div>
</div>
<div class="example">
<iframe
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
id="inner-page"
name="inner-page"
style="border: 0"
allow="fullscreen; xr-spatial-tracking;"
>
</iframe>
<a id="code-link" href="" target="_blank"
><img src="./assets/icon/code.svg" title="源码" alt="“”"
/></a>
</div>

<script src="./list.js"></script>
<script type="text/javascript">
$(document).ready(function () {
let href = undefined
let $currentPage = undefined
if (window.location.href.indexOf('#') > -1) {
let hrefArr = window.location.href.split('#')
if (hrefArr[1]) {
href = hrefArr[1].replace('_', '/')
}
$('#code-link').attr(
'href',
'https://github.com/dvgis/dc-sdk/blob/master/examples/' + href
)
}
$('#inner-page').attr('src', href || 'info/start.html')

EXAMPLE_LIST.forEach((item) => {
let $section = $('<div data-accordion ></div>')
$section.addClass('example-item')
let $title = $('<h4 data-control ></h4>').text(item.name)
$title.appendTo($section)
let $pageWrapper = $('<ul data-content></ul>')
$pageWrapper.appendTo($section)
if (item.children) {
item.children.forEach((child) => {
let $page = $('<li></li>')
let $link = $('<a></a>').text(child.name)
$link
.attr('href', item.folder + '/' + child.page)
.attr('target', 'inner-page')
$link.bind('click', (e) => {
if ($currentPage) {
$currentPage.removeClass('active')
}
window.location.href =
window.location.href.replace(/#\w*\.?\w*/g, '') +
'#' +
item.folder +
'_' +
child.page
$page.addClass('active')
$('#code-link').attr(
'href',
'https://github.com/dvgis/dc-sdk/blob/master/examples/' +
item.folder +
'/' +
child.page
)
$currentPage = $page
})
$page.append($link)
$pageWrapper.append($page)
})
}
$section.appendTo($('#example-list'))
})
}
$section.appendTo($('#example-list'))
})
$('#example-list [data-accordion]').accordion();
});
</script>
</div>
</body>
$('#example-list [data-accordion]').accordion()
})
</script>
</div>
</body>
</html>

+ 4
- 0
examples/list.js View File

@@ -491,6 +491,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('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>

+ 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._tileset.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

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

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

Write Preview
Loading…
Cancel
Save