Question

我想在地面上放置一个GoogleEarth实例，新的3D Region - 对象。这些对象应该是可点击的。在这个现场演示页面：

https://code.google.com/apis/ajax/playground/?exp=earth#creating_3d_models

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

我无法获得代码。我相信这是可能的：

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

如何??

Answer 1

附加到GE的自定义3D模型不会触发这类事件（不幸的是）。您可以使用一些变通方法来使这种行为起作用，具体取决于您想要的精度级别：

在3D模型的同一位置绘制一个地标，只需要元素的名称和捕获点击 - 用户必须知道他必须点击名称，可能不直观
在3D模型的相同位置绘制多边形 - 取决于模型的角度，您可能无法检测到点击次数
在3D模型周围绘制多个多边形 - 更重，但更精确

关于性能，如果你只绘制一次，它只是GE中的另一个元素，所以它不应该引起任何问题，但是如果你不得不不断更新它的位置而不是你会失去一点性能，但是它取决于更新的频率和要操作的元素的数量。

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

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模型上的点击事件

1 个答案: