cesium自定义弹窗
本文章是使用js写的。思路1、创建cesiumContainer容器。在script标签内添加cesiumContainer容器Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3OWQ5ZTYzZi05NThmLTRmYjctOTk1Zi01YjczMTQ0ZjZlODAiLCJpZC
·
本文章是使用js写的。
思路
1、创建cesiumContainer容器。
在script标签内添加cesiumContainer容器
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3OWQ5ZTYzZi05NThmLTRmYjctOTk1Zi01YjczMTQ0ZjZlODAiLCJpZCI6NjE0MjMsImlhdCI6MTYyNjA3MjcwMn0.t78sW9YdR2gWIB55li5ZBYOeEz84owJajRUgGmVBbdc'
var viewer = new Cesium.Viewer('cesiumContainer', {
homeButton: false,
baseLayerPicker: false,
navigationHelpButton: false,
animation: false,
timeline: false,
fullscreenButton: false,
vrButton: false,
infoBox: false
})
2、添加标记点
首先要添加点位数据，然后把点位信息标记在地图上
const poin = [{
id: '12321321',
name: "颍红测试点",
type: "固定枪机",
state: "在线",
position: {
x: 116.4568,
y: 39.8926
},
text: '1'
}, {
id: '43244324',
name: "解放修理厂门口",
type: "固定枪机",
state: "在线",
position: {
x: 116.4568,
y: 39.8944
},
text: '2'
}, {
id: '43764324',
name: "新华路加油站",
type: "固定枪机",
state: "在线",
position: {
x: 116.4566,
y: 39.8923
},
text: '3'
}, {
id: '437543345',
name: "康佳大药房",
type: "固定枪机",
state: "在线",
position: {
x: 116.4513,
y: 39.8923
},
text: '4'
}, ]
function addEntity(e) {
let pinBuilder = new Cesium.PinBuilder()
// debugger
e.map(res => {
let poin = viewer.entities.add({
id: res.id,
name: res.name,
position: Cesium.Cartesian3.fromDegrees(res.position.x, res.position.y),
billboard: {
image: pinBuilder.fromText(res.text, Cesium.Color.ROYALBLUE, 48).toDataURL(),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
},
monitoItems: {
data: res
},
})
})
return e
}
//加载点
addEntity(poin)
3、添加弹窗
添加单击事件，点击标记的点位弹出相应的信息框。
function leftDownAction() {
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {
var picked = viewer.scene.pick(movement.position)
if (Cesium.defined(picked) && picked.id.id) {
Popupposition(picked)//弹窗位置控制
let id = picked.id.id
let name = picked.id._name
document.getElementById('title').innerHTML = name
let monitoItems = picked.id.monitoItems
document.getElementById('state').innerHTML = monitoItems.data.state
document.getElementById('type').innerHTML = monitoItems.data.type
} else {
return
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
}
leftDownAction()
4、控制弹窗位置
需要点击不同的标记点，弹窗都会出现在标记点的正上方。并且在移动时弹窗与点位的相对位置是不变的，也就是说移动地球的时候，标签也要跟着动（cesium提供的文档中有一个 viewer.scene.postRender 方法实时更新位置）。
function Popupposition(e) {
let data = e.id.monitoItems.data
//经纬度转为世界坐标
let gisPosition = Cesium.Cartesian3.fromDegrees(
data.position.x,
data.position.y,
0
);
document.getElementById('stateShow').style.display = 'block' //弹出信息框
//实时更新位置
viewer.scene.postRender.addEventListener(() => {
//转化为屏幕坐标
var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, gisPosition);
document.getElementById('stateShow').style.left = (windowPosition.x - 150) + 'px'
document.getElementById('stateShow').style.top = (windowPosition.y - 220) + 'px'
})
}
5、解决滚动不隐藏问题
在转动的过程中，当目标点位已经到地球背面时label标签并没有消失，添加下面的代码解决该问题。
function Popupposition(e) {
let data = e.id.monitoItems.data
//经纬度转为世界坐标
let gisPosition = Cesium.Cartesian3.fromDegrees(
data.position.x,
data.position.y,
0
);
document.getElementById('stateShow').style.display = 'block' //弹出信息框
//实时更新位置
viewer.scene.postRender.addEventListener(() => {
//转化为屏幕坐标
var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, gisPosition);
document.getElementById('stateShow').style.left = (windowPosition.x - 150) + 'px'
document.getElementById('stateShow').style.top = (windowPosition.y - 220) + 'px'
//解决滚动不隐藏问题
const camerPosition = viewer.camera.position;
let height = viewer.scene.globe.ellipsoid.cartesianToCartographic(camerPosition).height;
height += viewer.scene.globe.ellipsoid.maximumRadius;
if ((!(Cesium.Cartesian3.distance(camerPosition, gisPosition) > height)) && viewer.camera.positionCartographic.height < 50000000) {
document.getElementById('stateShow').style.display = "block"
} else {
document.getElementById('stateShow').style.display = "none"
}
})
}
完整代码与结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹出信息框</title>
<script src="../Build/Cesium/Cesium.js"></script>
<!-- <script src="lesson33/Bubble.js"></script> -->
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
@import url(../lesson33/index.css);
</style>
</head>
<body>
<div id="cesiumContainer" class="fullSize">
<div class="state" id="stateShow">
<div :id="id" class="box">
<div class="box-wrap">
<div class="close" onclick="closeClick()">X</div>
<div class="area">
<div class="area-title fontColor" id="title"></div>
</div>
<div class="content">
<div class="data-li">
<div class="data-label textColor">状态：</div>
<div class="data-value">
<span class="label-num yellowColor" id="state"></span>
</div>
</div>
<div class="data-li">
<div class="data-label textColor">类型：</div>
<div class="data-value">
<span class="label-num yellowColor" id="type"></span>
<!-- <span class="label-unit textColor">m³/s</span> -->
</div>
</div>
</div>
</div>
</div>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3OWQ5ZTYzZi05NThmLTRmYjctOTk1Zi01YjczMTQ0ZjZlODAiLCJpZCI6NjE0MjMsImlhdCI6MTYyNjA3MjcwMn0.t78sW9YdR2gWIB55li5ZBYOeEz84owJajRUgGmVBbdc'
var viewer = new Cesium.Viewer('cesiumContainer', {
homeButton: false,
baseLayerPicker: false,
navigationHelpButton: false,
animation: false,
timeline: false,
fullscreenButton: false,
vrButton: false,
infoBox: false
})
//初始化位置
viewer.camera.setView({
// fromDegrees()方法，将经纬度和高程转换为世界坐标
destination: {
x: -2182971.083593166,
y: 4388278.203560757,
z: 4068871.884137431
},
orientation: {
// 指向
heading: 0.7195577085964127,
// 视角
pitch: -0.7397293873082695,
roll: 0.002953934254479762
}
});
//添加影像
var imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
name: "arcgis影像服务"
});
// viewer.imageryLayers.addImageryProvider(imageryProvider);
const poin = [{
id: '12321321',
name: "颍红测试点",
type: "固定枪机",
state: "在线",
position: {
x: 116.4568,
y: 39.8926
},
text: '1'
}, {
id: '43244324',
name: "解放修理厂门口",
type: "固定枪机",
state: "在线",
position: {
x: 116.4568,
y: 39.8944
},
text: '2'
}, {
id: '43764324',
name: "新华路加油站",
type: "固定枪机",
state: "在线",
position: {
x: 116.4566,
y: 39.8923
},
text: '3'
}, {
id: '437543345',
name: "康佳大药房",
type: "固定枪机",
state: "在线",
position: {
x: 116.4513,
y: 39.8923
},
text: '4'
}, ]
function addEntity(e) {
let pinBuilder = new Cesium.PinBuilder()
// debugger
e.map(res => {
let poin = viewer.entities.add({
id: res.id,
name: res.name,
position: Cesium.Cartesian3.fromDegrees(res.position.x, res.position.y),
billboard: {
image: pinBuilder.fromText(res.text, Cesium.Color.ROYALBLUE, 48).toDataURL(),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
},
monitoItems: {
data: res
},
})
})
return e
}
//加载点
addEntity(poin)
//点击加载弹窗
function leftDownAction() {
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {
var picked = viewer.scene.pick(movement.position)
if (Cesium.defined(picked) && picked.id.id) {
Popupposition(picked)
let id = picked.id.id
let name = picked.id._name
document.getElementById('title').innerHTML = name
let monitoItems = picked.id.monitoItems
document.getElementById('state').innerHTML = monitoItems.data.state
document.getElementById('type').innerHTML = monitoItems.data.type
} else {
return
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
}
leftDownAction()
function Popupposition(e) {
let data = e.id.monitoItems.data
//经纬度转为世界坐标
let gisPosition = Cesium.Cartesian3.fromDegrees(
data.position.x,
data.position.y,
0
);
document.getElementById('stateShow').style.display = 'block' //弹出信息框
//实时更新位置
viewer.scene.postRender.addEventListener(() => {
//转化为屏幕坐标
var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, gisPosition);
document.getElementById('stateShow').style.left = (windowPosition.x - 150) + 'px'
document.getElementById('stateShow').style.top = (windowPosition.y - 220) + 'px'
//解决滚动不隐藏问题
const camerPosition = viewer.camera.position;
let height = viewer.scene.globe.ellipsoid.cartesianToCartographic(camerPosition).height;
height += viewer.scene.globe.ellipsoid.maximumRadius;
if ((!(Cesium.Cartesian3.distance(camerPosition, gisPosition) > height)) && viewer.camera.positionCartographic.height < 50000000) {
document.getElementById('stateShow').style.display = "block"
} else {
document.getElementById('stateShow').style.display = "none"
}
})
}
function closeClick() {
document.getElementById('stateShow').style.display = "none"
}
</script>
</body>
</html>
下面是本文中代码的参考来源，有不明白的可以直接进去看看。
参考文章 https://blog.csdn.net/weixin_46730573/article/details/119061305?spm=1001.2014.3001.5502
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
5
0- 0
已为社区贡献4条内容
所有评论(0)