تسوية المجسّم الثلاثي الأبعاد

يمكنك تسوية مناطق معيّنة من الخريطة لإزالة المباني والمنشآت والنباتات الثلاثية الأبعاد. في حين أنّ تسوية الشبكة تحافظ على الشكل الهندسي الأساسي للتضاريس (التلال والوديان)، فإنّها تزيل التشويش الناتج عن الأشجار والمباني والأشياء من صنع الإنسان. يؤدي ذلك إلى إنشاء مساحة نظيفة لوضع نماذج ثلاثية الأبعاد أو علامات أو طبقات بيانات مخصّصة بدون تداخل مرئي من ميزات الخريطة الحالية.

في ما يلي مثال على خريطة تتضمّن منطقة محدّدة تم تسويتها:

TypeScript

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

تجربة العيّنة

تسوية منطقة

يوضّح المثال التالي كيفية تمرير مسار إحداثيات خطوط الطول والعرض إلى أداة التسوية:

<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>

إلغاء تسوية منطقة معيّنة

يوضّح المثال التالي كيفية إزالة مساحة من مضلّع (باستخدام 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>

المزايا الرئيسية

  • التخصيص: أزِل هندسة الخريطة التلقائية لإتاحة مساحة لنماذجك الثلاثية الأبعاد.
  • الوضوح: يجب توفير عرض واضح وغير محجوب للمضلّعات والخطوط المتعددة، مثل المسارات التفصيلية، مباشرةً على سطح الخريطة.
  • مدى رؤية الكاميرا: تجنَّب المباني أو الأشجار التي قد تعيق شاشة الكاميرا وتمنعك من رؤية نقطة التركيز.