提交
This commit is contained in:
200
example/卷帘对比.html
Normal file
200
example/卷帘对比.html
Normal file
@ -0,0 +1,200 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>卷帘对比</title>
|
||||
<script src="../sdk/YJEarth.min.js"></script>
|
||||
<!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.124/Build/Cesium/Cesium.js"></script> -->
|
||||
<script src="vue.js"></script>
|
||||
<style>
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.button-box {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 9;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app" class="fullSize">
|
||||
<div class="button-box">
|
||||
<button class="button" @Click="setSplit">对比</button>
|
||||
<button class="button" @Click="changeId('model')">changeIdModel</button>
|
||||
<button class="button" @Click="changeId('layer')">changeIdLayer</button>
|
||||
<button class="button" @Click="changeId('tileset')">changeIdTileset</button>
|
||||
<button class="button" @Click="changeId('billboard')">changeIdBillboard</button>
|
||||
<button class="button" @Click="changeId('line')">changeIdLine</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
split: false
|
||||
},
|
||||
async mounted() {
|
||||
await YJ.on({ host: "http://localhost:8888" })
|
||||
await this.createEarth()
|
||||
// await this.addTileset()
|
||||
this.addBillboard()
|
||||
window.AttackArrowObject = this.AttackArrowObject
|
||||
setTimeout(() => {
|
||||
this.addTileset()
|
||||
}, 5000);
|
||||
},
|
||||
methods: {
|
||||
async createEarth() {
|
||||
this.sdk = new YJ.YJEarth("app")
|
||||
window.sdk = this.sdk
|
||||
YJ.Global.CesiumContainer(this.sdk, {
|
||||
compass: true, // 罗盘
|
||||
legend: true, // 比例尺
|
||||
info: true, // 信息栏
|
||||
frame: true // 刷新率
|
||||
})
|
||||
YJ.Global.MouseRightMenu(sdk, true, (text, object) => {
|
||||
console.log(text, object)
|
||||
switch (text) {
|
||||
case '绕中心点旋转':
|
||||
YJ.Global.rotateAround(sdk, object.position)
|
||||
break
|
||||
case '属性':
|
||||
break
|
||||
}
|
||||
})
|
||||
this.CircleDiffuse = new YJ.Obj.CircleDiffuse(this.sdk, { id: 'line', count: 6, lng: 100, lat: 40, transparency: 0.6, circle: [{ radius: 40000, color: '#1aff00' }, { radius: 100000, color: '#ffe600' }] })
|
||||
},
|
||||
setSplit() {
|
||||
this.split = !this.split
|
||||
if (this.split) {
|
||||
YJ.Global.splitScreen.on(this.sdk)
|
||||
}
|
||||
else {
|
||||
YJ.Global.splitScreen.off()
|
||||
}
|
||||
// YJ.Global.splitScreen.setActiveId('11111')
|
||||
},
|
||||
async addTileset() {
|
||||
let Draw = await new YJ.Draw.DrawPoint(this.sdk)
|
||||
let openLeftClick = await new YJ.Global.openLeftClick(this.sdk)
|
||||
let openRightClick = await new YJ.Global.openRightClick(this.sdk)
|
||||
let openMove = await new YJ.Global.openMove(this.sdk)
|
||||
let switchCluster = await new YJ.Global.switchCluster(this.sdk, true)
|
||||
|
||||
this.Model = await new YJ.Obj.Model(this.sdk, {
|
||||
id: 'model',
|
||||
url: "http://127.0.0.1:5502/example/model/tank.glb",
|
||||
position: { lng: 100, lat: 40, alt: 100 },
|
||||
// show: false
|
||||
})
|
||||
this.Model.edit(true)
|
||||
this.Model.flyTo()
|
||||
this.Model.onClick = (a, b, c) => {
|
||||
console.log(a, b, c)
|
||||
}
|
||||
this.Model.onRightClick = (a, b, c) => {
|
||||
console.log(a, b, c)
|
||||
}
|
||||
|
||||
window.Model = this.Model
|
||||
YJ.Global.splitScreen.setActiveId(['model'])
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
let Draw = new YJ.Draw.DrawPolyline(this.sdk)
|
||||
Draw.start(async (a, positions) => {
|
||||
console.log(positions)
|
||||
// let WallStereoscopic = new YJ.Obj.WallStereoscopic(this.sdk, { color: "#00d9ff", width: 100, height: 10, extrudedHeight: 30, positions: positions })
|
||||
let TrajectoryMotion = await new YJ.Obj.TrajectoryMotion(this.sdk, {
|
||||
name: '轨迹运动',
|
||||
loop: true,
|
||||
show: true,
|
||||
state: false,
|
||||
id: '123',
|
||||
viewFollowOrientation: {
|
||||
heading: 40,
|
||||
pitch: -90,
|
||||
roll: 40
|
||||
},
|
||||
model: {
|
||||
show: true,
|
||||
url: "model/tank.glb",
|
||||
pixelSize: 70,
|
||||
scale: 1,
|
||||
},
|
||||
line: {
|
||||
show: false,
|
||||
positions: positions,
|
||||
noseToTail: true,
|
||||
smooth: true
|
||||
},
|
||||
label: {
|
||||
color: "#ffffff",
|
||||
far: 100000,
|
||||
fontSize: 20,
|
||||
near: 2000,
|
||||
position: { lng: 0.3143218031738314, lat: 1.0578739228885836, alt: 0 },
|
||||
scaleByDistance: false,
|
||||
// show: false,
|
||||
value: "1111"
|
||||
}
|
||||
},
|
||||
{
|
||||
confirmCallBack: (v) => {
|
||||
console.log('v', v)
|
||||
},
|
||||
changeModelCallBack: () => {
|
||||
TrajectoryMotion.changeModelUrl('model/tank2.glb')
|
||||
}
|
||||
}
|
||||
)
|
||||
console.log(TrajectoryMotion)
|
||||
TrajectoryMotion.flyTo()
|
||||
TrajectoryMotion.edit(true)
|
||||
TrajectoryMotion.onClick = () => {
|
||||
// alert(1)
|
||||
TrajectoryMotion.edit(true)
|
||||
}
|
||||
this.TrajectoryMotion = TrajectoryMotion
|
||||
window.TrajectoryMotion = TrajectoryMotion
|
||||
})
|
||||
}, 3000);
|
||||
},
|
||||
addBillboard() {
|
||||
let PointObject = new YJ.Obj.BillboardObject(this.sdk, {
|
||||
id: 'billboard',
|
||||
"positions": {
|
||||
"lng": 100,
|
||||
"lat": 40,
|
||||
"alt": 120
|
||||
},
|
||||
})
|
||||
// PointObject.edit(true)
|
||||
window.PointObject = PointObject
|
||||
},
|
||||
changeId(id) {
|
||||
YJ.Global.splitScreen.setActiveId(id)
|
||||
},
|
||||
|
||||
AttackArrowObject() {
|
||||
let Draw = new YJ.Draw.DrawAttackArrow(this.sdk)
|
||||
Draw.start((a, positions) => {
|
||||
let AttackArrowObject = new YJ.Obj.AttackArrowObject(this.sdk, { id: '111111', positions: positions })
|
||||
AttackArrowObject.edit(true)
|
||||
window.AttackArrowObject = AttackArrowObject
|
||||
})
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user