158 lines
4.9 KiB
HTML
158 lines
4.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Title</title>
|
||
|
|
<!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Cesium.js"></script> -->
|
||
|
|
<script src="../sdk/YJEarth.min.js"></script>
|
||
|
|
<script src="vue.js"></script>
|
||
|
|
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
|
||
|
|
<!-- 引入组件库 -->
|
||
|
|
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="app" class="fullSize">
|
||
|
|
<button class="button" @Click="Draw">绘制</button>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
new Vue({
|
||
|
|
el: "#app",
|
||
|
|
data: {
|
||
|
|
},
|
||
|
|
async mounted() {
|
||
|
|
await YJ.on()
|
||
|
|
this.createEarth()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async createEarth() {
|
||
|
|
this.sdk = await new YJ.YJEarth("app")
|
||
|
|
window.sdk = this.sdk
|
||
|
|
let openLeftClick = await new YJ.Global.openLeftClick(this.sdk)
|
||
|
|
YJ.Global.MouseRightMenu(this.sdk, true, (text, object) => {
|
||
|
|
switch (text) {
|
||
|
|
case 'rotateAround': // 绕鼠标点旋转
|
||
|
|
YJ.Global.rotateAround(this.sdk, object.position)
|
||
|
|
break
|
||
|
|
case 'edit': // 属性
|
||
|
|
break
|
||
|
|
}
|
||
|
|
})
|
||
|
|
window.tileset = new YJ.Obj.Tileset(window.sdk, {
|
||
|
|
show: true,
|
||
|
|
url: "http://localhost:8891/yjearth4.0/data/tileset/6dee5cc84e66a61231e3a0048fd6c25a/tileset.json",
|
||
|
|
id: "123456",
|
||
|
|
// transparency: 0.2
|
||
|
|
position: { lng: 100, lat: 40, alt: 300 }
|
||
|
|
})
|
||
|
|
await tileset.on()
|
||
|
|
tileset.flyTo()
|
||
|
|
setTimeout(() => {
|
||
|
|
let Draw = new YJ.Draw.DrawPolyline(this.sdk)
|
||
|
|
Draw.start(async (a, positions) => {
|
||
|
|
console.log(positions)
|
||
|
|
// positions[0].alt = 100
|
||
|
|
// 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,
|
||
|
|
// ground: true,
|
||
|
|
model: {
|
||
|
|
show: true,
|
||
|
|
url: "model/tank.glb",
|
||
|
|
pixelSize: 70,
|
||
|
|
scale: 1,
|
||
|
|
},
|
||
|
|
line: {
|
||
|
|
show: true,
|
||
|
|
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/people.glb')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
)
|
||
|
|
console.log(TrajectoryMotion)
|
||
|
|
TrajectoryMotion.flyTo()
|
||
|
|
TrajectoryMotion.edit(true)
|
||
|
|
TrajectoryMotion.onClick = () => {
|
||
|
|
// alert(1)
|
||
|
|
TrajectoryMotion.edit(true)
|
||
|
|
}
|
||
|
|
this.TrajectoryMotion = TrajectoryMotion
|
||
|
|
window.TrajectoryMotion = TrajectoryMotion
|
||
|
|
})
|
||
|
|
}, 2000);
|
||
|
|
|
||
|
|
},
|
||
|
|
Draw() {
|
||
|
|
this.TrajectoryMotion.show = !this.TrajectoryMotion.show
|
||
|
|
return
|
||
|
|
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: '轨迹运动',
|
||
|
|
model: {
|
||
|
|
show: true,
|
||
|
|
url: "model/tank.glb",
|
||
|
|
pixelSize: 70,
|
||
|
|
scale: 0.01,
|
||
|
|
},
|
||
|
|
line: {
|
||
|
|
show: true,
|
||
|
|
positions: positions,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
changeModelCallBack: () => {
|
||
|
|
TrajectoryMotion.changeModelUrl('model/people.glb')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
)
|
||
|
|
console.log(TrajectoryMotion)
|
||
|
|
TrajectoryMotion.flyTo()
|
||
|
|
TrajectoryMotion.edit(true)
|
||
|
|
TrajectoryMotion.onClick = () => {
|
||
|
|
TrajectoryMotion.edit(true)
|
||
|
|
}
|
||
|
|
// setTimeout(() => {
|
||
|
|
// // TrajectoryMotion.viewFollow = true
|
||
|
|
// TrajectoryMotion.edit(true)
|
||
|
|
// }, 5000);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|