提交
This commit is contained in:
427
example/二三维.html
Normal file
427
example/二三维.html
Normal file
@ -0,0 +1,427 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user