Javascript 处理三维模型上的单击事件

我想在GoogleEarth实例中添加一个新的3D区域对象，位于地面。这些对象应该是可单击的。 在此实时演示页面：

。。我试图修改可执行代码，添加简单的鼠标事件监听器，处理鼠标点击3D_框对象（placemark变量）

我无法让代码正常工作。我相信有可能：

google.earth.addEventListener(placemark, 'mousedown', function(event) {
    console.log(event);    
    console.log(event.getTarget().getType());
});

---

如何？？？

附加到GE的自定义3D模型不会触发此类事件（不幸的是）。 根据您想要的精度级别，您有一些变通方法来实现这种行为：

• 在3D模型的同一位置绘制一个Placemark，仅使用元素名称并捕获单击-用户必须知道他必须单击名称，这可能不是直观的
• 在三维模型的同一位置绘制多边形-取决于可能未检测到的模型角度
• 围绕三维模型绘制多个多边形-更重，但更精确

关于性能，如果您只绘制一次，它只是GE中的另一个元素，因此不应该有任何问题，但如果您必须不断更新其位置，您将损失一点性能，但这将取决于更新频率和要操作的元素数

这是围绕三维模型位置创建“立方体”的示例：

function createCube(lat, lon, offset, alt, altOffset, name) {
    var altitudeMode = window.ge.ALTITUDE_ABSOLUTE;
    //create the back polygon of the cube
    var backPoly = window.ge.createPolygon('');
    backPoly.setAltitudeMode(altitudeMode);

    var cubeBack = window.ge.createLinearRing('');
    cubeBack.setAltitudeMode(altitudeMode);
    // Square outer boundary.
    cubeBack.getCoordinates().pushLatLngAlt(lat - offset, lon - offset, alt); 
    cubeBack.getCoordinates().pushLatLngAlt(lat - offset, lon - offset, alt+altOffset); 
    cubeBack.getCoordinates().pushLatLngAlt(lat - offset, lon + offset, alt+altOffset); 
    cubeBack.getCoordinates().pushLatLngAlt(lat - offset, lon + offset, alt);
    backPoly.setOuterBoundary(cubeBack);

    //create the front polygon of the cube
    var frontPoly = window.ge.createPolygon('');
    frontPoly.setAltitudeMode(altitudeMode);

    var cubeFront = window.ge.createLinearRing('');
    cubeFront.setAltitudeMode(altitudeMode);
    // Square outer boundary.
    cubeFront.getCoordinates().pushLatLngAlt(lat + offset, lon - offset, alt);
    cubeFront.getCoordinates().pushLatLngAlt(lat + offset, lon - offset, alt+altOffset);
    cubeFront.getCoordinates().pushLatLngAlt(lat + offset, lon + offset, alt+altOffset);
    cubeFront.getCoordinates().pushLatLngAlt(lat + offset, lon + offset, alt);
    frontPoly.setOuterBoundary(cubeFront);

    //create the left polygon of the cube
    var leftPoly = window.ge.createPolygon('');
    leftPoly.setAltitudeMode(altitudeMode);

    var cubeLeft = window.ge.createLinearRing('');
    cubeLeft.setAltitudeMode(altitudeMode);
    // Square outer boundary.
    cubeLeft.getCoordinates().pushLatLngAlt(lat - offset, lon - offset, alt);
    cubeLeft.getCoordinates().pushLatLngAlt(lat - offset, lon - offset, alt+altOffset);
    cubeLeft.getCoordinates().pushLatLngAlt(lat + offset, lon - offset, alt+altOffset);
    cubeLeft.getCoordinates().pushLatLngAlt(lat + offset, lon - offset, alt);
    leftPoly.setOuterBoundary(cubeLeft);

    //create the right polygon of the cube
    var rightPoly = window.ge.createPolygon('');
    rightPoly.setAltitudeMode(altitudeMode);

    var cubeRight = window.ge.createLinearRing('');
    cubeRight.setAltitudeMode(altitudeMode);
    // Square outer boundary.
    cubeRight.getCoordinates().pushLatLngAlt(lat - offset, lon + offset, alt);
    cubeRight.getCoordinates().pushLatLngAlt(lat - offset, lon + offset, alt+altOffset);
    cubeRight.getCoordinates().pushLatLngAlt(lat + offset, lon + offset, alt+altOffset);
    cubeRight.getCoordinates().pushLatLngAlt(lat + offset, lon + offset, alt);
    rightPoly.setOuterBoundary(cubeRight);

    //create the multigeometry object
    var multiGeometry = window.ge.createMultiGeometry(''); 
    multiGeometry.getGeometries().appendChild(backPoly); 
    multiGeometry.getGeometries().appendChild(frontPoly); 
    multiGeometry.getGeometries().appendChild(leftPoly); 
    multiGeometry.getGeometries().appendChild(rightPoly);

    //create the cube placemark
    var cubePlacemark = window.ge.createPlacemark('');
    cubePlacemark.setGeometry(multiGeometry);

    //Create a style and set width and color of line and polygons 
    cubePlacemark.setStyleSelector(window.ge.createStyle('')); 
    var polyStyle = cubePlacemark.getStyleSelector().getPolyStyle(); 
    polyStyle.setFill(0);
    var lineStyle = cubePlacemark.getStyleSelector().getLineStyle(); 
    lineStyle.setWidth(1);

    lineStyle.getColor().set('012F2F2F');

    //append the placemark to the geplugin
    ge.getFeatures().appendChild(cubePlacemark);

    //set the cube name
    cubePlacemark.setName(name);

    /*
     * Click event listener
     * Show a menu with some nice options - For now its ugly
     */
    google.earth.addEventListener(cubePlacemark, 'click', function(event) {
        event.preventDefault();

        setTimeout(function() {
            if(console) console.log("Cube click");
            else alert("Cube click");
        },0);
    });//click
}

---

我希望这会有所帮助。

我在事件文档中发现“鼠标事件可以附加到插件中的大多数几何图形（3D模型除外）”。需要解决方法。创建一个覆盖地面和模型高度的不可见多边形，检测点击，谢谢评论。我认为，这是一个解决办法。你有这个期限吗？如果我需要很多图纸，它会影响性能吗？它是否正确处理z索引和交点？