javascript - GoogleEarthプラグインAPIのgroundOverlayへのイベントのアタッチ

Question

このコードを使用して、マウスイベントをgroundOverlay機能にアタッチしようとしています。

     var groundOverlay = ge.createGroundOverlay('');
        var icon = ge.createIcon('');
        icon.setHref("http://www.google.com/logos/earthday08.gif");
        groundOverlay.setIcon(icon);
        var latLonBox = ge.createLatLonBox('');
        latLonBox.setBox(48.80, 48.75, -121.77, -121.85, 0);
        groundOverlay.setLatLonBox(latLonBox);
        ge.getFeatures().appendChild(groundOverlay);    

          google.earth.addEventListener(groundOverlay, 'click', function(e) { 
                    e.preventDefault();
                    console.log("hello"); 
                    });

ただし、クリックしても結果は表示されません。なぜ何かアイデアはありますか？

ありがとう！明細書

score 1 · Accepted Answer

これはバグです。投稿したコードは完全に正しいです。

オブジェクトはKmlGroundOverlayから継承するGEEventEmitterため、標準がありKmlMouseEventsます。マウスダウン、マウスアップ、マウスムーブなど

ここではっきりとわかります: https://developers.google.com/earth/documentation/reference/interface_kml_ground_overlay-members

ただし、何らかの理由でイベントが発生しません。ここにバグレポートがあります（オーバーレイの問題はそれにマージされたと思います...） https://code.google.com/p/earth-api-samples/issues/detail?id=123

@lifeIsGood が彼の回答で述べているように、最善の回避策は、GroundOverlay の下に同じジオメトリを持つ透明なポリゴンを配置することです。ただし0、少なくともプログラムで不透明度をに設定することはお勧めできません。不透明度は実験的なものであり、現時点で0はオブジェクトに対してに設定すると、KmlMouseEvents通常、そのオブジェクトに対しては起動しません。プラグインが完全に透過的である場合、イベントチェーンから機能を効果的に削除すると思います。とにかく、これを防ぐには、不透明度.1を0

ポリゴンでイベントを処理するより良い方法は、GroundOverlay をハンドラーに戻すことです。このようにして、イベントが発生したときに、グローバル変数や一意の ID を必要とせずに、GroundOverlay とイベントデータの両方をハンドラーで参照できます。例えば

// attach the event to the transparent polygon discussed
google.earth.addEventListener(polygon, 'click', function(e) {
  handler(overlay, e)
});

// handle the event.
// sender is the overlay
// event is the real KmlMouseEvent from the polygon.
function handler(sender, event) {
  console.log(sender.getType());  //KmlGroundOverlay
  console.log(event.getTarget().getType());  //KmlPolygon
};

ここでこれの実例を作りました。

score 1 · Accepted Answer

KmlGroundOverlays はまだマウスイベントを生成しないため、別の回避策として、地球からマウスイベントを受け取り、マウスがオーバーレイ内にあるかどうかを判断します (「ヒットテスト」)。以下は、mouseMove イベントを使用してそれを行うコードの開始点です。オーバーラップする 2 つのオーバーレイ (1 つは回転) を生成し、(drawingOrder を操作することによって) マウスの下のオーバーレイを表面に移動します。

オーバーレイに関する情報を独自の構造で維持します (可能な場合は KML をウォークするのではなく)。

回転したオーバーレイの頂点の位置を GE から取得する方法を見つけることができなかったので、デカルト近似を使用してコードで回転を行います。このコードは、極、境界、または大きなポリゴンで壊れる可能性があります。

頂点がわかると、マウスの移動で実行されるヒットテストは、2D ポイントがポリゴン内にあるかどうかをどのように判断できますか?の優れた議論に基づいています。

したがって、このコードは次のアイデアの開始を示しています。

オーバーレイからマウスイベントを合成する方法 (KML オーバーレイがマウスイベントを生成できるようになるまでの回避策)
回転したオーバーレイの頂点を近似する方法 (オーバーレイの位置を見つけるため)
オーバーレイでヒットテストを実行する (上記の参照から)
drawOrder を使用して、マウスオーバー時にオーバーラップしたオーバーレイをサーフェスに表示する

http://jsfiddle.net/pudkg/にデモがあります

コードとhtmlは次のとおりです。

<!DOCTYPE html>

<html>
<head>

<script type="text/javascript" src="https://www.google.com/jsapi"> </script>

<script type="text/javascript">
var ge;
var overlays = [];   // record information about overlays (filled by 'addOverlay')
var drawOrder = 0;   // drawOrder value of topmost overlay
google.load("earth", "1");

function Point (lat, lon) {
  this.lat = lat;
  this.lon = lon;
}

function Overlay (groundOverlay, points, drawOrder) {
  this.overlay = groundOverlay;  // KML object
  this.points = points;          // array of Points (vertices of overlay)
  this.drawOrder = drawOrder;    // integer, higest displayed topmost
}
Overlay.prototype.hitTest = function (lat, lon) {   // return true if lat/lon is within overlay
    // Based upon https://stackoverflow.com/questions/217578/point-in-polygon-aka-hit-test
    var isInside = false;
    var minLon = this.points[0].lon, maxLon = this.points[0].lon;
    var minLat = this.points[0].lat, maxLat = this.points[0].lat;
    for (var n = 1; n < this.points.length; n++) {
      var q = this.points[n];
      minLon = Math.min(q.lon, minLon);
      maxLon = Math.max(q.lon, maxLon);
      minLat = Math.min(q.lat, minLat);
      maxLat = Math.max(q.lat, maxLat);
    }
    if (lon < minLon || lon > maxLon || lat < minLat || lat > maxLat)
      return false;

    var i = 0, j = this.points.length - 1;
    for (i, j; i < this.points.length; j = i++)
      if ( (this.points[i].lat > lat) != (this.points[j].lat > lat) &&
          lon < (this.points[j].lon - this.points[i].lon) * (lat - this.points[i].lat) /
          (this.points[j].lat - this.points[i].lat) + this.points[i].lon )
        isInside = !isInside;
    return isInside;
  }

function init() {
  google.earth.createInstance('map3d', initCB, failureCB);
}

function initCB(e) {
  ge = e;
  ge.getWindow().setVisibility(true);

  var lat = 37.204193;
  var lon = -112.934429;
  var dlat = 0.003;
  var dlon = 0.005;
  var offset = 0.004;

  var la = ge.createLookAt('');  // position camera
  la.set(lat, lon, 0, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 30, 2000);
  ge.getView().setAbstractView(la);

  for (var i = 0; i < 2; i++)  // generate two overlays, overlapping; second one rotated
    addOverlay('http://www.google.com/logos/earthday08.gif',
        lat + dlat + offset*i, lat - dlat + offset*i,
        lon + dlon + offset*i, lon - dlon + offset*i, 30*i);
  // KML overlays can't (yet) generate mouse events, so look for events from globe
  google.earth.addEventListener(ge.getGlobe(), 'mousemove', function(event) {
    var lat = event.getLatitude();
    var lon = event.getLongitude();
    // show that a move event was received:
    document.getElementById('logMove').innerHTML = event.getLatitude();
    topmost = -1, zMax = 0;  // find topmost overlay
    for (var i = overlays.length - 1; i >= 0; i--)
      if (overlays[i].hitTest(lat, lon)) {  // if mouse is within overlays[i]
        document.getElementById('logHit').innerHTML = i + '; ' + overlays[i].drawOrder;
        if (overlays[i].drawOrder > zMax) {  // if this overlay is higher than any previous
          topmost = i;
          zMax = overlays[i].drawOrder;
        }
      }
    if ((topmost >= 0) && (overlays[topmost].drawOrder < drawOrder)) {
      // if in an overlay and it is buried, make it top-most
      overlays[topmost].overlay.setDrawOrder(++drawOrder);
      overlays[topmost].drawOrder = drawOrder;  // update local structure
    }
    document.getElementById('logOver').innerHTML = topmost + '; ' + zMax;
  });
}

function addOverlay(url, north, south, east, west, rotation) {
  var groundOverlay = ge.createGroundOverlay('');  // create overlay
  var icon = ge.createIcon('');
  icon.setHref(url);
  groundOverlay.setIcon(icon);
  var latLonBox = ge.createLatLonBox('');
  latLonBox.setBox(north, south, east, west, rotation);
  groundOverlay.setLatLonBox(latLonBox);
  groundOverlay.setDrawOrder(++drawOrder);
  ge.getFeatures().appendChild(groundOverlay);
  var points = [];  // figure out lat/lon of the corners of the overlay
  var sinTheta = Math.sin(rotation * Math.PI / 180.0);
  var cosTheta = Math.cos(rotation * Math.PI / 180.0);
  // rotation is about the center of the overlay; find midpoint:
  var midPoint = new Point((north + south) / 2, (west + east) / 2);
  // To do cartesian rotation, need to consider that the distance between
  // units of longitude diminish as one goes north, to zero at pole:
  var cosLat = Math.cos(midPoint.lat * Math.PI / 180.0);  // longitude compression factor
  west = (west - midPoint.lon) * cosLat, east = (east - midPoint.lon) * cosLat;
  north -= midPoint.lat, south -= midPoint.lat;
  // use cartesian rotation (good enough approximation for UI away from pole, boundaries)
  // after rotation, restore (expand) longitudes by compression factor
  points.push(new Point(midPoint.lat + west * sinTheta + north * cosTheta,
      midPoint.lon + (west * cosTheta - north * sinTheta) / cosLat));
  points.push(new Point(midPoint.lat + east * sinTheta + north * cosTheta,
      midPoint.lon + (east * cosTheta - north * sinTheta) / cosLat));
  points.push(new Point(midPoint.lat + east * sinTheta + south * cosTheta,
      midPoint.lon + (east * cosTheta - south * sinTheta) / cosLat));
  points.push(new Point(midPoint.lat + west * sinTheta + south * cosTheta,
      midPoint.lon + (west * cosTheta - south * sinTheta) / cosLat));
  overlays.push(new Overlay(groundOverlay, points, drawOrder));
}

function failureCB(errorCode) {
  alert("GE init fail");
}

google.setOnLoadCallback(init);
</script>
</head>

<body>

<div id=map3d style='height: 400px; width: 600px'></div>
<p>Mouse over the two overlays.  The one under the mouse should come to surface.</p>
<p>Latitude of mouse: <span id=logMove></span></p>
<p>Index of last overlay hit; its drawOrder: <span id=logHit></span></p>
<p>Index of topmost overlay; max drawOrder: <span id=logOver></span></p>

</body>
</html>

score 0 · Accepted Answer

あなたはあまりにも早くやろうとしています。まず、イベントリスナーをGEプラグインに追加する必要があります

交換してください

google.earth.addEventListener(groundOverlay, 'click', function(e) {

と

google.earth.addEventListener(ge.getGlobe(), 'click', function(e) {

時々使用するge.getWindow()かge.getView()、あなたがしていることに応じてより良いです

編集：コメントがエラーを指摘した後

のクリックを検出する代わりに、まったく同じ地形をカバーするをGroundOverlay作成し、代わりにクリックを検出します。Polygon

を作成するときはPolygon、「非表示」にしますが、不透明度をゼロに設定します。次に、前の回答と同様に、クリックされたかどうかを判断するときにunique_idを使用します

unique_idをポリゴンに設定するには：KMLでは次のようになります

<Placemark id="unique_id">
<name>Polygon Name</name>
<styleUrl>....</styleUrl>
<Polygon>
  .....
</Polygon>
</Placemark>

次に、eventListener内でこの種の関数を使用します

    var obj = e.getTarget();
         if (obj.getType() == 'KmlPlacemark') {
         e.preventDefault();
         var placemark = obj;
         var placemark_id = placemark.getId();
              if (placemark_id == 'unique_id') {
              console.log("hello");
              }
    }

この方法でクリックを検出できることはわかっているPolygonので、このアイデアはで機能するはずですGroundOverlays。私はそれをテストしていません。<drawOrder>問題が発生した場合は、のPolygonをaよりも大きい数値に設定することをお勧めします<drawOrder>。GroundOverlay

これがうまくいくことを願っています！

javascript - GoogleEarthプラグインAPIのgroundOverlayへのイベントのアタッチ

3 に答える 3

Related

Reference