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.
171 lines
7.1 KiB
171 lines
7.1 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="../../SuperMap_WebGL/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
||
|
|
<link href="../../SuperMap_WebGL/examples/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<link href="../../SuperMap_WebGL/examples/css/pretty.css" rel="stylesheet">
|
||
|
|
<script src="../../SuperMap_WebGL/examples/js/jquery.min.js"></script>
|
||
|
|
<script src="../../SuperMap_WebGL/examples/js/bootstrap.min.js"></script>
|
||
|
|
<script src="../../SuperMap_WebGL/examples/js/bootstrap-select.min.js"></script>
|
||
|
|
<script src="../../SuperMap_WebGL/examples/js/tooltip.js"></script>
|
||
|
|
<script type="text/javascript" src="../../SuperMap_WebGL/examples/js/require.min.js" data-main="../../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="polygon" class="button black">绘制区域</button>
|
||
|
|
<!--<button type="button" id="marker" class="button black">添加地标</button>-->
|
||
|
|
<button type="button" id="clear" class="button black">清除</button>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
/**
|
||
|
|
* supermap 初始化
|
||
|
|
*/
|
||
|
|
function onload(Cesium) {
|
||
|
|
var viewer = new Cesium.Viewer('earth', { navigation: true });
|
||
|
|
var scene = viewer.scene;
|
||
|
|
try {
|
||
|
|
// 打开所发布三维服务下的所有图层
|
||
|
|
var promise = scene.open('http://39.102.68.187:8090/iserver/services/3D-xp-HLSC/rest/realspace');
|
||
|
|
Cesium.when(promise, function (layers) {
|
||
|
|
// 设置相机位置、视角，便于观察场景
|
||
|
|
scene.camera.setView({
|
||
|
|
destination: new Cesium.Cartesian3.fromDegrees(87.59387122618462, 43.80714274809372, 369.6852018263631),
|
||
|
|
orientation: {
|
||
|
|
heading: Cesium.Math.toRadians(27.8),
|
||
|
|
pitch: Cesium.Math.toRadians(-21.8),
|
||
|
|
roll: 0.0
|
||
|
|
}
|
||
|
|
});
|
||
|
|
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 clampMode = 0;
|
||
|
|
var tooltip = createTooltip(document.body);
|
||
|
|
|
||
|
|
var handlerPolygon = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon, clampMode);
|
||
|
|
handlerPolygon.clampMode = Cesium.ClampMode.S3mModel;
|
||
|
|
handlerPolygon.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');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
handlerPolygon.movingEvt.addEventListener(function (windowPosition) {
|
||
|
|
if (handlerPolygon.isDrawing) {
|
||
|
|
tooltip.showAt(windowPosition, '<p>点击确定多边形中间点</p><p>右键单击结束绘制</p>');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
tooltip.showAt(windowPosition, '<p>点击绘制第一个点</p>');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
handlerPolygon.drawEvt.addEventListener(function (result) {
|
||
|
|
var point = [];
|
||
|
|
result.object.positions.forEach(e=> {
|
||
|
|
//将笛卡尔坐标转化为经纬度坐标
|
||
|
|
var cartographic = Cesium.Cartographic.fromCartesian(e);
|
||
|
|
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
||
|
|
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
||
|
|
point.push(longitude);
|
||
|
|
point.push(latitude);
|
||
|
|
});
|
||
|
|
$("#points").val(point.toString());
|
||
|
|
tooltip.setVisible(false);
|
||
|
|
});
|
||
|
|
$('#polygon').click(function () {
|
||
|
|
deactiveAll();
|
||
|
|
clearAll();
|
||
|
|
handlerPolygon.activate();
|
||
|
|
});
|
||
|
|
$('#clear').click(function () {
|
||
|
|
clearAll();
|
||
|
|
});
|
||
|
|
$('#toolbar').show();
|
||
|
|
$('#loadingbar').remove();
|
||
|
|
function deactiveAll() {
|
||
|
|
handlerPolygon.deactivate();
|
||
|
|
}
|
||
|
|
function clearAll() {
|
||
|
|
handlerPolygon.clear();
|
||
|
|
viewer.entities.removeById("qy");
|
||
|
|
}
|
||
|
|
if (!scene.pickPositionSupported) {
|
||
|
|
alert('不支持深度拾取,无法进行鼠标交互绘制！');
|
||
|
|
}
|
||
|
|
|
||
|
|
var areaId = $.getUrlVar("areaId");
|
||
|
|
var POINT_S = $("#" + areaId, window.parent.document).val();
|
||
|
|
$("#points").val(POINT_S);
|
||
|
|
|
||
|
|
POINT_S = POINT_S.split(",");
|
||
|
|
var POINT_S1 = [];
|
||
|
|
for (i = 0; i < POINT_S.length; i++) {
|
||
|
|
POINT_S1.push(Number(POINT_S[i]));
|
||
|
|
}
|
||
|
|
if (POINT_S1 != null && POINT_S1 != "") {
|
||
|
|
var qy = {
|
||
|
|
id: "qy",
|
||
|
|
polygon: {
|
||
|
|
hierarchy: Cesium.Cartesian3.fromDegreesArray(POINT_S1),
|
||
|
|
show: true,
|
||
|
|
material: Cesium.Color.GREEN.withAlpha(0.5)
|
||
|
|
},
|
||
|
|
clampToS3M: true
|
||
|
|
}
|
||
|
|
viewer.entities.add(qy);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|