Files
sdk4_demo/example/添加广告牌.html
2025-07-03 15:12:58 +08:00

103 lines
2.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../sdk/YJEarth.min.js"></script>
<script src="vue.js"></script>
<style>
body {
width: 100%;
height: 100%;
margin: 0;
}
#app {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="app" class="fullSize">
<div id="aaa"></div>
<button @click="setGroundCover">地形遮挡</button>
<div id="testDiv" style="position: absolute; z-index: 999;background-color: #ffffff;padding: 20px;">一个div</div>
</div>
</body>
</html>
<script>
new Vue({
el: "#app",
data: {
PolylineObject: null,
GroundCover: YJ.Global.getGroundCover()
},
async mounted() {
await YJ.on({ host: 'http://127.0.0.1:8891' })
this.createEarth()
},
methods: {
async createEarth() {
this.sdk = await new YJ.YJEarth("app")
window.sdk = this.sdk
YJ.Global.CesiumContainer(sdk, {
// compass: true, // 罗盘
// legend: true, // 比例尺
info: true, // 信息栏
frame: true // 刷新率
})
YJ.Global.setGroundCover(sdk, true)
let openLeftClick = await new YJ.Global.openLeftClick(this.sdk)
let openRightClick = await new YJ.Global.openRightClick(this.sdk)
YJ.Global.MouseRightMenu(sdk, true, (text, object) => {
console.log(text, object)
switch (text) {
case '绕中心点旋转':
YJ.Global.rotateAround(sdk, object.position)
break
case '属性':
break
}
})
this.test()
},
test() {
for (let i = 0; i < 10; i++) {
let PointObject = new YJ.Obj.BillboardObject(this.sdk, {
positions: {
lng: Math.random() * 10 + 80,
lat: Math.random() * 4 + 26
},
heightMode: 3,
scaleByDistance: false,
billboard: {
scale: 2,
image: 'http://127.0.0.1:5502/example/image/3.gif'
},
label: {
fontSize: 20,
},
})
PointObject.onClick = (a, b, c) => {
console.log(a, b, c)
}
window.PointObject = PointObject
}
},
setGroundCover() {
this.GroundCover = !this.GroundCover
alert(this.GroundCover)
YJ.Global.setGroundCover(sdk, this.GroundCover)
}
}
})
</script>