首页 / 浏览问题 / 三维GIS / 问题详情
使用supermap官网上的WebGL来做三维切片缓存之矢量的图层叠加,不成功
2EXP 2020年08月13日

根据官网的代码来写三维场景的叠加,在做三维切片缓存中的矢量时,无论如何都无法展示示例中的图像

我甚至都把代码全部粘贴了,还是得不到右边的图层,代码报错如下:

我不明白这个错误是什么,我写代码没有用到vue框架,只是简单的导入js。希望大神可以给我解惑

1个回答

您好,您用的webgl版本是多少,能把您的代码私信发给我吗。
1,545EXP 2020年08月13日

你好,我用的是最新的,两天前刚从官网上下载。版本为:SuperMap_iClient3D_10i(2021)_for_WebGL_25863

我的代码是完全复制官网的,代码如下:

<!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>矢量</title>
		<link href="lib/css/widgets.css" rel="stylesheet">
		<link href="lib/css/pretty.css" rel="stylesheet">
		<script type="text/javascript" src="lib/js/jquery.min.js"></script>
		<script type="text/javascript" src="lib/js/config.js"></script>
		<script type="text/javascript" src="lib/js/Cesium.js"></script>
	</head>
	<body>
		<div id="cesiumContainer"></div>
		<div id='loadingbar' class="spinner"></div>
		</div>
		<script type="text/javascript">
			function onload(Cesium) {
				//初始化viewer部件
				var viewer = new Cesium.Viewer('cesiumContainer');
				viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
					url: 'https://dev.virtualearth.net',
					mapStyle: Cesium.BingMapsStyle.AERIAL,
					key: URL_CONFIG.BING_MAP_KEY
				}));
				var scene = viewer.scene;

				scene.shadowMap.darkness = 1.275;
				scene.skyAtmosphere.brightnessShift = 0.4;
				scene.debugShowFramesPerSecond = true;
				scene.hdrEnabled = false;
				scene.sun.show = false;
				scene.lightSource.ambientLightColor = new Cesium.Color(0.80, 0.80, 0.795, 1);
				var position1 = new Cesium.Cartesian3(-2322647.280384799, 5386029.9142943295, 10);
				//光源目标点
				var targetPosition1 = new Cesium.Cartesian3(-2322406.966324683, 5385931.743190132, 30);
				var dirLightOptions = {
					targetPosition: targetPosition1,
					//            color: new Cesium.Color(1.0, 1.1, 1.3, 1),
					color: new Cesium.Color(1.0, 1.0, 1.0, 1),
					intensity: 0.4
				};
				directionalLight_1 = new Cesium.DirectionalLight(position1, dirLightOptions);
				scene.addLightSource(directionalLight_1);


				var widget = viewer.cesiumWidget;
				$('#loadingbar').remove();
				try {
					//打开所发布三维服务下的所有图层
					var promise = scene.open(
						'http://www.supermapol.com/realspace/services/3D-JuBuShuJu_Model_GuangZhouJuBuMian-BaiMo1/rest/realspace');
					Cesium.when.all(promise, function(layers) {
							//设置图层的阴影模式
							scene.camera.setView({
								//将经度、纬度、高度的坐标转换为笛卡尔坐标
								destination: new Cesium.Cartesian3(-2323607.7945701713, 5386182.530303348, 2505814.811681112),
								orientation: {
									heading: 4.844795866469065,
									pitch: -0.58125995096984,
									roll: 1.2504663970958063e-11
								}
							});
							for (var layer of layers) {
								layer.lodRangeScale = 1;
								layer.style3D.fillStyle = Cesium.FillStyle.Fill_And_WireFrame;
								layer.wireFrameMode = Cesium.WireFrameType.Sketch; // 草图模式
							}
						},
						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);
					}
				}
			}
			if (typeof Cesium !== 'undefined') {
				window.startupCalled = true;
				onload(Cesium);
			}
			
		</script>
	</body>
</html>

导入的js包是刚从官网下载的最新的。分别导入了以下的包

我这边加载是没问题的,您的引用路径要改为相对路径。
我的路径在别的示例是没问题的。不好意思你可以发下你测试的代码吗?包括js等的静态文件。可以发到我的邮箱1961322146@qq.com。多谢了

代码就是用的你发给我的啊,

哈?为啥我的不可以,一片绿色,没有建筑物crying

可不可以留个QQ,咱们远程看一下。
好的,我的扣扣1961322146
已远程解决。
请问这个问题是怎么解决的呢?我这边也出现了这种问题
我的问题是包残缺,所以导致图像出不来。我实在官网下载的包。要不发你一份包,可吗
...