Question

我已将历史地图图像加载到Google Earth Pro中，并调整了其位置，对其进行了拉伸和旋转，直到其与地面合理对齐为止。

我从Google Earth中将其保存为KML并上传，这样KML和image都可以公开获得

KML file复制如下。它包括旋转，颜色包括alpha分量。

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

我尝试将图像直接作为GroundOverlay加载，但这在Google Maps 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://stackoverflow.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中不受支持，有关支持的元素，请参见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 Maps支持大多数（但不是全部）KML规范，不幸的是<rotation>标签是其中之一。文档中提供了有关Maps支持的KML的详细信息： https://developers.google.com/maps/documentation/javascript/kmllayer

另一种选择是将地图图像放入QGIS之类的GIS软件包中，进行地理参考并在其中旋转，然后导出N / S / E / W对齐（未旋转）并包含透明填充的较大图像。考虑到轮换。这样，您可以通过KML将其添加到地图中，而无需旋转。同样，您可以将透明度直接添加到图像文件中。

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

2 个答案: