このページは Cloud Translation API によって翻訳されました。

シェイプとライン

プラットフォームを選択: Android iOS

地図にはさまざまなシェイプを追加できます。シェイプは地図上のオブジェクトであり、LatLng 座標系に紐付けされています。Maps JavaScript API の Photorealistic 3D Maps では、地図に線とポリゴンを追加できます。

ポリライン

地図上にラインを描画するにはポリラインを使用します。Polyline3DElement クラスは、地図上で連結された一連の線分からなる線形オーバーレイを定義します。Polyline オブジェクトは LatLng 位置の配列で構成され、これらの位置を決まった順序で連結する一連の線分を作成します。

ポリラインを追加する

Polyline コンストラクタはラインの LatLng 座標を指定する一連の Polyline3DElementOptions と一連のスタイルを受け取り、ポリラインの視覚的な動作を調整します。

ポリラインオブジェクトは、一連の直線セグメントとして地図上に描画されます。ラインの構成時に Polyline3DElementOptions 内で、ラインストロークの色、幅、不透明度、高さ、ジオメトリックスタイル設定オプションをカスタムで指定できます。または、構成後にこれらのプロパティを変更できます。ポリラインがサポートしているストロークスタイルは次のとおりです。

outerColor: "#FFFFFF" 形式の 16 進数 HTML カラー。
outerWidth: 0.0～1.0 の数値。strokeWidth の割合として解釈されます。
strokeColor: "#FFFFFF" 形式の 16 進数 HTML カラー。
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 オブジェクトと似ています。ポリゴンは、ストロークと塗りつぶしにより描画されます。ポリゴンの縁（ストローク）の色と幅、および閉じられた領域（塗りつぶし）の色と不透明度をカスタムで定義できます。色は 16 進数の HTML 形式で指定します。色名はサポートされていません。

Polygon オブジェクトを使うと、次のような複雑なシェイプを描画できます。

単一のポリゴンで定義される、隣接しない複数の領域。
中に穴がある領域。
1 つ以上の領域の共通部分。

複雑なシェイプを定義するには、複数のパスを持つポリゴンを使用します。

ポリゴンを追加する

ポリゴンの領域には複数の個別のパスが含まれている場合があるため、Polygon オブジェクトの paths プロパティでは配列の配列を指定します。各配列のタイプは MVCArray です。各配列では、順序が指定された一連の LatLng 座標が個別に定義されます。

1 つのパスのみで構成される基本的なポリゴンの場合、単一の LatLng 座標配列を使用して Polygon を構成できます。Maps JavaScript API の Photorealistic 3D Maps では、構成時にこの配列を 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();

シェイプとライン コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。