شما می توانید برای تعیین نقاط، خطوط، مناطق یا مجموعه ای از اشیاء به نقشه اشیاء اضافه کنید. Maps JavaScript API این اشیاء را همپوشانی می نامد. همپوشانی ها به مختصات طول و عرض جغرافیایی گره خورده اند، بنابراین با کشیدن یا بزرگنمایی نقشه حرکت می کنند.
انواع روکش
Maps 3D Photorealistic در Maps JavaScript API از چندین نوع پوشش مختلف پشتیبانی می کند که می توانید به صورت برنامه نویسی اضافه کنید:
- خطوط روی نقشه با استفاده از چند خط نشان داده می شوند که به صورت دنباله ای مرتب از نقاط متصل شده توسط بخش های خط نشان داده می شوند.
- نواحی با شکل دلخواه روی نقشه با استفاده از چند ضلعی نمایش داده می شوند. مانند چند خط، چند ضلعی ها دنباله ای مرتب از مکان ها هستند. برخلاف چند خط، چند ضلعی ها ناحیه ای را تعریف می کنند که آن را محصور می کنند.
چند خط
Polylines برای نمایش خطوط بر روی نقشه بر اساس یک توالی مرتب شده از مکان ها استفاده می شود.
چند خط اضافه کنید
<gmp-map-3d center="0,-180,15000000">
<gmp-polyline-3d altitude-mode="clamp-to-ground" stroke-color="red" stroke-width="10"></gmp-polyline-3d>
</gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>
<script>
const polyline = document.querySelector('gmp-polyline-3d');
customElements.whenDefined(polyline.localName).then(() => {
polyline.coordinates = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 }
];
});
</script>
یک پلی لاین را بردارید
const polyline = document.querySelector('gmp-polyline-3d');
polyline.remove();
پلی لاین مسدود شده
با استفاده از ویژگی draws-occluded-segments می توانید دید قسمت های مسدود شده را کنترل کنید.
<gmp-map-3d heading="25" range="2500" tilt="45" center="37.7905,-122.3989,165">
<gmp-polyline-3d altitude-mode="relative-to-ground" stroke-color="rgba(25, 102, 210, 0.75)" stroke-width="10"></gmp-polyline-3d>
</gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>
<script>
const polyline = document.querySelector('gmp-polyline-3d');
customElements.whenDefined(polyline.localName).then(() => {
polyline.coordinates = [
{lat: 37.80515638571346, lng: -122.4032569467164},
{lat: 37.80337073509504, lng: -122.4012878349353},
{lat: 37.79925208843463, lng: -122.3976697250461},
{lat: 37.7989102378512, lng: -122.3983408725656},
{lat: 37.79887832784348, lng: -122.3987094864192},
{lat: 37.79786443410338, lng: -122.4066878788802},
{lat: 37.79549248916587, lng: -122.4032992702785},
{lat: 37.78861484290265, lng: -122.4019489189814},
{lat: 37.78618687561075, lng: -122.398969592545},
{lat: 37.7892310309145, lng: -122.3951458683092},
{lat: 37.7916358762409, lng: -122.3981969390652}
];
});
</script>
چند ضلعی ها
چند ضلعی ها برای نمایش نواحی شکل روی نقشه استفاده می شوند. مانند چند خط، چند ضلعی ها دنباله ای مرتب از مکان ها هستند. با این حال، پلیون ها منطقه ای را که در بر می گیرند را مشخص می کنند.
چند ضلعی ساده
<gmp-map-3d center="40.6842,-74.0019,1000" heading="340" tilt="70">
<gmp-polygon-3d altitude-mode="clamp-to-ground" fill-color="#ff0000" stroke-color="rgba(25, 102, 210, 0.75)" stroke-width="8" draws-occluded-segments></gmp-polygon-3d>
</gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>
<script>
const polygon = document.querySelector('gmp-polygon-3d');
customElements.whenDefined(polygon.localName).then(() => {
polygon.outerCoordinates = [
{lat: 40.7144, lng: -74.0208},
{lat: 40.6993, lng: -74.019},
{lat: 40.7035, lng: -74.0004},
{lat: 40.7144, lng: -74.0208}
];
});
</script>
یک چند ضلعی را بردارید
const polygon = document.querySelector('gmp-polygon-3d');
polygon.remove();
چند ضلعی اکسترود شده
<gmp-map-3d center="40.7079,-74.0132,100" heading="30" tilt="55" range="5000">
<gmp-polygon-3d altitude-mode="relative-to-ground" fill-color="#ff0000" fill-opacity="0.5" stroke-color="#0000ff" stroke-width="8" extruded><gmp-polygon-3d>
</gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>
<script>
const polygon = document.querySelector('gmp-polygon-3d');
customElements.whenDefined(polygon.localName).then(() => {
polygon.outerCoordinates = [
{lat: 40.7144, lng: -74.0208, altitude: 1000},
{lat: 40.6993, lng: -74.019, altitude: 1000},
{lat: 40.7035, lng: -74.0004, altitude: 1000},
{lat: 40.7144, lng: -74.0208, altitude: 1000}
];
});
</script>
چند ضلعی با سوراخ داخلی
<gmp-map-3d center="40.7093,-74.0122,10" heading="30" tilt="15" range="5000">
<gmp-polygon-3d altitude-mode="relative-to-ground" fill-color="#ff0000" fill-opacity="0.5" stroke-color="#0000ff" stroke-width="8" extruded><gmp-polygon-3d>
</gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>
<script>
const polygon = document.querySelector('gmp-polygon-3d');
customElements.whenDefined(polygon.localName).then(() => {
polygon.outerCoordinates = [
{lat: 40.7144, lng: -74.0208, altitude: 1000},
{lat: 40.6993, lng: -74.019, altitude: 1000},
{lat: 40.7035, lng: -74.0004, altitude: 1000},
{lat: 40.7144, lng: -74.0208, altitude: 1000}
];
polygon.innerCoordinates = [
[
{lat: 40.71, lng: -74.0175, altitude: 1000},
{lat: 40.703, lng: -74.0165, altitude: 1000},
{lat: 40.7035, lng: -74.006, altitude: 1000},
{lat: 40.71, lng: -74.0175, altitude: 1000}
]
];
});
</script>