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>
|