首页 / 浏览问题 / 三维GIS / 问题详情
webgl分层分户单体化
70EXP 2020年07月15日

如何实现分层分户单体化中,多个单体同时显示,并且不同颜色进行标识,官网的例子只能加载一个

如图所示

1个回答

您好,您的意思是选中某一户后达到您图上的效果;还是说选中一个单元中的某一户,整个单元用不同颜色分层显示;如果我理解的不到位请您再详细描述一下。
jjz
4,720EXP 2020年07月15日
就是我需要三维场景加载出来后,多个分户都能这么展示出来,而不是说去做查询后只显示一户出来,cesium如何去加载呢

好的我明白了,就是页面加载后不做任何操作,就能多颜色显示所有分户是吧。刚才在官网的分层分户示例上试了一下,给您提供一个思路:onload方法里写doSqlQuery(''); 就可以不用点击直接查数据,然后onQueryComplete() 这个方法会获取到所有的户,您在这个方法里遍历一下就可以实现给每一户上色的效果了。大致的效果:

1)我需要在一栋楼里面显示不同的层,就像我截图的那样,Cesium.GroundPrimitive.bottomAltitude 和Cesium.GroundPrimitive.extrudeHeight设置是全局的,会导致所有的都加载的分户都一样

2)Cesium.GroundPrimitive.bottomAltitude 和Cesium.GroundPrimitive.extrudeHeight参数的值要是高于所附着的模型的高程会导致这个单体出不来

3)Cesium.GroundPrimitive.bottomAltitude 和Cesium.GroundPrimitive.extrudeHeight这两个参数为何在cesium(超图提供的)api里面找不到?

我测试了,Cesium.GroundPrimitive.bottomAltitude 和Cesium.GroundPrimitive.extrudeHeight确实存在问题,您试下换成这么写效果是不是接近一些,如果这个方法不行那现在还不支持您需要的效果,我这测试贴对象好像不太好用但是至少分户是对的:

           let polygonA =  viewer.entities.add({
                polygon: {
                    hierarchy: Cesium.Cartesian3.fromDegreesArray(points3D),
                    height: bottomHeight,
                    extrudedHeight: bottomHeight + extrudeHeight,
                    material: new Cesium.Color(223/255, i/255, 0/255, 0.4),
                },
                clampToS3M: true // 贴在S3M模型表面
            });

另外还有淹没分析也是分颜色贴对象,请您参考:

http://support.supermap.com.cn:8090/webgl/examples/editor.html#flood

这样写我试过,这样虽说能够显示多个分层分户,但是这样出来的entity不会附着在模型上,麻烦能够咨询一下你们的平台开发吗?cesium原生似乎是支持这种方式的,不过原生是贴cesium 3dtile的模型,您可看一下这个视频里面的效果:https://www.bilibili.com/video/BV1ai4y1871a

好的,我马上去确认一下再给您回复。
您好,我确认过了,在WebGL可能无法实现您需要的效果。给的建议是在桌面里做好分层分户的效果,对矢量面设置底部高程和拉伸高程,高度模式设置为贴对象或者绝对高度;生成缓存后,在前端设置不同的图层颜色。
就是还是你们分层分户示例中的那种效果吗?点击一户,查询一户,显示一户吗?
您在桌面对矢量面拉伸之类的设置完成后生成缓存发布,就可以直接在前端设置已经分层分户贴在倾斜模型上的拉伸过的矢量面缓存各图层的颜色了,其他的比如直接显示所有的或者设置查询条件显示一部分的效果可以在代码写。WebGL那个分层分户的示例实现不了您需要的效果,前文提到的桌面设置矢量面拉伸再缓存可以实现。
后面的版本webgl能够支持我说的那种单独的分层分户吗?而不是去设置Cesium.GroundPrimitive.bottomAltitude 和Cesium.GroundPrimitive.extrudeHeight这两个全局的,设置polygon的Height 和extrudeHeight,就附着设置高程这一块的模型
您看这样行不行,我报个需求给研发。其实我也不清楚为什么polygon那两个属性跟倾斜不能完全贴合,我测试的时候可以看出前后不贴合但是两边宽度一致。如果这个问题有进展我会给您私信。

好的,那麻烦您了,因为这个需求真的很多,cesium原生是支持一个模型上,附着多个不同的矢量的,我的那个视频就是:https://www.bilibili.com/video/BV1ai4y1871a,这种展示更实用

另外,我这边设置的entity中polygon的extrudedHeight和height后是四周都不会附着模型了,但是能抬高,我在这个文章https://www.pianshen.com/article/9008783700/(应该也是超图写的)中看到最后结尾说:由于Cesium.GroundPrimitive只能设置一次的限制,这种贴面效果只能同时设置一个面。若要设置多个,则取消Cesium.GroundPrimitive和 clampToS3M: true的设置,构造一个拉伸的立体的面对象,这样构造出来的分层分户的面没有贴对象的效果。

请问能提供一下如何在桌面去做矢量面拉伸之类的设置完成后生成缓存发布的方法吗?

您好,在桌面处理矢量面为缓存的方法如下:

1. 把矢量面加载到球面场景,“风格设置”标签 >“拉伸模式”> “高度模式”设置为“相对地面”或者“绝对高度”

2. “底部高度”和“拉伸高度”就是bottomHeight和extrudeHeight对应的字段

3. 右键场景生成场景缓存。

在WebGL设置可以参考动态单体化(底部链接)的第三种方法,先把拉伸后的矢量面图层设置为透明贴对象,然后根据需要设置颜色透明度。大体的实现思路就是这样,您试一下。

// 参考代码         
// 方法三,以场景的方式加载
         var promises = scene.open('http://www.supermapol.com/realspace/services/3D-dynamicDTH/rest/realspace');
         Cesium.when.all(promises, function(layers){
         camera.setView({ // 先定位,开始渲染定位区域的倾斜
         destination : new Cesium.Cartesian3(-2623004.4174251584, 3926981.958360567, 4287374.829655093),
         orientation : {
         heading: 4.39611370540786,
         pitch : -0.43458664812464143,
         roll : 2.0174972803488345e-11
         }
         });
         var vectorLayer = scene.layers.find('New_Region3D_1_铁岭矢量面'); // 矢量图层,图层的名字为服务数据中SCP的文件名
         //vectorLayer.style3D._fillForeColor.alpha = 0; // 矢量图层填充前景色透明
         vectorLayer.selectedColor = new Cesium.Color(1.0, 0.0, 0.0, 0.5); // 选中时给一个可见颜色
         vectorLayer.selectColorType = 1; // 选中颜色的显示类型为替换色
         vectorLayer.selectEnabled = true; // 矢量图层可选

动态单体化示例:

http://support.supermap.com.cn:8090/webgl/examples/editor.html#dynamicDTH

您好,我把分层分户不同颜色的我做好数据了,我想问一几个问题:

1、我生成场景缓存的时候,缓存类型选择“三维切片”/“矢量”?文件类型选择"s3m"/"s3mb"?

2、我缓存生成完成后去发布三维服务是不是还应该发布数据服务?

3、我发布完服务后前端如何去加载多个这种不同颜色分户的展示?

4、分户的颜色我根据标签专题图的值进行设置的,我若是在前端修改了这个数据的单值属性,颜色会跟着变化吗?

好的,解答您的几个问题:

1. 选择“三维切片”,两个类型一般默认就可以。
2. 三维面是需要发布三维服务,但是考虑到您之后可能还有查询等需求,建议同时发布数据服务。
3. 前端您可以通过设置这个拉伸后的三维面图层的style3D来设置颜色,您可以关注一下fillForeColor的alpha设置和Cesium.Color,API链接见下方。因为您这是多个颜色所以需要结合查询的条件来设置,这部分需要您自己实现
4. 我认为会,因为第三条提到的两个属性是修改图层颜色的。

动态单体化第三种方式可能会没有效果,这是因为selectedColor是依托于style3D设置的,如果style3D透明度是0,那么selectedColor不会显示,您可以设置成0.5查看效果。

API:
http://support.supermap.com.cn:8090/webgl/Build/Documentation/Style3D.html
http://support.supermap.com.cn:8090/webgl/Build/Documentation/Color.html

 您好,我生成缓存在webgl中加载后出现如图中的现象:

1、少了一层,似乎是整体抬升了一层

2、选中一户对象的时候会导致其他户对象被选中

另外,我用您上述的代码直接打开这个分户数据的场景,并没有去设置显示的颜色,只设置选中的颜色就可以了

对于第二个问题:请问您在桌面中点选的时候会有其他对象被选中的问题吗?其他户对象被选中是指一户还是多户,看起来是否是随机被选中,或者是有规律的比如上一层或者旁边一户等等。您已经在桌面设置了颜色就不用在网页端设置图层颜色了,这个没问题,例子中的是因为想让面图层透明所以才需要设置图层颜色。对于您第一个问题,方便的话可以贴一下代码吗?

第二个问题在在桌面没有出现是正常的,在webgl端很随机

第一个问题还有个就是在桌面显示矢量是附着在分户的每一个面上的,在webgl中只附着在分户的阳台面,背面没有覆盖;


 var promises = cesiumViewer.viewer.scene.open('https://supergis.fxtcn.cn/iserver/services/3D-fencengfenhu/rest/realspace');
            // var promises = cesiumViewer.viewer.scene.open('https://supergis.fxtcn.cn/iserver/services/3D-jueduigaodu/rest/realspace');
            Cesium.when.all(promises, function (layers) {
                var vectorLayer = cesiumViewer.viewer.scene.layers.find('fcfh@yuexi#1'); // 矢量图层,图层的名字为服务数据中SCP的文件名
                // vectorLayer.style3D._fillForeColor.alpha = 0; // 矢量图层填充前景色透明
                vectorLayer.selectedColor = new Cesium.Color(1.0, 0.0, 0.0, 0.5); // 选中时给一个可见颜色
                vectorLayer.selectColorType = 1; // 选中颜色的显示类型为替换色
                vectorLayer.selectEnabled = true; // 矢量图层可选
            });

链接:https://pan.baidu.com/s/1wiu1hGDwuWpfaTtF-J4bKQ 
提取码:3333 
附上我的数据:

1、倾斜.zip:是倾斜模型的s3m缓存

2、fencengfenhu_s3m:是矢量贴面的缓存

3、工作空间数据集.zip:是矢量贴面的数据集和工作空间文件,里面的倾斜模型我是用的我发布的iserver服务的,跟倾斜.zip一致

您好数据我已收到,测试后给您回复。
您好,我发布测试了,在官网示例加载效果也有问题,可能是专题图的原因,这个问题我报一个缺陷,看研发有什么回复。

刚试了下我没弄专题图,直接加载的原图层生成缓存也是一样的问题;

另外,我如果设置为绝对高度,不设置贴模型设置贴对象,没有那种缺一层的问题,但是在桌面里面专题图设置的透明度在webgl上没有效果了,如第一张图

还有,不管贴对象还是绝对高度,在webgl中还会出现楼的背面没有覆盖效果,如第二张图

...