首页 / 浏览问题 / 三维GIS / 问题详情
supermapol的版本 面不能贴原生3Dtiles对象
6EXP 2021年09月08日

同样的代码,若引用http://www.supermapol.com/earth/Build/Cesium/Cesium.js,面不能贴原生3dtiles对象,只能贴地形。

若引用10i sp2版本的Cesium.js则既能贴3dtiles也能贴地形。

另外,在量算贴地面积时,supermapol的版本不能贴3dtiles对象,但10i sp2版本可以,但sp2版本也存在问题,就是在量算时会影响已有polygon对象,清除量算结果时会报异常。总之,2个版本各有各的问题。

<!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="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/pretty.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/bootstrap-select.min.js"></script>
    <script src="./js/config.js"></script>
    <!--该Cesium.js是10i(2020)SP2 for WebGL的-->
    <!--<script type="text/javascript" src="../../Build/Cesium/Cesium.js"></script>-->
    
    <!--该Cesium.js是supermapol上的,即官网示范程序中引用的-->
	<script type="text/javascript" src="http://www.supermapol.com/earth/Build/Cesium/Cesium.js"></script>
	<style>
        .tool-bar .black1 {
            width: 100%;
            border: 1px solid #333;
            box-shadow: 0 1px 2px #8b8b8b inset, 0 -1px 0 #3d3d3d inset, 0 -2px 3px #8b8b8b inset;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id='loadingbar' class="spinner">
    <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
</div>
<div id="toolbar" class="param-container tool-bar">
	<button type="button" id="area" class="button black">测面</button>
	<button type="button" id="clear" class="button black">清除</button>
</div>

<script>
	var clampMode = 1; // 贴地量算
    var handlerArea;

	function onload(Cesium) {
		var obj = [6378137.0, 6378137.0, 6356752.3142451793];
        Cesium.Ellipsoid.WGS84 = Object.freeze(new Cesium.Ellipsoid(obj[0], obj[1], obj[2]));

        //初始化viewer部件
		var viewer = new Cesium.Viewer('cesiumContainer',
			{
				terrainProvider: new Cesium.TiandituTerrainProvider({token:window.URL_CONFIG.TOKEN_TIANDITU}),
			}
		);
        viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
            credit : new Cesium.Credit('天地图全球影像服务     数据来源:国家地理信息公共服务平台 & 四川省测绘地理信息局'),
            token: URL_CONFIG.TOKEN_TIANDITU
        }));

        var imageryLayers = viewer.imageryLayers;
        //初始化天地图全球中文注记服务,并添加至影像图层
        var labelImagery = new Cesium.TiandituImageryProvider({
            mapStyle : Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务(经纬度投影)
            token: URL_CONFIG.TOKEN_TIANDITU
        });
        imageryLayers.addImageryProvider(labelImagery);
        
		var tileset = new Cesium.Cesium3DTileset({
  			url: "data/3dtiles/DaYanTa/tileset.json"
  		});
  		
  		tileset.readyPromise.then(function () {
			  var cartographic = Cesium.Cartographic.fromCartesian(
				tileset.boundingSphere.center
			  );
			  var surface = Cesium.Cartesian3.fromRadians(
				cartographic.longitude,
				cartographic.latitude,
				0.0
			  );
			  var offset = Cesium.Cartesian3.fromRadians(
				cartographic.longitude,
				cartographic.latitude,
				16//高程
			  );
			  var translation = Cesium.Cartesian3.subtract(
				offset,
				surface,
				new Cesium.Cartesian3()
			  );
			  tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
		  }).otherwise(function (error) {
			  throw(error);
		  });
  		
  	    viewer.scene.primitives.add(tileset);
  		viewer.zoomTo(tileset);

        $('#loadingbar').remove();

		addPolyline(viewer);
		addPolygon(viewer);
		initMeasure(viewer);

		$('#area').click(function () {
			deactiveAll();
			handlerArea && handlerArea.activate();
		});
		$('#clear').click(function () {
			clearAll();
		});
	}

    if (typeof Cesium !== 'undefined') {
        window.startupCalled = true;
        onload(Cesium);
    }

	function initMeasure(viewer){
		 //初始化测量面积
		handlerArea = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.Area, clampMode);
		handlerArea.measureEvt.addEventListener(function (result) {
			var mj = Number(result.area);
			var selOptV = $("#selOpt").val();
			var positions = result.positions;
			if (selOptV == 3 || selOptV == 4) {
				mj = Number(calcClampValue(positions));
			} else if (selOptV == 5) {
				mj = Number(calcAreaWithoutHeight(positions));
			}

			var area = mj > 1000000 ? (mj / 1000000).toFixed(2) + 'km²' : mj.toFixed(2) + '㎡'
			handlerArea.areaLabel.text = '面积:' + area;
		});
		handlerArea.activeEvt.addEventListener(function (isActive) {
			if (isActive == true) {
				viewer.enableCursorStyle = false;
				viewer._element.style.cursor = '';
				$('body').removeClass('measureCur').addClass('measureCur');
				viewer.scene.pickPointEnabled = pickPointEnabled;
			}
			else {
				viewer.enableCursorStyle = true;
				$('body').removeClass('measureCur');
				viewer.scene.pickPointEnabled = false;
			}
		});
	}

	function addPolyline(viewer){
		var polylineLayer = new Cesium.CustomDataSource('polylineLayer');
		var entity1 = polylineLayer.entities.add({
			name: "polyline",
			polyline: {
			    positions: Cesium.Cartesian3.fromDegreesArray([108.958521,34.219594,108.959729,34.219627]),
			    width: 5,
			    clampToGround: true,
			    material: new Cesium.PolylineOutlineMaterialProperty({
		              color: Cesium.Color.ORANGE,
		              outlineWidth: 2,
		              outlineColor: Cesium.Color.BLACK,
	            }),
			}
		});
		viewer.dataSources.add(polylineLayer);
	};
	function addPolygon(viewer){
		var polygonLayer = new Cesium.CustomDataSource('polygonLayer');
		var entity1 = polygonLayer.entities.add({
			name: "polygon",
			polygon: {
			    hierarchy: Cesium.Cartesian3.fromDegreesArray([
			    	108.949096,
			    	34.209525,
			    	108.9497922,
			    	34.21952,
			    	108.959757,
			    	34.2190098,
			    	108.959091,
			    	34.209045
			    ]),
			    material: Cesium.Color.BLUE.withAlpha(0.5),
			    outline: true,
			    outlineColor: Cesium.Color.YELLOW,
//			    clampToGround: true,//面没有这个属性
			    classificationType:Cesium.ClassificationType.BOTH
			},
		});
		viewer.dataSources.add(polygonLayer);
	};
	function clearAll() {
		deactiveAll();
		handlerArea && handlerArea.clear();
	}

	function deactiveAll() {
		handlerArea && handlerArea.deactivate();
	}

</script>
</body>
</html>

测试3dtiles下载地址:

链接: https://pan.baidu.com/s/1gFJxdlldqvr9nO4ZngYSiQ 提取码: 5yie

解压后放到\SuperMap_iClient3D_10i(2020)_sp2_for_WebGL\examples\webgl\data\3dtiles目录下。本地部署运行。

另外吐个槽,标题限制40个字符实在太少了,含英文单词的标题就写不了几个汉字了。

2 个回答

您好,感谢您提出的问题,我们这边会尽快解决,解决之后第一时间联系您这边
6,077EXP 2021年09月10日
你好,该问题已解决,您这边留个邮箱,我发个新包给您
6,077EXP 2021年09月15日
邮箱已私信。

经验证,3D模式下,面可以贴3dtiles了。但切换到2D或哥伦布视图时仍然只能贴地形,对比Cesium官网例子不管哪种视图都能自由设置贴地形或贴对象,https://sandcastle.cesium.com/?src=Classification%20Types.html,请帮忙修复。

...