forked from SuperMap/iClient-JavaScript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathothers_dataWebGL.html
More file actions
98 lines (92 loc) · 3.71 KB
/
others_dataWebGL.html
File metadata and controls
98 lines (92 loc) · 3.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!--********************************************************************
* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>WebGL Globe</title>
<style type="text/css">
.editPane {
position: absolute;
right: 60px;
top: 50px;
text-align: center;
background: #FFF;
z-index: 1000;
}
</style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div class='panel panel-primary editPane' id='editPane' style="z-index: 99999">
<div class='panel-heading'>
<h5 class='panel-title text-center'>WebGL Globe</h5>
</div>
<div class='panel-body' id='params'>
<p></p>
<div align='center' class='button-group'>
<input type='button' id='btn1' class='btn btn-primary' data-i18n="[value]resources.text_input_value_addData" onclick="loadData()"/>
</div>
</div>
</div>
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
<script type="text/javascript" exclude="iclient-classic" include="three" src="../../dist/classic/include-classic.js"></script>
<script type="text/javascript">
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
/**
* 脚本引用说明：该三维球的效果使用的是第三方的脚本库，脚本位置在js/third-party
* ThreeWebGL.js、ThreeExtras.js、RequestAnimationFrame.js、Detector.js、globe.js
* 可以参考资源：https://github.com/climboid/webgl-globe
*/
//定义全局globe变量
var globe = null, url = host + "/iserver/services/map-world/rest/maps/World";
function init() {
if (!document.createElement('canvas').getContext) {
widgets.alert.showAlert(resources.msg_supportCanvas, false);
return;
}
//使用globe.js文件创建三维球模型，并指定装载地球的div
globe = DAT.Globe(document.getElementById('map'));
globe.animate();
}
$(document).ready(function () {
init();
});
function loadData() {
//通过SQL查询返回需要的数据
var queryParam, queryBySQLParams, queryBySQLService;
queryParam = new SuperMap.REST.FilterParameter({
name: "Capitals@World#1"
});
queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({
queryParams: [queryParam]
});
queryBySQLService = new SuperMap.REST.QueryBySQLService(url, {
eventListeners: {
"processCompleted": processCompleted,
"processFailed": processFailed
}
});
queryBySQLService.processAsync(queryBySQLParams);
}
function processCompleted(queryEventArgs) {
var result = queryEventArgs.result.recordsets[0].features;
//创建dataArr数组，用来组成WebGL Globe所需要的数据格式
var dataArr = [];
for (var item in result) {
dataArr.push(result[item].geometry.y);
dataArr.push(result[item].geometry.x);
dataArr.push(result[item].data.CAP_POP / 100000000);
}
//为三维球装载数据并展示
globe.addData(dataArr, {format: 'magnitude'});
globe.createPoints();
}
function processFailed() {
//查询失败后在控制台输出错误信息
console.log(resources.msg_querySQLFailed);
}
</script>
</body>
</html>