You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
192 lines
7.9 KiB
192 lines
7.9 KiB
1 year ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
|
<title></title>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<script type="text/javascript" src="../../js/jquery-2.1.3.min.js"></script>
|
||
|
|
<!--超图-->
|
||
|
|
<link href="../../3DVisualization/SuperMap_WebGL/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
||
|
|
<link href="../../3DVisualization/SuperMap_WebGL/examples/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<link href="../../3DVisualization/SuperMap_WebGL/examples/css/pretty.css" rel="stylesheet">
|
||
|
|
<script src="../../3DVisualization/SuperMap_WebGL/examples/js/jquery.min.js"></script>
|
||
|
|
<script src="../../3DVisualization/SuperMap_WebGL/examples/js/bootstrap.min.js"></script>
|
||
|
|
<script src="../../3DVisualization/SuperMap_WebGL/examples/js/bootstrap-select.min.js"></script>
|
||
|
|
<script src="../../3DVisualization/SuperMap_WebGL/examples/js/tooltip.js"></script>
|
||
|
|
<script type="text/javascript" src="../../3DVisualization/SuperMap_WebGL/examples/js/require.min.js" data-main="../../3DVisualization/SuperMap_WebGL/examples/js/main"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../../js/jq_extend.js"></script>
|
||
|
|
<style>
|
||
|
|
html, body, #earth {
|
||
|
|
font-family: "微软雅黑", arial, helvetica, sans-serif;
|
||
|
|
font-size: 14px;
|
||
|
|
border: 0;
|
||
|
|
outline: none;
|
||
|
|
color: #cceeff;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
list-style: none;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cesium-viewer-bottom, .cesium-viewer-infoBoxContainer, .cesium-viewer-navigationContainer {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="earth"></div>
|
||
|
|
<input id="points" type="hidden" />
|
||
|
|
<div id="toolbar" class="param-container tool-bar" style="position:absolute;top:5px">
|
||
|
|
<button type="button" id="marker" class="button black">获取位置</button>
|
||
|
|
<button type="button" id="clear" class="button black">清除</button>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
var OrgId = JSON.parse(window.sessionStorage.getItem("userInfo")).OrgID;
|
||
|
|
var OrgId_pass = $.getUrlVar("orgId");
|
||
|
|
console.log(OrgId_pass);
|
||
|
|
if (OrgId_pass != null && OrgId_pass != "") {
|
||
|
|
OrgId = OrgId_pass;
|
||
|
|
}
|
||
|
|
console.log(OrgId);
|
||
|
|
|
||
|
|
var gisModel = "";
|
||
|
|
$.ajax({
|
||
|
|
type: "post",
|
||
|
|
url: "../../ashx/GisBaseHandler.ashx",
|
||
|
|
data: { Action: "getOrgIdGisBase", OrgId: OrgId },
|
||
|
|
async: false,
|
||
|
|
dataType: "json",
|
||
|
|
success: function (result) {
|
||
|
|
//console.log(result);
|
||
|
|
var data = result.GisBaseData;
|
||
|
|
if (data.length > 0) {
|
||
|
|
gisModel = data[0];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
/**
|
||
|
|
* supermap 初始化
|
||
|
|
*/
|
||
|
|
function onload(Cesium) {
|
||
|
|
var viewer = new Cesium.Viewer('earth', { navigation: true });
|
||
|
|
var scene = viewer.scene;
|
||
|
|
try {
|
||
|
|
//console.log(gisModel);
|
||
|
|
|
||
|
|
// 打开所发布三维服务下的所有图层
|
||
|
|
var promise = scene.open(gisModel.IP);
|
||
|
|
Cesium.when(promise, function (layers) {
|
||
|
|
// 设置相机位置、视角，便于观察场景
|
||
|
|
scene.camera.setView({
|
||
|
|
destination: new Cesium.Cartesian3.fromDegrees(gisModel.FLY_LON2, gisModel.FLY_LAT2, gisModel.FLY_HEI2),
|
||
|
|
orientation: {
|
||
|
|
heading: Cesium.Math.toRadians(gisModel.FLY_HEAD2),
|
||
|
|
pitch: Cesium.Math.toRadians(gisModel.FLY_PITCH2),
|
||
|
|
roll: gisModel.FLY_ROLL2
|
||
|
|
}
|
||
|
|
});
|
||
|
|
for (var i = 0; i < layers.length; i++) {
|
||
|
|
layers[i].selectEnabled = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!scene.pickPositionSupported) {
|
||
|
|
alert('不支持深度纹理,无法拾取位置！');
|
||
|
|
}
|
||
|
|
}, function (e) {
|
||
|
|
if (widget._showRenderLoopErrors) {
|
||
|
|
var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
|
||
|
|
widget.showErrorPanel(title, undefined, e);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
if (widget._showRenderLoopErrors) {
|
||
|
|
var title = '渲染时发生错误，已停止渲染。';
|
||
|
|
widget.showErrorPanel(title, undefined, e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var tooltip = createTooltip(document.body);
|
||
|
|
|
||
|
|
var handlerMarker = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Marker);
|
||
|
|
handlerMarker.activeEvt.addEventListener(function (isActive) {
|
||
|
|
if (isActive == true) {
|
||
|
|
viewer.enableCursorStyle = false;
|
||
|
|
viewer._element.style.cursor = '';
|
||
|
|
$('body').removeClass('drawCur').addClass('drawCur');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
viewer.enableCursorStyle = true;
|
||
|
|
$('body').removeClass('drawCur');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
handlerMarker.movingEvt.addEventListener(function (windowPosition) {
|
||
|
|
tooltip.showAt(windowPosition, '<p>点击绘制地标</p>');
|
||
|
|
});
|
||
|
|
handlerMarker.drawEvt.addEventListener(function (result) {
|
||
|
|
console.log("地标：");
|
||
|
|
console.log(result);
|
||
|
|
var point = [];
|
||
|
|
//将笛卡尔坐标转化为经纬度坐标
|
||
|
|
var cartographic = Cesium.Cartographic.fromCartesian(result.object._actualPosition);
|
||
|
|
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
||
|
|
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
||
|
|
var height = cartographic.height;
|
||
|
|
if (height < 0) {
|
||
|
|
height = 0;
|
||
|
|
}
|
||
|
|
point.push(longitude);
|
||
|
|
point.push(latitude);
|
||
|
|
point.push(height);
|
||
|
|
$("#points").val(point);
|
||
|
|
tooltip.setVisible(false);
|
||
|
|
});
|
||
|
|
$('#marker').click(function () {
|
||
|
|
deactiveAll();
|
||
|
|
clearAll();
|
||
|
|
handlerMarker.activate();
|
||
|
|
});
|
||
|
|
$('#clear').click(function () {
|
||
|
|
clearAll();
|
||
|
|
});
|
||
|
|
$('#toolbar').show();
|
||
|
|
$('#loadingbar').remove();
|
||
|
|
function deactiveAll() {
|
||
|
|
handlerMarker.deactivate();
|
||
|
|
}
|
||
|
|
function clearAll() {
|
||
|
|
handlerMarker.clear();
|
||
|
|
viewer.entities.removeById("point");
|
||
|
|
}
|
||
|
|
if (!scene.pickPositionSupported) {
|
||
|
|
alert('不支持深度拾取,无法进行鼠标交互绘制！');
|
||
|
|
}
|
||
|
|
|
||
|
|
var POINT = $("#points").val();
|
||
|
|
if (POINT != null && POINT != "") {
|
||
|
|
if (POINT.indexOf(",") >= 0) {
|
||
|
|
POINT = POINT.split(",");
|
||
|
|
var point = {
|
||
|
|
id: "point",
|
||
|
|
position: Cesium.Cartesian3.fromDegrees(Number(POINT[0]), Number(POINT[1]), Number(POINT[2])),
|
||
|
|
billboard: {
|
||
|
|
image: "img/grepin.png",
|
||
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
|
|
scale: 0.5,
|
||
|
|
disableDepthTestDistance: 2000
|
||
|
|
}
|
||
|
|
}
|
||
|
|
viewer.entities.add(point);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<link rel="stylesheet" href="../../css/right-list.css" media="all" />
|
||
|
|
<link rel="stylesheet" href="../../css/bulletframebg.css" media="all" />
|
||
|
|
</body>
|
||
|
|
</html>
|