首页 / 浏览问题 / 云GIS / 问题详情
iClient 3D for WebGL(10i)缺陷,矢量瓦片和分屏冲突
256EXP 2020年04月27日

使用产品:SuperMap iClient 3D for WebGL(10i)

问题描述:当场景中存有矢量瓦片图层时,分屏功能异常,导致场景黑屏,如下图所示:

代码:可提供demo文件,即官方示例矢量-MVT分屏-分屏显示的结合

<!DOCTYPE html>
<html lang="en">
<body>
		<script type="text/javascript">
			function onload(Cesium) {
				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;
				var widget = viewer.cesiumWidget;

				var groundPromise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1, {
					name: 'ground'
				});
				var buildPromise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, {
					name: 'build'
				});
				Cesium.when.all([groundPromise, buildPromise], function(layers) {
					var build = scene.layers.find("build");
					var ground = scene.layers.find("ground");
					// 图层加载完成,设置相机位置
					scene.camera.setView({
						destination: new Cesium.Cartesian3.fromDegrees(116.4563, 39.8969, 553),
						orientation: {
							heading: 5.901089214916513,
							pitch: -0.40668579780875524,
							roll: 6.281842456812987
						}
					});
					$('#viewportType').change(function() {
						var value = $(this).val();
						switch(value) {
							case "NONE":
								$("#split_up").css("display", "none");
								$("#split_bottom").css("display", "none");
								$("#split_left").css("display", "none");
								$("#split_right").css("display", "none");
                                $("#split_vertical_trisection_left").css("display", "none");
                                $("#split_vertical_trisection_right").css("display", "none");
								$('#pannel').hide();
								break;
							case "HORIZONTAL":
								$("#split_up").css("display", "block");
								$("#split_bottom").css("display", "block");
								$("#split_left").css("display", "none");
								$("#split_right").css("display", "none");
                                $("#split_vertical_trisection_left").css("display", "none");
                                $("#split_vertical_trisection_right").css("display", "none");
								$('#pannel').show();
								$('#b_one,#b_two,#g_one,#g_two').show();
								$('#b_three,#g_three,#b_four,#g_four').hide();
								break;
							case "VERTICAL":
								$("#split_up").css("display", "none");
								$("#split_bottom").css("display", "none");
								$("#split_left").css("display", "block");
								$("#split_right").css("display", "block");
                                $("#split_vertical_trisection_left").css("display", "none");
                                $("#split_vertical_trisection_right").css("display", "none");
								$('#pannel').show();
								$('#b_one,#b_two,#g_one,#g_two').show();
								$('#b_three,#g_three,#b_four,#g_four').hide();
								break;
							case "TRIPLE":
								$("#split_up").css("display", "block");
								$("#split_bottom").css("display", "none");
								$("#split_left").css("display", "block");
								$("#split_right").css("display", "block");
                                $("#split_vertical_trisection_left").css("display", "none");
                                $("#split_vertical_trisection_right").css("display", "none");
								$('#pannel').show();
								$('#b_one,#b_two,#g_one,#g_two,#b_three,#g_three').show();
								$('#b_four,#g_four').hide();
								break;
							case "VerticalTrisection":
                                $("#split_up").css("display", "none");
                                $("#split_bottom").css("display", "none");
                                $("#split_left").css("display", "none");
                                $("#split_right").css("display", "none");
                                $("#split_vertical_trisection_left").css("display", "block");
                                $("#split_vertical_trisection_right").css("display", "block");
                                $('#b_one,#b_two,#g_one,#g_two,#b_three,#g_three').show();
                                $('#b_four,#g_four').hide();
                                $('#pannel').show();
                                break;
							default:
								$("#split_up").css("display", "block");
								$("#split_bottom").css("display", "block");
								$("#split_left").css("display", "block");
								$("#split_right").css("display", "block");
                                $("#split_vertical_trisection_left").css("display", "none");
                                $("#split_vertical_trisection_right").css("display", "none");
								$('#pannel').show();
								$('#b_one,#b_two,#g_one,#g_two,#b_three,#g_three,#b_four,#g_four').show();
								break;
						}
						scene.multiViewportMode = Cesium.MultiViewportMode[value];
					});

					$('#ground input[type=checkbox]').on("input propertychange", function(evt) {
						var value = Number($(this).attr('data-value'));
						ground.setVisibleInViewport(value, $(this).prop("checked"));
					});
					$('#building input[type=checkbox]').on("input propertychange", function(evt) {
						var value = Number($(this).attr('data-value'));
						build.setVisibleInViewport(value, $(this).prop("checked"));
					});
					
					
					            let mvtMap = scene.addVectorTilesMap({
                url: "http://www.supermapol.com/realspace/services/map-mvt-JingJinDiQuDiTu/restjsr/v1/vectortile/maps/%E4%BA%AC%E6%B4%A5%E5%9C%B0%E5%8C%BA%E5%9C%B0%E5%9B%BE",
                canvasWidth: 512,
                name: 'testMVT',
                viewer: viewer
            });

            var layerReadyPromise = mvtMap.readyPromise;
            Cesium.when(layerReadyPromise, function (data) {
                var bounds = mvtMap.rectangle;
                scene.camera.setView({
                    destination: new Cesium.Cartesian3.fromRadians((bounds.east + bounds.west) * 0.5, (bounds.north + bounds.south) * 0.5, 2000000),
                    orientation: {
                        heading: 0,
                        roll: 0
                    }
                });
            });
            
            
					$('#loadingbar').remove();
				}, function(e) {
					if(widget._showRenderLoopErrors) {
						var title = '加载SCP失败,请检查网络连接状态或者url地址是否正确?';
						widget.showErrorPanel(title, undefined, e);
					}
				});
			}
		</script>
	</body>

</html>

2 个回答

应该是个缺陷,麻烦上报研发。
256EXP 2020年04月29日
您好,您是再官网的范例中添加的代码还是再本地。我这边本地试了一下没有出现这个情况。
孟超
1
2,560EXP 2020年04月28日
范例中和本地都不行。
您本地的webgl用的是哪个版本的。
官方下载的最新版

SuperMap_iClient3D_10i_for_WebGL_2001071102
...