mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-07-04 15:17:36 +00:00
179 lines
5.6 KiB
HTML
179 lines
5.6 KiB
HTML
<!--********************************************************************
|
||
* by jiawanlong
|
||
*********************************************************************-->
|
||
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
|
||
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
|
||
<script src="./jquery-1.8.3.min.js"></script>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
#cesiumContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.pops {
|
||
position: absolute;
|
||
color: #ffffff;
|
||
z-index: 99;
|
||
pointer-events: none;
|
||
display: none;
|
||
}
|
||
|
||
.arrow_box {
|
||
position: relative;
|
||
background: rgba(63, 72, 84, 0.9);
|
||
left: -50%;
|
||
top: -126px;
|
||
padding: 10px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.arrow_box:before {
|
||
top: 100%;
|
||
left: 50%;
|
||
border: solid transparent;
|
||
content: " ";
|
||
height: 0;
|
||
width: 0;
|
||
position: absolute;
|
||
pointer-events: none;
|
||
}
|
||
|
||
|
||
.arrow_box:before {
|
||
border-color: transparent;
|
||
border-top-color: rgba(63, 72, 84, 0.9);
|
||
border-width: 12px;
|
||
margin-left: -12px;
|
||
}
|
||
|
||
.pops_close {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 5px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
z-index: 100;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.pops_con {
|
||
margin-top: 10px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
|
||
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
|
||
<div class="pops" id="pops">
|
||
<div class='arrow_box'>
|
||
<span class="pops_close">×</span>
|
||
<div class="pops_con">
|
||
<p class="name">测试！！！！</p>
|
||
<p>测试！！！！</p>
|
||
<p>测试！！！！</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
|
||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyMjBhMzcxMC0wNjBiLTRmYjItYjY1MC0wMzAwMzMyMGUyMmEiLCJpZCI6MzAzNzc3LCJpYXQiOjE3NDc2Mzk0NTV9.E_90aKtVdzRGlU2z48VwJ4mWvl-uuDkfQBCOO6zbzn4'
|
||
const viewer = new Cesium.Viewer('map', {});
|
||
viewer.scene.debugShowFramesPerSecond = true;
|
||
|
||
viewer.entities.add({
|
||
position: Cesium.Cartesian3.fromDegrees(-100, 40),
|
||
billboard: {
|
||
image: './icon.png',
|
||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||
scale: 1,
|
||
show: true,
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
width: 32,
|
||
height: 32,
|
||
},
|
||
data: {
|
||
name: '凯里市九寨大坡公益性公园'
|
||
}
|
||
});
|
||
|
||
viewer.entities.add({
|
||
position: Cesium.Cartesian3.fromDegrees(-120, 20),
|
||
billboard: {
|
||
image: './icon.png',
|
||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||
scale: 1,
|
||
show: true,
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
width: 32,
|
||
height: 32,
|
||
},
|
||
data: {
|
||
name: '乐沙坡公园'
|
||
}
|
||
});
|
||
|
||
|
||
// 取消默认的单击和双击事件，右上角弹窗很丑
|
||
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
|
||
|
||
// 左单击
|
||
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
||
handler.setInputAction(function (clickEvent) {
|
||
|
||
// 获取被点击的实体
|
||
var ray1 = viewer.camera.getPickRay(clickEvent.position);
|
||
var cartesian = viewer.scene.globe.pick(ray1, viewer.scene);
|
||
var pickEd = viewer.scene.pick(clickEvent.position);
|
||
console.log(pickEd)
|
||
|
||
if (pickEd) {
|
||
var htmlOverlay = document.getElementById('pops');
|
||
var scratch = new Cesium.Cartesian2();
|
||
|
||
let data = pickEd.id.data;
|
||
$(".pops_con .name").html(data.name)
|
||
|
||
viewer.scene.preRender.addEventListener(function () {
|
||
var position = new Cesium.Cartesian3(pickEd.primitive.position.x, pickEd.primitive.position.y, pickEd.primitive.position.z);
|
||
var canvasPosition = viewer.scene.cartesianToCanvasCoordinates(position, scratch);
|
||
if (Cesium.defined(canvasPosition)) {
|
||
htmlOverlay.style.top = canvasPosition.y + 'px';
|
||
htmlOverlay.style.left = canvasPosition.x + 'px';
|
||
$(".arrow_box").css('top', -($("#pops .arrow_box").height() + 40) + 'px')
|
||
}
|
||
});
|
||
|
||
$("#pops").show()
|
||
}
|
||
|
||
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
|
||
|
||
$(".pops_close").click(() => {
|
||
$("#pops").hide()
|
||
})
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |