Javascript 在Google Earth插件API中将事件附加到groundOverlay
我正在尝试使用以下代码将鼠标事件附加到groundOverlay功能：Javascript 在Google Earth插件API中将事件附加到groundOverlay,javascript,google-earth-plugin,Javascript,Google Earth Plugin,我正在尝试使用以下代码将鼠标事件附加到groundOverlay功能： var groundOverlay = ge.createGroundOverlay(''); var icon = ge.createIcon(''); icon.setHref("http://www.google.com/logos/earthday08.gif"); groundOverlay.setIcon(icon); var latLon
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");
});
比尔你想做的太多太快了。 首先，您需要将事件侦听器添加到GE插件 因此，替换
google.earth.addEventListener(groundOverlay, 'click', function(e) {
ge.getWindow（）ge.getView（）多边形地面覆盖上检测点击，并检测点击
创建多边形时，我会将其设置为“不可见”，但将不透明度设置为零。然后就像我之前的回答一样，在确定是否单击它时使用唯一的_id
要为多边形设置唯一的_id，请执行以下操作：在KML中
<Placemark id="unique_id">
<name>Polygon Name</name>
<styleUrl>....</styleUrl>
<Polygon>
.....
</Polygon>
</Placemark>
我知道您可以通过这种方式检测到对多边形的点击
，因此这种想法应该适用于地面覆盖
。不过我还没有测试过。如果您遇到问题，我建议将多边形的
设置为高于地面覆盖的
的数值
希望这能奏效 这是一个bug，您发布的代码完全正确
KmlGroundOverlay
对象确实继承自geEventMitter
，因此它具有标准的KmlMouseEvents
；mousedown、mouseup、mousemove等
你可以在这里清楚地看到：
但由于某些原因，这些事件并没有发生。这里有一个bug报告（我相信重叠问题已经被合并进来了…）
正如@lifeIsGood在他的回答中所说，最好的解决方法是在地面覆盖下放置一个具有相同几何体的透明多边形。但是，将不透明度设置为0
，至少以编程方式设置不是一个好主意。此时，如果将某个对象的0
，则KmlMouseEvents
通常不会为该对象触发。我相信当插件完全透明时，它会有效地从事件链中删除该功能。无论如何，要防止出现这种情况，请将不透明度设置为.1
，而不是0
处理多边形上事件的更好方法是将GroundOverlay传递回处理程序。这样，当引发事件时，处理程序中既有对GroundOverlay的引用，也有对事件数据的引用，而不需要任何全局变量或唯一ID。e、 g
// 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
};
由于KmlGroundOverlays尚未生成鼠标事件，另一个解决方法是从全球接收鼠标事件，然后确定鼠标是否在覆盖范围内（“命中测试”）。下面是使用mouseMove事件实现该功能的代码的起点。它生成两个重叠覆盖（一个旋转），并将鼠标下的覆盖带到曲面（通过操纵drawingOrder）
它在自己的结构中维护有关覆盖的信息（而不是遍历KML，这是可能的）
我无法找到从GE获得旋转覆盖顶点位置的方法，因此旋转是在使用笛卡尔近似的代码中完成的。此代码可能会在极点、边界或大型多边形上中断
一旦知道顶点，鼠标移动时运行的命中测试就基于
因此，本代码说明了以下方面的起始想法：
- 如何从覆盖图合成鼠标事件（直到KML覆盖图可以生成鼠标事件为止的解决方法）
- 如何近似旋转覆盖的顶点（查找覆盖的位置）
- 在覆盖层上进行命中测试（来自上述参考）
- 使用drawOrder在鼠标悬停时将重叠覆盖带到曲面
这里有一个演示
以下是代码和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>
var-ge；
变量覆盖=[]；//记录有关覆盖的信息（由“addOverlay”填写）
var drawOrder=0；//最上面覆盖层的drawOrder值
谷歌加载（“地球”，“1”）；
功能点（横向、纵向）{
this.lat=lat；
this.lon=lon；
}
功能叠加（地面叠加、点、绘图顺序）{
this.overlay=groundOverlay；//KML对象
this.points=points；//点数组（覆盖的顶点）
this.drawOrder=drawOrder；//整数，最高显示最高显示
}
Overlay.prototype.hitTest=函数（lat，lon）{//如果lat/lon在Overlay内，则返回true
//基于https://stackoverflow.com/questions/217578/point-in-polygon-aka-hit-test
var isInside=假；
var minLon=this.points[0]。lon，maxLon=this.points[0]。lon；
var minLat=this.points[0]。lat，maxLat=this.points[0]。lat；
对于（var n=1；nmaxLon | | latmaxLat）
返回false；
变量i=0，j=this.points.length-1；
对于（i，j；ilat）！=（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；
返回isInside；
}
函数init（）{
createInstance（'map3d'，initCB，failureCB）；
}
函数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偏移=0.004；
var la=ge.createLookAt（“”）；//定位摄像机
la.set（纬度，经度，0，相对地面的高度，0，30，2000）；
ge.getView（）.setAbstractView（la）；
for（var i
// 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
};
<!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>