Cesium - 为什么scene.pickPositionSupported为false

时间:2016-03-21 22:25:48

标签: javascript cesium

我最终试图在我的房子上画一个多边形。我能做到。

问题是在缩小,放大和旋转(或相机移动)时,多边形不会粘在我家的顶部。我从this answer得到了很大的帮助。所以,现在我正在尝试查看示例代码,但我需要学习很多Cesium方法和功能。

我想要关注的示例代码位于the gold standard that appears to be baked into the existing camera controller here

我使用mousePosition作为Cartesian3调用 testMe ,并且SceneMode为3D,因此执行 pickGlobe

这是我的代码:

var pickedPosition;
var scratchZoomPickRay = new Cesium.Ray();
var scratchPickCartesian = new Cesium.Cartesian3();
function testMe(mousePosition) {
    if (Cesium.defined(scene.globe)) { 
        if(scene.mode !== Cesium.SceneMode.SCENE2D) {
            pickedPosition = pickGlobe(viewer, mousePosition, scratchPickCartesian);
        } else {
            pickedPosition = camera.getPickRay(mousePosition, scratchZoomPickRay).origin;
        }
    }
}

var pickGlobeScratchRay = new Cesium.Ray();
var scratchDepthIntersection = new Cesium.Cartesian3();
var scratchRayIntersection = new Cesium.Cartesian3();    
function pickGlobe(viewer, mousePosition, result) {

    var globe = scene.globe;
    var camera = scene.camera;

    if (!Cesium.defined(globe)) {
        return undefined;
    }

    var depthIntersection;
    if (scene.pickPositionSupported) {
        depthIntersection = scene.pickPosition(mousePosition, scratchDepthIntersection);
    }

    var ray = camera.getPickRay(mousePosition, pickGlobeScratchRay);
    var rayIntersection = globe.pick(ray, scene, scratchRayIntersection);

    var pickDistance;
    if(Cesium.defined(depthIntersection)) {
        pickDistance = Cesium.Cartesian3.distance(depthIntersection, camera.positionWC);
    } else {
        pickDistance = Number.POSITIVE_INFINITY;
    }

    var rayDistance;
    if(Cesium.defined(rayIntersection)) {
        rayDistance = Cesium.Cartesian3.distance(rayIntersection, camera.positionWC);
    } else {
        rayDistance = Number.POSITIVE_INFINITY;
    }

    var scratchCenterPosition = new Cesium.Cartesian3();
    if (pickDistance < rayDistance) {
        var cart = Cesium.Cartesian3.clone(depthIntersection, result);
        return cart;
    }

    var cart = Cesium.Cartesian3.clone(rayIntersection, result);
    return cart;
}

这是我的问题:

enter image description here

结果如下:

enter image description here

以下是我的问题,以使此代码正常运行:

1。如何将scene.pickPositionSupported设置为true?我在Windows 10上使用Chrome。我在示例代码中找不到任何有关此内容的信息,我对文档或Google没有太多运气。< / p>

2。为什么没有设置rayIntersection?光线和场景在空Cartesian3中有值和scratchRayIntersection。

我想如果我能让这两个陈述有效,我可以让其余的pickGlobe方法正常工作。

WebGLGraphics报告:

enter image description here

enter image description here

enter image description here

我点击获取WebGL 多维数据集正在旋转!

2 个答案:

答案 0 :(得分:3)

拾取位置要求底层WebGL实现支持深度纹理,可以通过WEBGL_depth_texture或WEBKIT_WEBGL_depth_texture扩展。 scene.pickPositionSupported返回false,因为缺少此扩展名。您可以转到http://webglreport.com/并查看扩展程序列表来验证这一点;我在上面列出了以上两个。你的代码本身没有任何东西可以让它突然变回真实,它反映了底层的浏览器。

话虽如此,我知道Chrome支持深度纹理并且可以在Windows 10上运行,因此这听起来像是一个可能的视频卡驱动程序问题。我完全希望下载并安装系统的最新驱动程序来解决问题。

对于rayIntersection,通过快速查看代码,我只希望在鼠标实际位于全球范围内时定义它,但情况可能并非总是如此。如果您可以将其减少为可运行的Sandcastle示例,那么我将更容易进行调试。

答案 1 :(得分:1)

行。所以事实证明我有一个完全混乱的Cesium环境。我不得不删除它并在我的项目中重新安装它( npm install cesium --save-dev )。然后我不得不修复一些路径和 VOILA!它有效。感谢你们两位的帮助。