<html lang="en">
<head>
<meta charset="UTF-8"/>
<script src="Build/CesiumUnminified/Cesium.js"></script>
<link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css">
<script src="initMap.js"></script>
<script>
//在initMap.js进行初始化
var viewer=null;
var gatherPosition=[];//采集的点信息
var floatingPoint=null;//移动点
var drawHandler=null;//画事件
var layerId="ellipseLayer";
var ellipseGather=null;
function load(){
//初始化地图
initMap();
//定位
var obj = {lng:118.0850887298584, lat: 24.439001083374023,eyeHeight:10000,pitch:-50,heading:0.0,time:1};
viewerFlyToLonLat(obj);
}
function gather(){
var tyl=document.getElementById("tyl").value;
if(tyl<1){
alert("椭圆率必须大于1");
return;
}
gatherPosition=[];
floatingPoint=null;
clearPlot();
drawHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
drawHandler.setInputAction(function (event) {
var position = event.position;
if (!Cesium.defined(position)) {
return;
}
var ray = viewer.camera.getPickRay(position);
if (!Cesium.defined(ray)) {
return;
}
var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
if (!Cesium.defined(cartesian)) {
return;
}
//console.log("点击地图采集的点：",cartesian);
var num = gatherPosition.length;
if (num == 0) {
//默认生成半径为0.1米的圆。
ellipseGather=viewer.entities.add({
position: cartesian,
ellipse: {
semiMinorAxis: 0.1,//椭圆短轴（单位米）
semiMajorAxis: 0.1,//椭圆长轴（单位米）
material: Cesium.Color.GREENYELLOW.withAlpha(0.5),
outline:false,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 3
},
});
gatherPosition.push(cartesian);
floatingPoint = createPoint(cartesian, -1);
//showRegion2Map();
}
gatherPosition.push(cartesian);
var oid = gatherPosition.length - 2;
createPoint(cartesian, oid);
if (num > 1) {
gatherPosition.pop();
viewer.entities.remove(floatingPoint);
console.log("采集点gatherPosition：",gatherPosition);
//去掉事件
if(drawHandler){
drawHandler.destroy();
drawHandler=null;
}
//删除关键点
clearKeyPoint();
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
drawHandler.setInputAction(function (event) {
var position = event.endPosition;
if (!Cesium.defined(position)) {
return;
}
var ray = viewer.camera.getPickRay(position);
if (!Cesium.defined(ray)) {
return;
}
var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
if (!Cesium.defined(cartesian)) {
return;
}
if(floatingPoint==null){
return;
}
floatingPoint.position.setValue(cartesian);
gatherPosition.pop();
gatherPosition.push(cartesian);
//显示椭圆
showRegion2Map();
//console.log("gatherPosition",gatherPosition);
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}
//创建关键点
function createPoint(cartesian, oid) {
var point = viewer.entities.add({
position: cartesian,
billboard: {
image: "./images/gatherPoint.png",
eyeOffset: new Cesium.ConstantProperty(new Cesium.Cartesian3(0, 0, -500)),
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
}
});
point.oid = oid;
point.layerId = layerId;
point.flag = "keypoint";
return point;
};
function showRegion2Map() {
if(gatherPosition.length<2){
return;
}
console.log("gatherPosition",gatherPosition);
console.log("圆心：",gatherPosition[0]);
console.log("移动点：",gatherPosition[1]);
//计算移动点与中心点的距离（单位米）
var centerTemp = viewer.scene.globe.ellipsoid.cartesianToCartographic(gatherPosition[0]);
var radiusTemp = viewer.scene.globe.ellipsoid.cartesianToCartographic(gatherPosition[1]);
var geodesic = new Cesium.EllipsoidGeodesic();
geodesic.setEndPoints(centerTemp, radiusTemp);
var radius = geodesic.surfaceDistance;
console.log("半径为：",radius);
//如果半径小于0,则不更新圆信息
if(radius<=0){
return;
}
var tyl=document.getElementById("tyl").value;
ellipseGather.ellipse.semiMinorAxis=new Cesium.CallbackProperty(function (time,result){
return radius/tyl;
},false);
ellipseGather.ellipse.semiMajorAxis=new Cesium.CallbackProperty(function (time,result){
return radius;
},false);
var rotation=getHeading(gatherPosition[0],gatherPosition[1]);
//console.log("rotation",Cesium.Math.toDegrees(rotation));
ellipseGather.ellipse.rotation=new Cesium.CallbackProperty(function (time,result){
return Cesium.Math.toRadians(90-Cesium.Math.toDegrees(rotation))
},false);
//var entity = viewer.entities.add(bData);
//entity.layerId = layerId;
//entity.valueFlag="value";
}
// 根据两个坐标点,获取Heading(朝向)
function getHeading(pointA, pointB) {
//建立以点A为原点，X轴为east,Y轴为north,Z轴朝上的坐标系
const transform = Cesium.Transforms.eastNorthUpToFixedFrame(pointA);
//向量AB
const positionvector = Cesium.Cartesian3.subtract(pointB, pointA, new Cesium.Cartesian3());
//因transform是将A为原点的eastNorthUp坐标系中的点转换到世界坐标系的矩阵
//AB为世界坐标中的向量
//因此将AB向量转换为A原点坐标系中的向量，需乘以transform的逆矩阵。
const vector = Cesium.Matrix4.multiplyByPointAsVector(Cesium.Matrix4.inverse(transform, new Cesium.Matrix4()), positionvector, new Cesium.Cartesian3());
//归一化
const direction = Cesium.Cartesian3.normalize(vector, new Cesium.Cartesian3());
//heading
const heading = Math.atan2(direction.y, direction.x) - Cesium.Math.PI_OVER_TWO;
return Cesium.Math.TWO_PI - Cesium.Math.zeroToTwoPi(heading);
}
/**
* 判断两点是否一致
*/
function isSimpleXYZ(p1, p2) {
if (p1.x == p2.x && p1.y == p2.y && p1.z == p2.z) {
return true;
}
return false;
}
/**
* 笛卡尔坐标转经纬度坐标
*/
function getLonLat(cartesian) {
var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
cartographic.height = viewer.scene.globe.getHeight(cartographic);
var pos = {
lon: cartographic.longitude,
lat: cartographic.latitude,
alt: cartographic.height
};
pos.lon = Cesium.Math.toDegrees(pos.lon);
pos.lat = Cesium.Math.toDegrees(pos.lat);
return pos;
}
/**
* 删除直线箭头
*/
function clearPlot(){
var entityList = viewer.entities.values;
if (entityList == null || entityList.length < 1){
return;
}
for (var i = 0; i < entityList.length; i++) {
var entity = entityList[i];
if (entity.layerId == layerId) {
viewer.entities.remove(entity);
i--;
}
}
}
/**
* 删除关键点
*/
function cl
77.（cesium篇）cesium椭圆采集.zip
版权申诉
5星 · 超过95%的资源 112 浏览量
2022-04-28
09:55:18
上传
评论
收藏 14.02MB ZIP 举报 
77.（cesium篇）cesium椭圆采集.zip （824个子文件） 
widgets.css 22KB lighter.css 5KB Animation.css 3KB InfoBoxDescription.css 3KB CesiumInspector.css 3KB BaseLayerPicker.css 2KB Animation.css 2KB Cesium3DTilesInspector.css 2KB shared.css 2KB CesiumWidget.css 2KB CesiumInspector.css 2KB BaseLayerPicker.css 2KB NavigationHelpButton.css 2KB lighter.css 2KB InfoBox.css 2KB Cesium3DTilesInspector.css 2KB CesiumWidget.css 2KB Timeline.css 2KB Geocoder.css 2KB SceneModePicker.css 2KB InfoBoxDescription.css 2KB Viewer.css 2KB NavigationHelpButton.css 2KB lighter.css 2KB shared.css 2KB SceneModePicker.css 2KB InfoBox.css 1KB Geocoder.css 1KB Viewer.css 1KB Timeline.css 1KB lighterShared.css 1KB ProjectionPicker.css 1KB ProjectionPicker.css 1KB lighter.css 1009B lighterShared.css 878B lighter.css 863B widgets.css 807B lighter.css 694B lighter.css 598B lighter.css 447B SelectionIndicator.css 402B lighter.css 391B lighter.css 390B SelectionIndicator.css 332B lighter.css 325B lighter.css 307B PerformanceWatchdog.css 299B lighter.css 280B lighter.css 263B PerformanceWatchdog.css 250B FullscreenButton.css 125B VRButton.css 117B FullscreenButton.css 101B VRButton.css 93B
info-loading.gif 723B info-loading.gif 723B
77.（cesium篇）cesium椭圆采集.html 9KB
waterNormals.jpg 287KB waterNormals.jpg 287KB StarBurst.jpg 191KB StarBurst.jpg 191KB tycho2t3_80_mz.jpg 164KB tycho2t3_80_mz.jpg 164KB tycho2t3_80_py.jpg 149KB tycho2t3_80_py.jpg 149KB tycho2t3_80_pz.jpg 149KB tycho2t3_80_pz.jpg 149KB tycho2t3_80_my.jpg 149KB tycho2t3_80_my.jpg 149KB tycho2t3_80_px.jpg 120KB tycho2t3_80_px.jpg 120KB tycho2t3_80_mx.jpg 116KB tycho2t3_80_mx.jpg 116KB DirtMask.jpg 111KB DirtMask.jpg 111KB waterNormalsSmall.jpg 33KB waterNormalsSmall.jpg 33KB moonSmall.jpg 18KB moonSmall.jpg 18KB 2.jpg 16KB 2.jpg 16KB 2.jpg 16KB 2.jpg 16KB 2.jpg 16KB 2.jpg 16KB 3.jpg 15KB 3.jpg 15KB 1.jpg 15KB 1.jpg 15KB 3.jpg 15KB 3.jpg 15KB 0.jpg 14KB 0.jpg 14KB 1.jpg 13KB 1.jpg 13KB 1.jpg 13KB 1.jpg 13KB 1.jpg 13KB 1.jpg 13KB 3.jpg 12KB共 824 条
- 1
- 2
- 3
- 4
- 5
- 6
- 9
资源评论
追夢人生2022-06-11用户下载后在一定时间内未进行评价，系统默认好评。
GIS之家家长
- 粉丝: 616
- 资源: 139
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.37元 开通VIP
