SuerMap Client3D for WebGL实例化图层数据加载

翔翔

    什么叫实例化呢？在博客 https://blog.csdn.net/u012874078/article/details/93898926 中解释了什么叫实例化。本文主要介绍在WebGL中如何实现实例化效果。
    在超图WebGL中，实例化图层名字叫InstanceLayer。首先我将全部代码贴出来，然后再详细讲解其中的属性。代码如下：

function AddModelToInstanceLayer() {
	var instanceLayer = new Cesium.InstanceLayer(scene._context);
	scene.primitives.add(instanceLayer);
	// 最大最小可见高度控制图层显隐
	instanceLayer.minVisibleAltitude = 0;
	instanceLayer.maxVisibleAltitude = 10000;
	// 根据像素控制模型可见
	// instanceLayer.filterMode = 1;
	// instanceLayer.filterPixel = 20; 
	// 根据距离控制模型可见
	instanceLayer.filterMode = 0;
	instanceLayer.filterDistance = 1000;
	instanceLayer.pickEnable = true;
	instanceLayer.selectedColor = Cesium.Color.RED;
	instanceLayer.tileWidth = 500;
	Cesium.loadJson('./实例化/Position.json').then(function(jsonData) {
		console.log(jsonData);
		var instances = jsonData.features;
		for (var i = 0; i < instances.length; i++) {
			var LocalMatrix = jsonData.features[i].properties.Matrix;
			var matrixstr = LocalMatrix.split("#");
			var matrix4d = new Cesium.Matrix4(
				Number(matrixstr[0]), Number(matrixstr[4]), Number(matrixstr[8]), Number(matrixstr[12]),
				Number(matrixstr[1]), Number(matrixstr[5]), Number(matrixstr[9]), Number(matrixstr[13]),
				Number(matrixstr[2]), Number(matrixstr[6]), Number(matrixstr[10]), Number(matrixstr[14]),
				Number(matrixstr[3]), Number(matrixstr[7]), Number(matrixstr[11]), Number(matrixstr[15])
			);

			var state = {
				id: i,
				position: Cesium.Cartesian3.fromDegrees(
					Number(jsonData.features[i].geometry.coordinates[0]),
					Number(jsonData.features[i].geometry.coordinates[1]),
					Number(jsonData.features[i].properties.Z)),
				}
			// arr.push(state);
			var modelurl = '实例化/' + jsonData.features[i].properties.ModelName + '.s3mb';
			instanceLayer.add(modelurl, state);
			instanceLayer.getInstance(modelurl, i).updateModelMatrix(matrix4d);
		}
	})
}

   首先需要初始化InstanceLayer，然后再将InstanceLayer添加到primitives里面。
   minVisibleAltitude： 最小可见高度，当小于该高度时，图层整体不可见。
   maxVisibleAltitude： 最大可见高度，当大于该高度时，图层整体不可见。
   filterMode： 过滤模式，如果为1 则是像素过滤；如果为0 则为距离过滤。默认为像素过滤
   filterPixel： 像素过滤阈值，此时filterMode设置为1有效。比如设置为20，当模型对象小于该阈值时，整个tileWidth中的所有对象不可见。
   filterDistance： 距离过滤阈值，此时filterMode设置为0有效。比如设置为100米，当tileWidth与相机的距离小于该值时，整个tileWidth不可见。
   tileWidth： 块大小。如果熟悉超图iDesktop的话，这个值应该不陌生。既将该图层按照该大小来划分显示，如果一个块大小中的数据量太大（三角面片数过多）那么块大小要适当设置小；反之亦然。
   pickEnable： 是否可选择。
   selectedColor： 选中对象的颜色。
   通过add(modelurl,state)方法可以向instanceLayer中添加模型对象。modelurl是模型的相对路径；state是当前对象的状态，主要包括位置、id等属性。id是该模型的唯一标识。
   在上诉代码中有一个很重要的一点，设置模型对象的矩阵。其代码为：instanceLayer.getInstance(modelurl, i).updateModelMatrix(matrix4d);
   矩阵主要是设置对象的旋转、缩放和平移。该属性是模型对象的一个重要属性。在WebGL中的Matrix4是一个4*4的一维数组，详细的参数可参考WebGL的api。我们在iDesktop中设置的矩阵数组和WebGL中有一点差别，如果还是按照给定的数组去更新，那么会出现不可预期的旋转缩放平移。此时初始化矩阵时需要按照上面代码中的初始化就没问题了。
   最后添加到WebGL中的效果：

范例下载地址

本文转载地址：https://blog.csdn.net/u012874078/article/details/105195784