<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="UTF-8">
|
<title>地形提取</title>
|
<link rel="stylesheet" href="//at.alicdn.com/t/font_2599272_671fgrsk7ev.css">
|
<link href="../../libs/layui/css/layui.css" rel="stylesheet">
|
<script type="text/javascript" src="../../libs/jquery/jquery-3.5.1.min.js"></script>
|
<script type="text/javascript" src="../../libs/layui/layui.js"></script>
|
<style>
|
.floordiv {
|
color: white;
|
/* overflow-x: hidden;
|
overflow-y: auto;
|
padding: 0; */
|
}
|
|
.mt-label {
|
height: 30px;
|
color: white;
|
width: 60px;
|
float: left;
|
margin-left: 10px;
|
line-height: 30px;
|
font-size: 12px;
|
}
|
|
.mt-content {
|
height: 30px;
|
color: white;
|
width: 100px;
|
float: left;
|
/* margin-left: 10px; */
|
}
|
|
.mt-row {
|
height: 30px;
|
margin-top: 10px;
|
}
|
|
.form-control {
|
/* display: block; */
|
width: 80px;
|
height: 20px;
|
padding: 4px 3px;
|
font-size: 14px;
|
line-height: 1.6;
|
background-color: #2c3238;
|
opacity: 0.8;
|
color: #fff;
|
background-image: none;
|
border: 0px solid #e4eaec;
|
border-radius: 3px;
|
-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
|
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
|
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
}
|
|
.mybtn-blue {
|
color: #fff;
|
background-color: #1E9FFF;
|
border-color: #1E9FFF;
|
}
|
|
.mybtn-yellow {
|
color: #fff;
|
background-color: #FFB800;
|
border-color: #FFB800;
|
}
|
|
.mybtn-green {
|
color: #fff;
|
background-color: #009688;
|
border-color: #009688;
|
}
|
|
.mybtn-red {
|
color: #fff;
|
background-color: #FF5722;
|
border-color: #FF5722;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="floordiv">
|
<div class="mt-row">
|
<button type="button" style="margin-left: 15px;width: 140px;" class="layui-btn mybtn-blue layui-btn-sm"
|
onclick="drawPolygon()"><i class="iconfont icon-kaishi"></i>绘制/重新绘制区域</button>
|
<div class="mt-label">
|
精度(米)：
|
</div>
|
<div class="mt-content">
|
<input type="number" id="interpolation" autocomplete="off" class="form-control" value="10" min="1">
|
</div>
|
</div>
|
<div class="mt-row">
|
<div class="mt-content">
|
<input type="checkbox" id="checkbox" value="" onclick="changeCheck()"
|
style="margin-left: 10px;margin-top: 6px;margin-right: 5px;" /> 坐标转换
|
</div>
|
</div>
|
<div class="mt-row">
|
<div class="mt-label">
|
参考经度：
|
</div>
|
<div class="mt-content">
|
<input type="number" id="longitude" autocomplete="off" class="form-control" value="0" disabled>
|
</div>
|
<div class="mt-label">
|
参考纬度：
|
</div>
|
<div class="mt-content">
|
<input type="number" id="latitude" autocomplete="off" class="form-control" value="0" disabled>
|
</div>
|
</div>
|
<div class="mt-row">
|
<div class="mt-label">
|
参考X：
|
</div>
|
<div class="mt-content">
|
<input type="number" id="OriX" autocomplete="off" class="form-control" value="0" disabled>
|
</div>
|
<div class="mt-label">
|
参考Y：
|
</div>
|
<div class="mt-content">
|
<input type="number" id="OriY" autocomplete="off" class="form-control" value="0" disabled>
|
</div>
|
</div>
|
<div class="mt-row">
|
<div class="mt-label">
|
参考Z：
|
</div>
|
<div class="mt-content">
|
<input type="number" id="OriZ" autocomplete="off" class="form-control" value="0" disabled>
|
</div>
|
<button type="button" style="margin-left: 15px;" class="layui-btn mybtn-blue layui-btn-sm"
|
onclick="positionExport()"><i class="iconfont icon-kaishi"></i>导出</button>
|
</div>
|
</div>
|
|
<script>
|
var Cesium = null;
|
var viewer = null;
|
var drawHandler;
|
var drawpointArr = [];
|
var activeShapePoints = [];
|
function drawPolygon() {
|
clearDraw();
|
var shape = null;
|
var isFirst = true;//是否为第一个点
|
var previousPosition;//前一个点的坐标
|
var currentPosition;//当前点坐标
|
drawHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
drawHandler.setInputAction(function (movement) {
|
if (isFirst) {
|
previousPosition = parent.CesiumDraw.getCatesian3FromPX(viewer, movement.position);
|
if (previousPosition && previousPosition.x) {
|
createPoint(previousPosition);
|
isFirst = false;
|
}
|
} else {
|
drawHandler = drawHandler && drawHandler.destroy();
|
for (let i in drawpointArr) {
|
viewer.entities.remove(drawpointArr[i]);
|
}
|
drawpointArr.length = 0;
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
drawHandler.setInputAction(function (movement) {
|
if (!isFirst) {
|
currentPosition = parent.CesiumDraw.getCatesian3FromPX(viewer, movement.endPosition);
|
if (currentPosition && currentPosition.x) {
|
activeShapePoints = [previousPosition, currentPosition];
|
if (shape == null) {
|
shape = viewer.entities.add({
|
id: 'depthExportRetangle',
|
rectangle: {
|
material: new Cesium.ColorMaterialProperty(Cesium.Color.RED.withAlpha(0.3)),
|
coordinates: new Cesium.CallbackProperty(function () {
|
var obj = Cesium.Rectangle.fromCartesianArray(activeShapePoints);
|
return obj;
|
}, false)
|
}
|
});
|
}
|
}
|
}
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
function createPoint(worldPosition) {
|
drawpointArr.push(viewer.entities.add({
|
position: worldPosition,
|
point: {
|
color: Cesium.Color.RED,
|
pixelSize: 10,
|
outlineWidth: 1,
|
outlineColor: Cesium.Color.WHITE,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
}
|
}));
|
}
|
}
|
function clearDraw() {
|
for (let i in drawpointArr) {
|
viewer.entities.remove(drawpointArr[i]);
|
}
|
if ((viewer.entities.getById('depthExportRetangle') !== undefined)) {
|
viewer.entities.removeById('depthExportRetangle');
|
}
|
drawpointArr.length = 0;
|
drawHandler = drawHandler && drawHandler.destroy();
|
activeShapePoints.length = 0;
|
}
|
|
function findDistance(long1, lat1, long2, lat2) {
|
// 地球半径的平均值，
|
let R = 6371393.0;
|
lat1 = lat1 * Math.PI / 180.0;
|
lat2 = lat2 * Math.PI / 180.0;
|
let a = lat1 - lat2;
|
let b = (long1 - long2) * Math.PI / 180.0;
|
let sa2 = Math.sin(a / 2.0);
|
let sb2 = Math.sin(b / 2.0);
|
return 2 * R * Math.asin(Math.sqrt(sa2 * sa2 + Math.cos(lat1) * Math.cos(lat2) * sb2 * sb2));
|
}
|
|
/**
|
* 坐标转换
|
*/
|
// function transformPosition(cartesian3, height, option) {
|
// let translateMatrix = option.translateMatrix;
|
// let x = (cartesian3.x - translateMatrix[12]) * translateMatrix[0] +
|
// (cartesian3.y - translateMatrix[13]) * translateMatrix[1] +
|
// (cartesian3.z - translateMatrix[14]) * translateMatrix[2] + Number(option.Ox);
|
// let y = (cartesian3.x - translateMatrix[12]) * translateMatrix[4] +
|
// (cartesian3.y - translateMatrix[13]) * translateMatrix[5] +
|
// (cartesian3.z - translateMatrix[14]) * translateMatrix[6] + Number(option.Oy);
|
// let z = Number(option.Oz) + height;
|
// var result = { 'x': x, 'y': y, 'z': z };
|
// return result;
|
// }
|
function transformPosition(position, option) {
|
let cartesian3 = Cesium.Cartesian3.fromDegrees(position.x, position.y);
|
let translateMatrix = option.translateMatrix;
|
let x = (cartesian3.x - translateMatrix[12]) * translateMatrix[0] +
|
(cartesian3.y - translateMatrix[13]) * translateMatrix[1] +
|
(cartesian3.z - translateMatrix[14]) * translateMatrix[2] + Number(option.Ox);
|
let y = (cartesian3.x - translateMatrix[12]) * translateMatrix[4] +
|
(cartesian3.y - translateMatrix[13]) * translateMatrix[5] +
|
(cartesian3.z - translateMatrix[14]) * translateMatrix[6] + Number(option.Oy);
|
let z = Number(option.Oz) + position.z;
|
var result = { 'x': x, 'y': y, 'z': z };
|
return result;
|
}
|
|
|
function changeCheck() {
|
var isTransform = $('#checkbox').prop('checked');
|
$('#OriX').attr("disabled", !isTransform);
|
$('#OriY').attr("disabled", !isTransform);
|
$('#OriZ').attr("disabled", !isTransform);
|
$('#longitude').attr("disabled", !isTransform);
|
$('#latitude').attr("disabled", !isTransform);
|
}
|
/**
|
* 坐标插值导出
|
*/
|
function positionExport() {
|
var Ox = $('#OriX').val();
|
var Oy = $('#OriY').val();
|
var Oz = $('#OriZ').val();
|
var longitude = $('#longitude').val();
|
var latitude = $('#latitude').val();
|
var positionOnEllipsoid = Cesium.Cartesian3.fromDegrees(longitude, latitude);
|
var translateMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid);
|
var option = {
|
'translateMatrix': translateMatrix,
|
'Ox': Ox,
|
'Oy': Oy,
|
'Oz': Oz,
|
}
|
var ellipsoid = viewer.scene.globe.ellipsoid;
|
var cartographic1 = ellipsoid.cartesianToCartographic(activeShapePoints[0]);
|
var cartographic2 = ellipsoid.cartesianToCartographic(activeShapePoints[1]);
|
var lng1 = Cesium.Math.toDegrees(cartographic1.longitude);
|
var lat1 = Cesium.Math.toDegrees(cartographic1.latitude)
|
var lng2 = Cesium.Math.toDegrees(cartographic2.longitude)
|
var lat2 = Cesium.Math.toDegrees(cartographic2.latitude)
|
var lngMax = Math.max(lng1, lng2);
|
var lngMin = Math.min(lng1, lng2);
|
var latMax = Math.max(lat1, lat2);
|
var latMin = Math.min(lat1, lat2);
|
var lngdx = lngMax - lngMin;
|
var latdx = latMax - latMin;
|
var interpolation = $('#interpolation').val();
|
var isTransform = $('#checkbox').prop('checked');
|
var positions = [];
|
var results = [];
|
for (let j = latMin + (latdx % (interpolation / 111111)) / 2; j < latMax; j += interpolation / 111111) {
|
let distance = findDistance(lngMax, j, lngMin, j) / lngdx;
|
for (let i = lngMin + (lngdx % (interpolation / distance)) / 2; i < lngMax; i += interpolation / distance) {
|
// let cartesian3 = Cesium.Cartesian3.fromDegrees(i, j);
|
// let cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
|
// let h1 = viewer.scene.globe.getHeight(cartographic);
|
positions.push(Cesium.Cartographic.fromDegrees(i, j));
|
var result = { 'x': i, 'y': j, 'z': 0 };
|
// var result = isTransform ? transformPosition(cartesian3,h1,option) : { 'x': i, 'y': j, 'z': h1 };
|
results.push(result);
|
}
|
}
|
var promise = Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, positions);
|
Cesium.when(promise, function (updatedPositions) {
|
var str = isTransform ? 'X,Y,Z\n' : 'lng,lat,height\n';
|
for (let i in results) {
|
results[i].z = updatedPositions[i].height;
|
if (isTransform) {
|
results[i] = transformPosition(results[i], option);
|
}
|
str += results[i].x.toString() + ',' + results[i].y.toString() + ',' + results[i].z.toString() + '\n';
|
}
|
var blob = new Blob([str], { type: "text/plain;charset=utf-8" });
|
blob = new Blob([String.fromCharCode(0xFEFF), blob], { type: blob.type });
|
object_url = window.URL.createObjectURL(blob);
|
var link = document.createElement("a");
|
link.href = object_url;
|
link.download = "导出.csv";
|
document.body.appendChild(link);
|
link.click();
|
document.body.removeChild(link);
|
});
|
|
}
|
</script>
|
</body>
|
|
</html>
|
