Как повернуть слой KML, содержащий GroundOverlay в Google Maps v3 - PullRequest
Новая
       45

Как повернуть слой KML, содержащий GroundOverlay в Google Maps v3

0 голосов
/ 08 мая 2019

Я загрузил изображение исторической карты в Google Планета Земля Про и отрегулировал его положение, растянул и повернул его, пока он не сравнится с землей достаточно хорошо.

Из Google Планета Земля я сохранил его как KML и загрузил его, чтобы и KML, и изображение были общедоступными

Файл KML скопирован ниже. Включает вращение, а цвет включает альфа-компонент.

Однако изображение не поворачивается и альфа игнорируется, поэтому изображение непрозрачно.

Я пытался загрузить изображение напрямую как 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>

Ответы [ 2 ]

1 голос
/ 08 мая 2019

Смежный вопрос: Невозможно повернуть слой kml

<rotation/> не поддерживается в KmlLayer , см. https://developers.google.com/maps/documentation/javascript/kmllayer#supported-elements для поддерживаемых элементов

Одним из вариантов будет сторонний анализатор KML geoxml3 , который поддерживает тег <GroundOverlay> <rotation>.(Отказ от ответственности: я в настоящее время сопровождающий).

пример с вашим 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>
0 голосов
/ 08 мая 2019

Как указано в другом ответе, Google Maps поддерживает большинство, но не все спецификации KML, а тег <rotation>, к сожалению, является одной из тех вещей, которые не поддерживаются. Подробная информация о том, что KML поддерживается в Картах, содержится в документации: https://developers.google.com/maps/documentation/javascript/kmllayer

Другой вариант может заключаться в том, чтобы перенести изображение вашей карты в ГИС-пакет, такой как QGIS, привязать и повернуть его там, а затем экспортировать увеличенное изображение, выровненное по N / S / E / W (не повернутое) и включающее прозрачные отступы. для учета вращения. Таким образом, вы можете добавить его на карту через KML и не требовать поворота. Кроме того, таким образом, вы можете добавить прозрачность непосредственно в файл изображения.

...