用Cesium创建label,当页面存在label的情况下再次创建label,则新建label的背景边缘会变得模糊
现象:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../cesium1.99//Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="../cesium1.99//Build/Cesium/Widgets/widgets.css">
<script src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>
<style>
body {
padding: 0;
margin: 0;
overflow: hidden;
}
#cesiumContainer {
width: 100vw;
height: 100vh;
}
#createLabel {
position: absolute;
top: 20px;
left: 20px;
background-color: aqua;
border: 1px solid black;
z-index: 100;
cursor: pointer;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="createLabel">创建一个视界之外的label</div>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1M2U3MjVhZS0xYjgxLTQ0NzktYjdmMi01ZWY0MTcxYzI2ZDIiLCJpZCI6MTUyMDc2LCJpYXQiOjE2ODg2OTI1Mzh9.CDm3pFXt4bp6HkFW6Hqlud3sReM2inDDAgFVzpXq3QA'
const viewer = new Cesium.Viewer("cesiumContainer", {
timeline: false,//时间轴控件
animation: false,//动画控件
geocoder: false,//搜索按钮
homeButton: false,//主页按钮
sceneModePicker: false,//投影方式按钮
baseLayerPicker: false,//图层选择按钮
navigationHelpButton: false,//帮助手势按钮
fullscreenButton: false,//全屏按钮
})
const label1 = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(112, 30, 500),
label: {
text: '测试用label1\n位于视界内\n背景完好',
font: "16px",
fillColor: Cesium.Color.BLACK,
showBackground: true,
backgroundColor: new Cesium.Color(1.0, 1.0, 1.0, 0.5)
}
})
viewer.zoomTo(label1)
$("#createLabel").click(function () {
const label2 = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(112.5, 30, 500),
label: {
text: '测试用label2\n位于视界外\n背景边缘模糊',
font: "16px",
fillColor: Cesium.Color.BLACK,
showBackground: true,
backgroundColor: new Cesium.Color(1.0, 1.0, 1.0, 0.5)
}
})
viewer.zoomTo(label2)
})
</script>
</body>
</html>