اشکال و خطوط

پلتفرم را انتخاب کنید: Android iOS

شما می توانید اشکال مختلفی را به نقشه خود اضافه کنید. شکل یک شی روی نقشه است که به یک سیستم مختصات LatLng گره خورده است. Photorealistic 3D Maps در Maps JavaScript API از افزودن خطوط و چند ضلعی به نقشه پشتیبانی می کند.

چند خط

برای ترسیم یک خط روی نقشه، از چند خط استفاده کنید. کلاس Polyline3DElement یک همپوشانی خطی از بخش های خط متصل را روی نقشه تعریف می کند. یک شی Polyline از آرایه‌ای از مکان‌های LatLng تشکیل شده است و یک سری پاره خط ایجاد می‌کند که آن مکان‌ها را در یک دنباله مرتب به هم متصل می‌کند.

چند خط اضافه کنید

سازنده Polyline مجموعه‌ای از Polyline3DElementOptions را می‌گیرد که مختصات LatLng خط و مجموعه‌ای از سبک‌ها را برای تنظیم رفتار بصری polyline مشخص می‌کند.

اشیاء چند خطی به صورت مجموعه ای از بخش های مستقیم روی نقشه ترسیم می شوند. می‌توانید رنگ‌ها، عرض‌ها، تیرگی‌ها، ارتفاعات و گزینه‌های استایل هندسی سفارشی را برای خط خط در Polyline3DElementOptions هنگام ساخت خط خود مشخص کنید، یا می‌توانید آن ویژگی‌ها را پس از ساخت تغییر دهید. یک پلی لاین از سبک های stroke زیر پشتیبانی می کند:

  • outerColor : یک رنگ HTML هگزادسیمال با فرمت "#FFFFFF" .
  • outerWidth : یک مقدار عددی بین 0.0 و 1.0 که به عنوان درصدی از strokeWidth تفسیر می شود.
  • strokeColor : یک رنگ HTML هگزادسیمال با فرمت "#FFFFFF" .
  • strokeWidth : عرض خط بر حسب پیکسل.
  • geodesic : لبه های پلیون از انحنای زمین پیروی می کنند یا به صورت خطوط مستقیم ترسیم می شوند.
  • altitudeMode : چگونه اجزای ارتفاع در مختصات تفسیر می شوند
  • drawsOccludedSegments : یک بولی که نشان می‌دهد آیا قسمت‌هایی از چندضلعی که توسط اشیا (مانند ساختمان‌ها) پوشیده شده‌اند، باید ترسیم شوند یا خیر.
  • extruded : یک بولی که نشان می دهد آیا پلی لاین باید به زمین وصل شود یا خیر. 
async function init() {
    const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

    const map = new Map3DElement({
      center: { lat: 37.772675996068915, lng: -122.3978382542777, altitude: 2500 },
      tilt: 45,
      heading: 5.9743656,
      mode: MapMode.HYBRID,
    });

    const { Polyline3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polylineOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 10,
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
    }
    const polyline = new google.maps.maps3d.Polyline3DElement(polylineOptions)

    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}
    ];

    map.append(polyline)
    document.body.append(map);
}
init();

چند خطوط تعاملی

مثال زیر پس از ثبت رویداد کلیک، رنگ خط خطی را تغییر می‌دهد.

async function init() {
  const colors = ["red", "blue", "green", "yellow"];

  const { Map3DElement, MapMode, Polyline3DInteractiveElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 0, lng: -180, altitude: 15000000},
    mode: MapMode.HYBRID,
  });

  document.body.append(map);

  const polyline = new Polyline3DInteractiveElement({
    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 }
    ],
    strokeColor: 'red',
    strokeWidth: 10,
  });

  polyline.addEventListener('gmp-click', (event) => {
    polyline.strokeColor = colors[~~(Math.random() * colors.length)];
  });

  map.append(polyline);
}

init();

چند ضلعی ها

یک چند ضلعی نشان دهنده ناحیه ای است که توسط یک مسیر بسته (یا حلقه) محصور شده است که توسط یک سری مختصات تعریف می شود. اشیاء Polygon شبیه به اجسام Polyline هستند زیرا از یک سری مختصات در یک دنباله مرتب تشکیل شده اند. چند ضلعی ها با یک سکته مغزی و یک پر ترسیم می شوند. می توانید رنگ ها و عرض های سفارشی را برای لبه چند ضلعی (سکته مغزی) و رنگ ها و تیرگی های سفارشی را برای ناحیه محصور (پر) تعریف کنید. رنگ ها باید در قالب HTML هگزادسیمال نشان داده شوند. نام رنگ ها پشتیبانی نمی شود.

اشیاء Polygon می توانند اشکال پیچیده را توصیف کنند، از جمله:

  • چندین ناحیه غیر پیوسته که توسط یک چند ضلعی تعریف شده اند.
  • نواحی دارای سوراخ در آنها.
  • تقاطع های یک یا چند منطقه.

برای تعریف یک شکل پیچیده، از یک چند ضلعی با چندین مسیر استفاده می کنید.

یک چند ضلعی اضافه کنید

از آنجایی که یک ناحیه چند ضلعی ممکن است شامل چندین مسیر مجزا باشد، ویژگی مسیرهای شی Polygon آرایه‌ای از آرایه‌ها را مشخص می‌کند، هر کدام از نوع MVCArray . هر آرایه دنباله جداگانه ای از مختصات LatLng مرتب شده را تعریف می کند.

برای چند ضلعی های اصلی که فقط از یک مسیر تشکیل شده اند، می توانید با استفاده از یک آرایه از مختصات LatLng یک Polygon بسازید. نقشه‌های سه‌بعدی فوتورئالیستی در Maps JavaScript API، آرایه را هنگام ذخیره‌سازی در ویژگی outerCoordinates به آرایه‌ای از آرایه‌ها تبدیل می‌کند.

async function init() {
    const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

    const map3DElement = new Map3DElement({
        center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
        range: 1000,
        tilt: 60,
        mode: MapMode.SATELLITE,
    });

    const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polygonOptions = {
        strokeColor: "#EA433580",
        strokeWidth: 4,
        fillColor: "#0000FF80",
        altitudeMode: "ABSOLUTE",
        extruded: true,
        drawsOccludedSegments: true,
    }

    const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);

    towerPolygon.outerCoordinates = [
        { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
        { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
        { lat: 43.643001, lng: -79.3866475, altitude: 600 }
    ];

    map3DElement.append(towerPolygon);
    document.body.append(map3DElement);
}
init();

چند ضلعی های تعاملی

مثال زیر پس از ثبت رویداد کلیک، رنگ ضربه چند ضلعی را تغییر می دهد.

async function init() {
  const colors = ["red", "blue", "green", "yellow"];
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map3DElement = new Map3DElement({
      center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
      range: 1000,
      tilt: 60,
      mode: MapMode.SATELLITE,
  });

  const { Polygon3DInteractiveElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

  const polygonOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 4,
      fillColor: "#0000FF80",
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
  }

  const towerPolygon = new google.maps.maps3d.Polygon3DInteractiveElement(polygonOptions);

  towerPolygon.outerCoordinates = [
      { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
      { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
      { lat: 43.643001, lng: -79.3866475, altitude: 600 }
  ];

    towerPolygon.addEventListener('gmp-click', (event) => {
      towerPolygon.strokeColor = colors[~~(Math.random() * colors.length)];
    });

  map3DElement.append(towerPolygon);

  document.body.append(map3DElement);
}

init();