รูปร่างและเส้น

เลือกแพลตฟอร์ม Android iOS

ผลิตภัณฑ์หรือฟีเจอร์นี้อยู่ในเวอร์ชันตัวอย่าง (ก่อน GA) ผลิตภัณฑ์และฟีเจอร์ก่อนเวอร์ชันสำหรับผู้ใช้ทั่วไปอาจมีการรองรับที่จำกัด และการเปลี่ยนแปลงผลิตภัณฑ์และ ฟีเจอร์ก่อนเวอร์ชันสำหรับผู้ใช้ทั่วไปอาจไม่เข้ากันกับผลิตภัณฑ์และฟีเจอร์ก่อนเวอร์ชันสำหรับผู้ใช้ทั่วไปอื่นๆ ข้อเสนอก่อนเปิดให้ใช้งานทั่วไปอยู่ภายใต้ข้อกำหนดเฉพาะบริการของ Google Maps Platform ดูข้อมูลเพิ่มเติมได้ที่คำอธิบายเกี่ยวกับสถานะการเปิดตัว

คุณเพิ่มรูปร่างต่างๆ ลงในแผนที่ได้ รูปร่างคือออบเจ็กต์บนแผนที่ที่เชื่อมโยงกับ ระบบพิกัด LatLng แผนที่ 3 มิติแบบสมจริงใน Maps JavaScript API รองรับการเพิ่มเส้นและรูปหลายเหลี่ยมลงในแผนที่

เส้นประกอบ

หากต้องการวาดเส้นบนแผนที่ ให้ใช้ Polyline คลาส Polyline3DElement กำหนดการวางซ้อนเชิงเส้นของส่วนของเส้นที่เชื่อมต่อกันบนแผนที่ ออบเจ็กต์ A Polyline ประกอบด้วยอาร์เรย์ของLatLngสถานที่ และสร้าง ชุดของส่วนของเส้นที่เชื่อมต่อสถานที่เหล่านั้นตามลำดับ

เพิ่มโพลีไลน์

Polylineตัวสร้างจะใช้ชุดPolyline3DElementOptionsที่ระบุ LatLngพิกัดของเส้นและชุดรูปแบบเพื่อปรับ ลักษณะการทำงานของภาพของ Polyline

ออบเจ็กต์ Polyline จะวาดเป็นชุดของส่วนตรงบนแผนที่ คุณสามารถ ระบุสี ความกว้าง ความทึบ ความสูง และตัวเลือกการจัดรูปแบบเรขาคณิตที่กำหนดเอง สำหรับเส้นขีดของเส้นภายใน Polyline3DElementOptions เมื่อ สร้างเส้น หรือจะเปลี่ยนพร็อพเพอร์ตีเหล่านั้นหลังจากสร้างก็ได้ Polyline รองรับรูปแบบการขีดต่อไปนี้

• 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();

เส้นประกอบแบบอินเทอร์แอกทีฟ

ตัวอย่างต่อไปนี้จะเปลี่ยนสีเส้นของ Polyline หลังจากลงทะเบียน เหตุการณ์คลิก

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 สามารถอธิบายรูปร่างที่ซับซ้อนได้ ซึ่งรวมถึง

• พื้นที่ที่ไม่ต่อเนื่องหลายแห่งซึ่งกำหนดโดยรูปหลายเหลี่ยมเดียว
• พื้นที่ที่มีรู
• จุดตัดของพื้นที่อย่างน้อย 1 แห่ง

หากต้องการกำหนดรูปร่างที่ซับซ้อน คุณต้องใช้รูปหลายเหลี่ยมที่มีหลายเส้นทาง

เพิ่มรูปหลายเหลี่ยม

เนื่องจากพื้นที่รูปหลายเหลี่ยมอาจมีเส้นทางแยกกันหลายเส้น พร็อพเพอร์ตี้ Polygon object's paths จึงระบุอาร์เรย์ของอาร์เรย์ โดยแต่ละอาร์เรย์มีประเภท MVCArray โดยอาร์เรย์แต่ละรายการจะกำหนดลำดับของพิกัด LatLng ที่เรียงตามลำดับแยกกัน

สำหรับรูปหลายเหลี่ยมพื้นฐานที่มีเส้นทางเดียว คุณสามารถสร้าง Polygon ได้โดยใช้อาร์เรย์เดียวของพิกัด LatLng แผนที่ 3 มิติแบบสมจริงใน 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();