SuerMapClient3DforWebGL实例化图层数据加载

翔翔

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

function AddModelToInstanceLayer() {var instanceLayer &＃61; new Cesium.InstanceLayer(scene._context);scene.primitives.add(instanceLayer);// 最大最小可见高度控制图层显隐instanceLayer.minVisibleAltitude &＃61; 0;instanceLayer.maxVisibleAltitude &＃61; 10000;// 根据像素控制模型可见// instanceLayer.filterMode &＃61; 1;// instanceLayer.filterPixel &＃61; 20; // 根据距离控制模型可见instanceLayer.filterMode &＃61; 0;instanceLayer.filterDistance &＃61; 1000;instanceLayer.pickEnable &＃61; true;instanceLayer.selectedColor &＃61; Cesium.Color.RED;instanceLayer.tileWidth &＃61; 500;Cesium.loadJson(&＃39;./实例化/Position.json&＃39;).then(function(jsonData) {console.log(jsonData);var instances &＃61; jsonData.features;for (var i &＃61; 0; i < instances.length; i&＃43;&＃43;) {var LocalMatrix &＃61; jsonData.features[i].properties.Matrix;var matrixstr &＃61; LocalMatrix.split("#");var matrix4d &＃61; 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 &＃61; {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 &＃61; &＃39;实例化/&＃39; &＃43; jsonData.features[i].properties.ModelName &＃43; &＃39;.s3mb&＃39;;instanceLayer.add(modelurl, state);instanceLayer.getInstance(modelurl, i).updateModelMatrix(matrix4d);}})
}


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

范例下载地址

本文转载地址&＃xff1a;https://blog.csdn.net/u012874078/article/details/105195784