点击让模型高亮显示并显示其信息

Cesium源码 · guyu521 · 于 4年前 发布 · 14774 次阅读

我现在要实现一个我点击这个模型上的小棍棍(像火柴一项的东西),弹出卡片显示出对应的信息(但是点击事件不生效)按照这么写点击根本不触发。不知道为甚么望指教。

var scene = viewer.scene,
        // url = "http://localhost:8091/iserver/services/3D-single/rest/realspace",    //三维服务地址
        url2 = "http://10.25.111.179:8090/iserver/services/3D-DXGSsensor/rest/realspace/datas/CGQ26";      //数据服务地址
    var promise = scene.open(config.mapCGQ);
    Cesium.when(promise, function(layers) {
        var layer = scene.layers.find('CGQ26');       //绑定图层,图层名称可在三维服务地址下的datas中看
        layer.setQueryParameter({
            url: url2,
            dataSourceName: "CGQ26",                           //对应数据源名称,数据服务
            dataSetName:"CGQ26",                             //对应数据集名称,数据服务
            isMerge: true,
            keyWord: 'SmID'
        });
    })
    viewer.pickEvent.addEventListener(function(feature) {
        alert("pickEvent事件已生效");
    });
共收到 2 条回复 cesium
admin#14年前 1 个赞
  1. 首选确认的模型能够根据id,区分子模型,3D Tiles是支持的。如果你能得到左侧的列表,相信每一个列表项对应一个子模型(模型的一个部分)
  2. 拾取:设置鼠标点击事件,比如左击,然后pick出来,时是否会命中对应的子模型,如果是,可以高亮,然后根据id去数据库读取相关信息,div打出来即可。
        // 鼠标左击事件
        handler.setInputAction(function onLeftClick(movement) {
            if (!picking) return;        
    
            const pickedFeature = viewer.scene.pick(movement.position);
            if (Cesium.defined(pickedFeature) &&
                pickedFeature instanceof Cesium.Cesium3DTileFeature &&
                pickedFeature.tileset === tileset) {
                console.log(pickedFeature.id);
                const dbId = getFeatureDbId(pickedFeature);
                if (dbId === selectedDbId) {
                    clearSelected();
                } else {
                    setSelected(dbId);
                }
                
            } else {
                clearSelected();
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        // 鼠标右击事件-弹出菜单列表
        handler.setInputAction(function onRightClick(movement) {
            if (!picking) return;
            console.log(movement.position);
            const pickedFeature = viewer.scene.pick(movement.position);
            // 3dtiles右击
            if (Cesium.defined(pickedFeature) &&
                pickedFeature instanceof Cesium.Cesium3DTileFeature &&
                pickedFeature.tileset === tileset) {
                const dbId = getFeatureDbId(pickedFeature);
                var cartesian = labelEntity.cartesian;
                if (Cesium.defined(cartesian)) {
                    menuCartesian = cartesian;
                    $("#menuList").css("display", "block");
                    $("#menuList").css("left", movement.position.x);
                    $("#menuList").css("top", movement.position.y);
                }
            }
        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
zyq87#24年前 1 个赞

你的小棍棍 单体化gltf方式加载吧,当然3dtiles也是可以的,下面的代码是gltf方式的,高亮,与属性获取,弹窗自备:

picFeature(viewer) {
            var fragmentShaderSource =
                "uniform sampler2D colorTexture;\n" +
                "varying vec2 v_textureCoordinates;\n" +
                "uniform vec4 highlight;\n" +
                "void main() {\n" +
                "    vec4 color = texture2D(colorTexture, v_textureCoordinates);\n" +
                "    if (czm_selected()) {\n" +
                "        vec3 highlighted = highlight.a * highlight.rgb + (1.0 - highlight.a) * color.rgb;\n" +
                "        gl_FragColor = vec4(highlighted, 1.0);\n" +
                "    } else { \n" +
                "        gl_FragColor = color;\n" +
                "    }\n" +
                "}\n";
            var stage = viewer.scene.postProcessStages.add(
                new Cesium.PostProcessStage({
                    fragmentShader: fragmentShaderSource,
                    uniforms: {
                        highlight: function() {
                            return new Cesium.Color(1.0, 0.0, 0.0, 0.5);
                        }
                    }
                })
            );
            stage.selected = [];

            viewer.screenSpaceEventHandler.setInputAction(movement => {
                var pickedFeature = viewer.scene.drillPick(
                    movement.position,
                    10,
                    10,
                    10
                );

                if (!Cesium.defined(pickedFeature)) {
                    stage.selected = [];
                    return;
                }
                if (pickedFeature.length == 0) {
                    stage.selected = [];
                    return;
                }

                let pickedObject = pickedFeature[0];
				//f12看下你选中对象的相关属性吧
                if (Cesium.defined(pickedObject) && pickedObject.id != null) {
                    let properties = pickedObject.id.properties.sign.getValue();

                    this.tname = properties.name;
                    this.tid = properties.id;
                    this.type = properties.type;
                }

                if (Cesium.defined(pickedObject)) {
                    stage.selected = [pickedObject.primitive];
                } else {
                    stage.selected = [];
                }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }
添加回复 (需要登录)
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册
Your Site Analytics