200 lines
7.8 KiB
HTML
200 lines
7.8 KiB
HTML
|
<!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>
|