427 lines
17 KiB
HTML
427 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.125/Build/Cesium/Cesium.js"></script> -->
|
||
<script src="../sdk/YJEarth.min.js"></script>
|
||
<script src="vue.js"></script>
|
||
<style>
|
||
body {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
}
|
||
|
||
#app {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100vh;
|
||
}
|
||
|
||
.btns {
|
||
position: absolute;
|
||
left: 10px;
|
||
top: 10px;
|
||
z-index: 9;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app" class="fullSize">
|
||
<div class="btns">
|
||
<button class="button" @Click="open">二三维</button>
|
||
<button class="button" @Click="PointObject">点</button>
|
||
<button class="button" @Click="PolylineObject">线</button>
|
||
<button class="button" @Click="PolygonObject">面</button>
|
||
<button class="button" @Click="AttackArrowObject">箭头面</button>
|
||
<button class="button" @Click="AssembleObject">集结地</button>
|
||
<button class="button" @Click="CircleObject">圆</button>
|
||
<button class="button" @Click="SectorObject">扇形</button>
|
||
<button class="button" @Click="PolyhedronObject">多边体</button>
|
||
<button class="button" @Click="StraightArrowObject">直线箭头面</button>
|
||
<button class="button" @Click="PincerArrowObject">双箭头面</button>
|
||
<button class="button" @Click="WallStereoscopic">围墙</button>
|
||
<button class="button" @Click="WaterSurface">水面</button>
|
||
<button class="button" @Click="RadarScan">扫描</button>
|
||
<button class="button" @Click="Explosion">爆炸</button>
|
||
<!-- <button class="button" @Click="Graffiti">涂鸦</button> -->
|
||
<button class="button" @Click="GroundSvg">军标</button>
|
||
<button class="button" @Click="Flame">火焰</button>
|
||
<button class="button" @Click="GroundText">贴地文字</button>
|
||
<button class="button" @Click="TrajectoryMotion">轨迹运动</button>
|
||
<button class="button" @Click="Layer">底图</button>
|
||
<button class="button" @Click="Tileset">倾斜摄影</button>
|
||
<button class="button" @Click="test">2D</button>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
|
||
</html>
|
||
|
||
<script>
|
||
new Vue({
|
||
el: "#app",
|
||
data: {
|
||
},
|
||
async mounted() {
|
||
await YJ.on()
|
||
this.createEarth()
|
||
|
||
setTimeout(async () => {
|
||
let shp = await new YJ.Obj.Vector(this.sdk1, {
|
||
id: '1111111',
|
||
host: 'http://127.0.0.1:8891',
|
||
path: 'Z:/000测试格式/shp多级.kml',
|
||
field: 'id',
|
||
// opacity: 0.2,
|
||
// color: '#00c8ff'
|
||
})
|
||
await shp.on()
|
||
window.shp = shp
|
||
}, 3000);
|
||
},
|
||
methods: {
|
||
test() {
|
||
this.sdk1.viewer.scene.mode = Cesium.SceneMode.SCENE2D
|
||
},
|
||
open() {
|
||
// this.sdk2 = new YJ.YJEarth("app")
|
||
// this.sdk1.viewer.scene.mode = Cesium.SceneMode.SCENE2D
|
||
|
||
if (this.view2D) {
|
||
new YJ.Global.multiViewportMode.off(this.sdk1)
|
||
}
|
||
else {
|
||
new YJ.Global.multiViewportMode.on(this.sdk1)
|
||
}
|
||
this.view2D = !this.view2D
|
||
},
|
||
async createEarth() {
|
||
this.sdk1 = await new YJ.YJEarth("app")
|
||
|
||
let openLeftClick = await new YJ.Global.openLeftClick(this.sdk1)
|
||
let openRightClick = await new YJ.Global.openRightClick(this.sdk1)
|
||
window.sdk1 = this.sdk1
|
||
|
||
YJ.Global.CesiumContainer(this.sdk1, {
|
||
compass: true, // 罗盘
|
||
legend: true, // 比例尺
|
||
info: true, // 信息栏
|
||
frame: true // 刷新率
|
||
})
|
||
|
||
// let terrain = await new YJ.Obj.Terrain(sdk1, {
|
||
// url: "http://127.0.0.1:8891/yjearth4.0/data/pak/1aa55c41643a44e079c4a6af03fd301c"
|
||
// })
|
||
// setTimeout(() => {
|
||
// let layer = new YJ.Obj.ArcgisWXImagery(this.sdk1, {
|
||
// id: 123,
|
||
// show: true,
|
||
// layer_index: 1
|
||
// })
|
||
// // setTimeout(() => {
|
||
// // layer.show = false
|
||
// // }, 4000);
|
||
// }, 4000);
|
||
console.log(this.sdk1)
|
||
setTimeout(() => {
|
||
let switchCluster = new YJ.Global.switchCluster(this.sdk1, true)
|
||
}, 1000);
|
||
},
|
||
|
||
PointObject() {
|
||
let Draw = new YJ.Draw.DrawPoint(this.sdk1)
|
||
Draw.start((a, positions) => {
|
||
let PointObject = new YJ.Obj.BillboardObject(this.sdk1, {
|
||
positions: { ...positions },
|
||
label: {
|
||
text: '标注点',
|
||
},
|
||
})
|
||
PointObject.onClick = (v) => {
|
||
console.log(v)
|
||
}
|
||
PointObject.edit(true)
|
||
PointObject.Dialog.removeCallBack = (v) => {
|
||
PointObject.remove()
|
||
}
|
||
window.PointObject = PointObject
|
||
})
|
||
},
|
||
PolylineObject() {
|
||
let Draw = new YJ.Draw.DrawPolyline(this.sdk1)
|
||
Draw.start((a, positions) => {
|
||
let PolylineObject = new YJ.Obj.PolylineObject(this.sdk1, { type: 1, positions: positions })
|
||
PolylineObject.edit(true)
|
||
PolylineObject.flyTo()
|
||
PolylineObject.Dialog.removeCallBack = (v) => {
|
||
PolylineObject.remove()
|
||
}
|
||
})
|
||
},
|
||
PolygonObject() {
|
||
let Draw = new YJ.Draw.DrawPolygon(this.sdk1)
|
||
Draw.start((a, positions) => {
|
||
let PolygonObject = new YJ.Obj.PolygonObject(this.sdk1, { show: true, positions: positions })
|
||
PolygonObject.edit(true)
|
||
PolygonObject.onClick = (v) => {
|
||
console.log(v)
|
||
}
|
||
window.PolygonObject = PolygonObject
|
||
})
|
||
},
|
||
AttackArrowObject() {
|
||
let Draw = new YJ.Draw.DrawAttackArrow(this.sdk1)
|
||
Draw.start((a, positions) => {
|
||
let AttackArrowObject = new YJ.Obj.AttackArrowObject(this.sdk1, { positions: positions })
|
||
AttackArrowObject.edit(true)
|
||
AttackArrowObject.flyTo()
|
||
AttackArrowObject.Dialog.removeCallBack = (v) => {
|
||
AttackArrowObject.remove()
|
||
}
|
||
})
|
||
},
|
||
AssembleObject() {
|
||
let Draw = new YJ.Draw.DrawAssemble(this.sdk1)
|
||
Draw.start((a, positions) => {
|
||
let AssembleObject = new YJ.Obj.AssembleObject(this.sdk1, {
|
||
label: {
|
||
show: true
|
||
}, positions: positions
|
||
})
|
||
AssembleObject.edit(true)
|
||
AssembleObject.flyTo()
|
||
AssembleObject.Dialog.removeCallBack = (v) => {
|
||
AssembleObject.remove()
|
||
}
|
||
})
|
||
},
|
||
SectorObject() {
|
||
let Draw = new YJ.Draw.DrawSector(this.sdk1)
|
||
Draw.start((a, options) => {
|
||
let SectorObject = new YJ.Obj.SectorObject(this.sdk1, {
|
||
center: options.center, //中心坐标
|
||
radius: options.radius, //半径
|
||
startAngle: options.startAngle, //起始角度
|
||
endAngle: options.endAngle, //结束角度
|
||
})
|
||
SectorObject.Dialog.removeCallBack = () => {
|
||
SectorObject.remove()
|
||
}
|
||
SectorObject.edit(true)
|
||
SectorObject.flyTo()
|
||
})
|
||
},
|
||
CircleObject() {
|
||
let Draw = new YJ.Draw.DrawCircle(this.sdk1)
|
||
Draw.start((a, options) => {
|
||
let CircleObject = new YJ.Obj.CircleObject(this.sdk1, { center: options.center, radius: options.radius })
|
||
CircleObject.Dialog.removeCallBack = () => {
|
||
CircleObject.remove()
|
||
}
|
||
CircleObject.edit(true)
|
||
CircleObject.flyTo()
|
||
})
|
||
},
|
||
PolyhedronObject() {
|
||
let Draw = new YJ.Draw.DrawPolygon(this.sdk1)
|
||
Draw.start((a, positions) => {
|
||
let PolyhedronObject = new YJ.Obj.PolyhedronObject(this.sdk1, { positions })
|
||
PolyhedronObject.edit(true)
|
||
PolyhedronObject.Dialog.removeCallBack = (v) => {
|
||
PolyhedronObject.remove()
|
||
}
|
||
PolyhedronObject.flyTo()
|
||
})
|
||
},
|
||
StraightArrowObject() {
|
||
let Draw = new YJ.Draw.DrawStraightArrow(this.sdk1)
|
||
Draw.start((a, positions) => {
|
||
console.log(positions)
|
||
let StraightArrowObject = new YJ.Obj.StraightArrowObject(this.sdk1, { positions })
|
||
StraightArrowObject.edit(true)
|
||
StraightArrowObject.Dialog.removeCallBack = (v) => {
|
||
StraightArrowObject.remove()
|
||
}
|
||
StraightArrowObject.flyTo()
|
||
})
|
||
},
|
||
PincerArrowObject() {
|
||
let Draw = new YJ.Draw.DrawPincerArrow(this.sdk1)
|
||
Draw.start((a, positions) => {
|
||
let PincerArrowObject = new YJ.Obj.PincerArrowObject(this.sdk1, { positions })
|
||
PincerArrowObject.edit(true)
|
||
PincerArrowObject.Dialog.removeCallBack = (v) => {
|
||
PincerArrowObject.remove()
|
||
}
|
||
PincerArrowObject.flyTo()
|
||
})
|
||
},
|
||
WallStereoscopic() {
|
||
let Draw = new YJ.Draw.DrawPolyline(this.sdk1)
|
||
Draw.start((a, positions) => {
|
||
let WallStereoscopic = new YJ.Obj.WallStereoscopic(this.sdk1, { color: "#00d9ff", width: 10000, height: 100000, extrudedHeight: 0, cornerType: "ROUNDED", positions: positions })
|
||
WallStereoscopic.edit(true)
|
||
WallStereoscopic.Dialog.removeCallBack = (v) => {
|
||
WallStereoscopic.remove()
|
||
}
|
||
})
|
||
},
|
||
WaterSurface() {
|
||
let Draw = new YJ.Draw.DrawPolygon(this.sdk1)
|
||
|
||
Draw.start((a, positions) => {
|
||
let WaterSurface = new YJ.Obj.WaterSurface(this.sdk1, {
|
||
name: '水面',
|
||
positions: positions,
|
||
color: "#214387",
|
||
frequency: 10,
|
||
animationSpeed: 1,
|
||
amplitude: 100
|
||
},
|
||
{
|
||
removeCallBack: () => {
|
||
WaterSurface.remove()
|
||
}
|
||
}
|
||
)
|
||
WaterSurface.edit(true)
|
||
WaterSurface.flyTo()
|
||
})
|
||
},
|
||
RadarScan() {
|
||
let Draw = new YJ.Draw.DrawPoint(this.sdk1)
|
||
Draw.start((a, position) => {
|
||
let RadarScan = new YJ.Obj.RadarScan(this.sdk1, { show: true, lng: position.lng, lat: position.lat, color: "#ff0000", radius: 150, duration: 2000 })
|
||
RadarScan.flyTo()
|
||
RadarScan.edit(true)
|
||
})
|
||
},
|
||
Explosion() {
|
||
let Draw = new YJ.Draw.DrawPoint(this.sdk1)
|
||
Draw.start((a, positions) => {
|
||
//爆炸效果
|
||
let explosion = new YJ.Obj.Explosion(this.sdk1, {
|
||
position: positions
|
||
})
|
||
explosion.Dialog.removeCallBack = () => {
|
||
explosion.remove()
|
||
}
|
||
explosion.edit(true)
|
||
explosion.flyTo()
|
||
})
|
||
},
|
||
Graffiti() {
|
||
let Graffiti = new YJ.Obj.Graffiti(this.sdk1)
|
||
},
|
||
GroundSvg() {
|
||
let Draw = new YJ.Draw.DrawPoint(this.sdk1)
|
||
Draw.start((a, positions) => {
|
||
let GroundSvg = new YJ.Obj.GroundSvg(this.sdk1, {
|
||
url: './image/军标完整svg/2、装备与设施/6、航空器svg/预警机.svg',
|
||
position: positions,
|
||
})
|
||
GroundSvg.load(() => {
|
||
// GroundSvg.edit(true)
|
||
GroundSvg.drag(true)
|
||
// GroundSvg.flyTo()
|
||
// GroundSvg.Dialog.removeCallBack = () => {
|
||
// GroundSvg.remove()
|
||
// }
|
||
})
|
||
window.GroundSvg = GroundSvg
|
||
})
|
||
},
|
||
Flame() {
|
||
let Draw = new YJ.Draw.DrawPoint(this.sdk1)
|
||
Draw.start((a, positions) => {
|
||
let Flame = new YJ.Obj.Flame(this.sdk1, {
|
||
url: "./image/smoke.png",
|
||
...positions
|
||
})
|
||
Flame.flyTo()
|
||
Flame.edit(true)
|
||
Flame.Dialog.removeCallBack = () => {
|
||
Flame.remove()
|
||
}
|
||
})
|
||
},
|
||
GroundText() {
|
||
let Draw = new YJ.Draw.DrawPoint(this.sdk1)
|
||
Draw.start((a, positions) => {
|
||
let GroundText = new YJ.Obj.GroundText(this.sdk1, {
|
||
position: positions,
|
||
text: '他说她的绿色玻璃雨衣像一只瓶\n又注了一句：“药瓶。”\n她以为他在那里讽嘲她的孱弱\n然而他又附耳加了一句\n“你就是医我的药。”\n她红了脸，白了他一眼'
|
||
})
|
||
GroundText.flyTo()
|
||
window.GroundText = GroundText
|
||
})
|
||
},
|
||
|
||
TrajectoryMotion() {
|
||
let Draw = new YJ.Draw.DrawPolyline(this.sdk1)
|
||
Draw.start((a, positions) => {
|
||
let TrajectoryMotion = new YJ.Obj.TrajectoryMotion(this.sdk1, {
|
||
name: '轨迹运动',
|
||
loop: true,
|
||
show: true,
|
||
id: 1111,
|
||
state: false,
|
||
model: {
|
||
show: true,
|
||
url: "model/tank.glb",
|
||
pixelSize: 70,
|
||
scale: 1,
|
||
},
|
||
line: {
|
||
show: false,
|
||
positions: positions,
|
||
noseToTail: true,
|
||
smooth: true
|
||
}
|
||
},
|
||
{
|
||
changeModelCallBack: () => {
|
||
TrajectoryMotion.changeModelUrl('model/tank2.glb')
|
||
}
|
||
}
|
||
)
|
||
console.log(TrajectoryMotion)
|
||
TrajectoryMotion.flyTo()
|
||
TrajectoryMotion.edit(true)
|
||
TrajectoryMotion.onClick = () => {
|
||
// alert(1)
|
||
TrajectoryMotion.edit(true)
|
||
}
|
||
window.TrajectoryMotion = TrajectoryMotion
|
||
})
|
||
},
|
||
|
||
async Layer() {
|
||
let layer = new YJ.Obj.ArcgisWXImagery(this.sdk1, {
|
||
id: 111,
|
||
show: true,
|
||
layer_index: 1
|
||
})
|
||
window.layer = layer
|
||
},
|
||
|
||
async Tileset() {
|
||
let tileset = new YJ.Obj.Tileset(this.sdk1, {
|
||
show: true,
|
||
name: 'xxx',
|
||
url: "http://localhost:8891/yjearth4.0/data/tileset/24b9be7e2cdfa679b3a77c6c51b47bdc/tileset.json",
|
||
position: { lng: 100, lat: 40, alt: 50 },
|
||
})
|
||
await tileset.on()
|
||
tileset.flyTo()
|
||
// setTimeout(() => {
|
||
// tileset.show = false
|
||
// }, 5000);
|
||
}
|
||
}
|
||
})
|
||
</script> |