209 lines
7.7 KiB
HTML
209 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||
<title>点击添加 有闪烁</title>
|
||
<link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico" />
|
||
<!-- <script src="Cesium/Cesium.js" ></script>
|
||
<link rel="stylesheet" href="Cesium/Widgets/widgets.css"> -->
|
||
|
||
<script src="./Build/Cesium/Cesium.js"></script>
|
||
<style>
|
||
@import url(./Build/Cesium/Widgets/widgets.css);
|
||
html,
|
||
body,
|
||
#cesiumdiv {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
}
|
||
.right {
|
||
position: fixed;
|
||
background-color: rgba(30, 36, 50, 0.6);
|
||
right: 180px;
|
||
top: 10px;
|
||
z-index: 2;
|
||
border: 1px solid rgba(32, 160, 255, 0.6);
|
||
border-radius: 3px;
|
||
padding: 10px;
|
||
color: white;
|
||
}
|
||
.right span {
|
||
display: inline-block;
|
||
border: 1px solid rgba(32, 160, 255, 0.6);
|
||
border-radius: 3px;
|
||
font-size: 14px;
|
||
padding: 2px 4px;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
<!-- <script src="./js/GifImageProperty.js"></script> -->
|
||
<!-- <script src="./js/navigation/viewerCesiumNavigationMixin.min.js"></script> -->
|
||
<!-- <script src="./js/navigation/viewerCesiumNavigationMixin.css"></script> -->
|
||
<!-- <script src="./node_modules/cesiumnavigation/viewerCesiumNavigationMixin.min.js"></script> -->
|
||
</head>
|
||
<body>
|
||
<div id="cesiumdiv">
|
||
<div class="right">
|
||
<!--<span class="point">绘制点</span>-->
|
||
<span class="line">绘制线</span>
|
||
<!--<span class="face">绘制面</span>-->
|
||
<span class="clear">清除</span>
|
||
</div>
|
||
<div id="creditContainer" style="display: none"></div>
|
||
</div>
|
||
<script>
|
||
Cesium.Ion.defaultAccessToken =
|
||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
||
|
||
//创建地球
|
||
var viewer = new Cesium.Viewer("cesiumdiv", {
|
||
animation: true,
|
||
// terrainExaggeration: 50.0, //地形夸张
|
||
// terrainProvider: new Cesium.createWorldTerrain({
|
||
// //加载全球地形
|
||
// requestVertexNormals: true, //有水面效果
|
||
// requestWaterMask: true, //光照效果
|
||
// }),
|
||
scene3DOnly: true,
|
||
// creditContainer: "creditContainer",
|
||
});
|
||
// viewer.extend(Cesium.viewerCesiumNavigationMixin, {});
|
||
viewer.cesiumWidget.creditContainer.style.display = "none"; //去cesium logo水印
|
||
// viewer.scene.globe.depthTestAgainstTerrain = true;// 打开深度检测，那么在地形以下的对象不可见
|
||
|
||
var arr = [0];
|
||
|
||
// viewer.cesiumNavigation.destroy();
|
||
|
||
// var options = {}; // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
|
||
// options.defaultResetView = Cesium.Rectangle.fromDegrees(80, 22, 130, 50);
|
||
// options.enableCompass= true; // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。
|
||
// options.enableZoomControls= false;// 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。
|
||
// options.enableDistanceLegend= false; // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。
|
||
// options.enableCompassOuterRing= true;// 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。
|
||
|
||
// viewer.extend(Cesium.viewerCesiumNavigationMixin, options);
|
||
|
||
var navigationDiv = document.getElementById("navigationDiv");
|
||
var compass = document.getElementsByClassName("compass")[0];
|
||
console.log(navigationDiv, compass);
|
||
//坐标存储
|
||
var positions = [];
|
||
var cesiumdiv = document.getElementById("cesiumdiv");
|
||
var lineStatus = false;
|
||
var handlerlineStatus = false;
|
||
var lineBtn = document.getElementsByClassName("line")[0];
|
||
|
||
// new Cesium.PolylineGraphics({
|
||
// clampToGround:true
|
||
// })
|
||
|
||
//绘制线
|
||
lineBtn.onclick = function () {
|
||
lineStatus = true;
|
||
cesiumdiv.style.cursor = "crosshair";
|
||
};
|
||
var redLine;
|
||
//ScreenSpaceEventHandler处理用户输入事件。可以添加自定义函数，以便在用户输入时执行。
|
||
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
||
handler.setInputAction(function (event) {
|
||
//event position: a {x: 510, y: 345} 屏幕坐标
|
||
if (!lineStatus) {
|
||
return;
|
||
}
|
||
handlerlineStatus = true;
|
||
|
||
//屏幕坐标转
|
||
var ray = viewer.camera.getPickRay(event.position);
|
||
var ellipsoid = viewer.scene.globe.ellipsoid;
|
||
var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
|
||
//将笛卡尔坐标转换为地理坐标
|
||
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
||
//将弧度转为度的十进制度表示
|
||
var log = Cesium.Math.toDegrees(cartographic.longitude);
|
||
var lat = Cesium.Math.toDegrees(cartographic.latitude);
|
||
// 获取海拔高度
|
||
var height1 = viewer.scene.globe.getHeight(cartographic);
|
||
var height2 = cartographic.height;
|
||
positions.push(cartesian);
|
||
//添加实体
|
||
// var en = viewer.entities.add({
|
||
// id:arr[arr.length-1],
|
||
// name:"点击",
|
||
// description:"cjgfjb",
|
||
// position:cartesian,
|
||
// billboard:{
|
||
// image: './img/default1.png',
|
||
// width:100,
|
||
// height:100
|
||
// }
|
||
// })
|
||
|
||
console.log(redLine.polyline.positions);
|
||
if (positions.length > 1) {
|
||
redLine.polyline.positions = positions; //更新线的点
|
||
// viewer.entities.add(redLine);
|
||
}
|
||
|
||
arr.push(arr.length);
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
|
||
redLine = viewer.entities.add({
|
||
name: arr[arr.length - 1],
|
||
polyline: {
|
||
show: true,
|
||
positions: [], //Cesium.Cartesian3.fromDegreesArray([110, 25, 130, 25]),
|
||
width: 5,
|
||
material: Cesium.Color.CORNFLOWERBLUE, //获取或设置折线的表面外观
|
||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||
},
|
||
});
|
||
|
||
var end = [],
|
||
endline;
|
||
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(
|
||
movement
|
||
) {
|
||
//event position: a {x: 510, y: 345} 屏幕坐标
|
||
if (!handlerlineStatus) {
|
||
return;
|
||
}
|
||
|
||
var endpoint = Cesium.Cartesian3.fromDegreesArray([
|
||
movement.endPosition.x,
|
||
movement.endPosition.y,
|
||
]);
|
||
},
|
||
Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
||
|
||
//单击鼠标右键结束画点 线 面
|
||
handler.setInputAction(function (movement) {
|
||
pointStatus = false;
|
||
lineStatus = false;
|
||
faceStatus = false;
|
||
cesiumdiv.style.cursor = "unset";
|
||
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
||
|
||
//清除
|
||
var clearBtn = document.getElementsByClassName("clear")[0];
|
||
clearBtn.onclick = function () {
|
||
// for(var i=0;i<arr.length;i++){
|
||
// viewer.entities.removeById(arr[i]);//删除
|
||
// //viewer.entities.getById("rain").show = false; //隐藏实体
|
||
// }
|
||
|
||
pointStatus = false;
|
||
lineStatus = false;
|
||
faceStatus = false;
|
||
handlerlineStatus = false;
|
||
cesiumdiv.style.cursor = "unset";
|
||
// 移除所有实体Entity
|
||
viewer.entities.removeAll();
|
||
};
|
||
</script>
|
||
</body>
|
||
</html>
|