将rest数据服务中的二维面数据在浏览器进行缓冲区分析后，再拉伸成三维立方体

最新推荐文章于 2023-06-10 11:50:24 发布

疆~

最新推荐文章于 2023-06-10 11:50:24 发布

阅读量359

点赞数 1

文章标签： SuperMap iClient3D for Webgl SuperMap iClient3D for Webgl

本文链接：https://blog.csdn.net/qq_40323256/article/details/99479459

版权

SuperMap iClient3D for Webgl 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

首先看一下运行效果图：

需要注意的几个地方：

1，导入的turf.js（可以给二维面进行缓冲区分析），即<script src="./js/turf.js"></script>放在<script src="./js/jquery.min.js"></script>下面，注意顺序

2，将supermap中的面数据发布成“rest数据服务”

3，运行时，应首先把HTML文件放在路径：D:\supermap-iserver-9.1.0a-win64-deploy\supermap-iserver-9.1.0a-win64-deploy\webapps\SuperMap_iClient3D_9D(2019)_for_WebGL_chs\examples\bufferTest3.html中，再启动iserver，访问地址以localhost：8090开头，如这种格式：http://localhost:8090/SuperMap_iClient3D_9D(2019)_for_WebGL_chs/examples/bufferTest3.html

4，下面的这个代码需要根据实际情况修改几个地方：

<input type="text" id="SQL" value="Height>50">：需要自行修改查询条件
datasetNames: ["test:" + "data"] ：datasetNames: ["自己的数据源名称:" + "自己的数据集名称"]
var url = 'http://localhost:8090/iserver/services/data-Test/rest/data'：自己的rest数据服务地址

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<title>SQL Query</title>

		<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
		<link href="./css/pretty.css" rel="stylesheet">

		<script src="./js/jquery.min.js"></script>
		<script src="./js/turf.js"></script>
		<script src="./js/config.js"></script>
		<script src="./js/supermap/SuperMap.Include.js"></script>
		<script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>

	</head>

	<body class="loading">
		<div id="cesiumContainer"></div>
		<div id="toolbar" class="param-container tool-bar">
			<label style="font: 400 13.3333px Arial;">SQL</label>
			<input type="text" id="SQL" value="Height>50">
			<button type="button" id="search" class="button black">查询</button><br>
		</div>
		<div id="bubble" class="bubble">
			<div id="tools" style="text-align : right">
				<span class="fui-cross" title="关闭" id="close" style="color: darkgrey;padding:5px"></span>
			</div>
			<div style="overflow-y:scroll;height:150px" id="tableContainer">
				<table id="tab"></table>
			</div>
		</div>

		<script>
			function onload(Cesium) {
				var viewer = new Cesium.Viewer('cesiumContainer');
				viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
					url: './images/worldimage.jpg'
				}));
				var scene = viewer.scene;
				var widget = viewer.cesiumWidget;
				$('#loadingbar').remove();

				try {

					var camera = scene.camera;
					$("#search").click(function() {
						doSqlQuery($("#SQL").val());
					});
				} catch(e) {
					if(widget._showRenderLoopErrors) {
						var title = '渲染时发生错误，已停止渲染。';
						widget.showErrorPanel(title, undefined, e);
					}
				}

				function doSqlQuery(SQL) {
					var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;
					getFeatureParam = new SuperMap.REST.FilterParameter({
//						attributeFilter: "Height>50"
						attributeFilter:SQL
					});
					getFeatureBySQLParams = new SuperMap.REST.GetFeaturesBySQLParameters({
						queryParameter: getFeatureParam,
						toIndex: -1,
						

						datasetNames: ["test:" + "data"]  //datasetNames: ["数据源名称:" + "数据集名称"]
					});


					var url = 'http://localhost:8090/iserver/services/data-Test/rest/data'; //rest数据服务地址

					getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(url, {
						eventListeners: {
							"processCompleted": onQueryComplete,
							"processFailed": processFailed
						}
					});
					getFeatureBySQLService.processAsync(getFeatureBySQLParams);
				}

				function onQueryComplete(queryEventArgs) {
					var selectedFeatures = queryEventArgs.originResult.features;
					viewer.entities.removeAll();
					for(var i = 0; i < selectedFeatures.length; i++) {

						var feature = selectedFeatures[i];

						var pts = [];
						var points = [];
						feature.geometry.points.forEach(function(point) {

							var ps = [point.x, point.y];
							points.push(ps);

						});

						var polygon = turf.polygon([points], {
							name: 'poly1'
						});
						var buffered = turf.buffer(polygon, 0.001, {
							units: 'miles',
							steps: 3
						});
						console.log(buffered);

						buffered.geometry.coordinates[0].forEach(function(point) {
							pts.push(point[0]);
							pts.push(point[1]);

						});

						for(var i = 0; i < 20; i++) {
							var polygon = viewer.entities.add({
								name: "长方体",
								polygon: {
									hierarchy: Cesium.Cartesian3.fromDegreesArray(pts),
									height: i * 3,
									extrudedHeight: (i + 1) * 3,
									outline: true,
									outlineWidth: 100,
									outlineColor: Cesium.Color.GREEN,
									material: Cesium.Color.WHITE.withAlpha(0.01)
								}
							});

						}

						viewer.flyTo(polygon);

					}
				}

				function processFailed(queryEventArgs) {
					alert('查询失败！');
				}

			}
		</script>
	</body>

</html>

<!--访问路径   http://localhost:8090/SuperMap_iClient3D_9D(2019)_for_WebGL_chs/examples/bufferTest3.html-->

项目网盘下载地址：https://pan.baidu.com/s/1IiH4LlwHFXlvni-ZcOCyHw 提取码：5ywn

疆~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
将rest数据服务中的二维面数据在浏览器进行缓冲区分析后，再拉伸成三维立方体

首先看一下运行效果图：需要注意的几个地方：1，导入的turf.js（可以给二维面进行缓冲区分析），即<script src="./js/turf.js"></script>放在<script src="./js/jquery.min.js"></script>下面，注意顺序2，将supermap中的面数据发布成“rest数据服务”...
复制链接

扫一扫