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>
|