Сгладьте 3D-сетку

Вы можете сгладить определенные участки карты, чтобы удалить трехмерные здания, сооружения и растительность. Сглаживание сетки сохраняет базовую геометрию местности (холмы и долины), но при этом удаляет лишние элементы, такие как деревья, здания и искусственные объекты. Это создает чистое пространство для размещения пользовательских трехмерных моделей, маркеров или слоев данных без визуального помех со стороны существующих элементов карты.

Вот пример карты, на которой выделенная область была выровнена:

Машинопись 

async function initMap(): Promise<void> {
    await google.maps.importLibrary('maps3d');

    const map = document.querySelector('gmp-map-3d') as Element;
    const flattener = document.querySelector('gmp-flattener') as Element;
    map.append(flattener);

    const toggleButton = document.getElementById('toggleButton') as HTMLButtonElement;
    toggleButton.addEventListener('click', () => {
        if (flattener.isConnected) {
            flattener.remove();
            toggleButton.textContent = 'Enable Flattener';
        } else {
            map.append(flattener);
            toggleButton.textContent = 'Disable Flattener';
        }
    });

}

initMap();
index.ts

JavaScript 

async function initMap() {
    await google.maps.importLibrary('maps3d');
    const map = document.querySelector('gmp-map-3d');
    const flattener = document.querySelector('gmp-flattener');
    map.append(flattener);
    const toggleButton = document.getElementById('toggleButton');
    toggleButton.addEventListener('click', () => {
        if (flattener.isConnected) {
            flattener.remove();
            toggleButton.textContent = 'Enable Flattener';
        }
        else {
            map.append(flattener);
            toggleButton.textContent = 'Disable Flattener';
        }
    });
}
initMap();
index.js

CSS 

html,
gmp-map-3d {
  height: 100%;
}

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

.toggleButton {
  background: rgb(235, 235, 235);
  color: black;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

.toggleButton:hover {
  background-color: #007bff;
  color: white;
}
style.css

HTML 

<html>
    <head>
        <title>3D Mesh Flatten</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
    </head>
    <body>
        <gmp-map-3d
            center="40.70304023274898,-73.99453903360259,397.3687221767566"
            heading="-54.63577922139952"
            tilt="65.59195953953744"
            mode="SATELLITE">
            <gmp-flattener path="40.707680607935245,-74.00310353377735,500 40.70829665151717,-74.00193595590612,500 40.7073748659931,-74.00122787224885,500 40.706738652153156,-74.00232125268805,500 40.70738164589913,-74.0028721484274,500"></gmp-flattener>
        </gmp-map-3d>

        <button class="toggleButton" id="toggleButton" type="button">Disable Flattener</button>

        <script>
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
            key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
            v: "beta",
            // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
            // Add other bootstrap parameters as needed, using camel case.
            });
        </script>
    </body>
</html>
index.html

Попробуйте образец

Flatten an area

Следующий пример демонстрирует передачу пути с координатами широты и долготы в инструмент сглаживания:

<gmp-map-3d center="40.707, -74.017, 0" tilt="67.5">
  <gmp-flattener path="40.7144,-74.0208 40.6993,-74.019 40.7035,-74.0004"></gmp-flattener>
</gmp-map-3d>

Unflatten a specific area

Следующий пример демонстрирует удаление области многоугольника (с помощью flattener.innerPaths ) из инструмента сглаживания:

<gmp-map-3d center="40.707, -74.007, 0" tilt="67.5">
  <gmp-flattener id="my-flattener" path="40.7144,-74.0208 40.6993,-74.019 40.7035,-74.0004"></gmp-flattener>
</gmp-map-3d>

<script>
  const flattener = document.getElementById('my-flattener');
  flattener.innerPaths = [
    [
      { lat: 40.71, lng: -74.0175 },
      { lat: 40.703, lng: -74.0165 },
      { lat: 40.7035, lng: -74.006 }
    ],
  ];
</script>

Основные преимущества

  • Настройка: Удалите стандартную геометрию карты, чтобы освободить место для собственных 3D-моделей.
  • Чёткость: Обеспечьте чёткий, ничем не загороженный обзор полигонов и полилиний, таких как подробные маршруты, непосредственно на поверхности карты.
  • Обеспечение видимости камеры: не допускайте, чтобы здания или деревья мешали обзору камеры и загораживали фокус.