如何在 Google Maps v3 中旋转包含 GroundOverlay 的 KML 图层

Question

我已将历史地图图像加载到 Google 地球专业版并调整其位置、拉伸和旋转它，直到它与地面合理对齐。

来自 Google Earth 我将其保存为 KML 并上传，因此 KML 和 image 都是公开可用的

下面复制KML file。它包括一个旋转，并且颜色包括一个 alpha 分量。

但是，图像没有旋转并且 alpha 被忽略 - 因此图像是不透明的。

我尝试将图像直接加载为 GroundOverlay，但这在 google 地图 api v3.

中没有旋转选项

我的问题是如何通过旋转将图像叠加在地图上以及如何使其部分透明？

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: -37.83433865, lng:  144.96147273999998 }
  });

  var ctaLayer = new google.maps.KmlLayer({
    url: 'https://storage.googleapis.com/historic_map_overlays/MMBW_1264.kml',
    map: map
  });
}

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>https://whosebug.com/questions/ask#

    <?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<GroundOverlay>
    <name>MMBW_1264</name>
    <color>ccffff80</color>
    <Icon>
        <href>https://storage.googleapis.com/historic_map_overlays/DetailPlan_1264_alpha.jpg</href>
        <viewBoundScale>0.75</viewBoundScale>
    </Icon>
    <LatLonBox>
        <north>-37.784899</north>
        <south>-37.788269</south>
        <east>144.996226</east>
        <west>144.989129</west>
        <rotation>27.57004115033846</rotation>
    </LatLonBox>
</GroundOverlay>
</kml>

Answer 1

相关问题：Unable to rotate kml layer

<rotation/> 在 KmlLayer, see https://developers.google.com/maps/documentation/javascript/kmllayer#supported-elements 中不受支持的元素

一个选项是支持 <GroundOverlay> <rotation> 标记的第三方 KML 解析器 geoxml3。（免责声明：我目前是维护者）。

example with your KML

代码片段：

function initMap() {
  var map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: {
      lat: 0,
      lng: 0
    },
    zoom: 0
  });
  infowindow = new google.maps.InfoWindow({});

  var geoXml = new geoXML3.parser({
    map: map,
    infoWindow: infowindow,
    singleInfoWindow: true,
  });
  geoXml.parseKmlString(kmlData);
}
google.maps.event.addDomListener(window, 'load', initMap);

var kmlData = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"><GroundOverlay><name>MMBW_1264</name><color>ccffff80</color><Icon>        <href>https://storage.googleapis.com/historic_map_overlays/DetailPlan_1264_alpha.jpg</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>-37.784899</north>   <south>-37.788269</south><east>144.996226</east><west>144.989129</west> <rotation>27.57004115033846</rotation></LatLonBox></GroundOverlay></kml>';

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
}

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3@master/kmz/ZipFile.complete.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3@master/kmz/geoxml3.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3@master/ProjectedOverlay.js"></script>
<div id="map_canvas"></div>

Answer 2

如其他答案所示，Google 地图支持大部分但不是全部 KML 规范，不幸的是 <rotation> 标签是不受支持的内容之一。有关地图支持的 KML 的详细信息，请参阅文档： https://developers.google.com/maps/documentation/javascript/kmllayer

另一种选择可能是将您的地图图像放入 QGIS 等 GIS 包中，进行地理配准并在那里旋转，然后导出 N/S/E/W 对齐 (un-rotated) 的更大图像，并包括透明填充以说明旋转。这样您就可以通过 KML 将其添加到您的地图中，而不需要旋转。此外，通过这种方式，您可以将透明度直接添加到图像文件中。

如何在 Google Maps v3 中旋转包含 GroundOverlay 的 KML 图层

How to rotate a KML Layer containing a GroundOverlay in Google Maps v3

kml

google-earth

google-maps-api-3