Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

シェイプとライン

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

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

ポリライン

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

ポリラインを追加する

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

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

outerColor: "#FFFFFF" 形式の 16 進数 HTML カラー。
outerWidth: 0.0～1.0 の数値。strokeWidth の割合として解釈されます。
strokeColor: "#FFFFFF" 形式の 16 進数 HTML カラー。
strokeWidth: ラインの幅（ピクセル単位）。
geodesic: ポリゴンのエッジが地球の曲率に沿っているか、直線として描画されるか。
altitudeMode: 座標の高度コンポーネントの解釈方法
drawsOccludedSegments: オブジェクト（建物など）によって隠されているポリゴンの部分を描画するかどうかを示すブール値。
extruded: ポリラインを地面に接続するかどうかを示すブール値。

let map;
async function init() {
    const { Map3DElement, Polyline3DElement } =
        await google.maps.importLibrary('maps3d');

    map = new Map3DElement({
        center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
        range: 3362.87,
        tilt: 64.01,
        heading: 25.0,
        mode: 'SATELLITE',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);

    const polyline = new Polyline3DElement({
        path: [
            { 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 },
        ],
        strokeColor: 'blue',
        outerColor: 'white',
        strokeWidth: 10,
        outerWidth: 0.4,
        altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height).
        drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way.
    });

    map.append(polyline);
}

void init();index.js

インタラクティブポリライン

次の例では、クリックイベントを登録した後、ポリラインの drawsOccludedSegments プロパティを切り替えます。

let map;
async function init() {
    const { Map3DElement, Polyline3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    map = new Map3DElement({
        center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
        range: 3362.87,
        tilt: 64.01,
        heading: 25.0,
        mode: 'SATELLITE',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);

    const polyline = new Polyline3DInteractiveElement({
        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 },
        ],
        strokeColor: 'blue',
        outerColor: 'white',
        strokeWidth: 10,
        outerWidth: 0.4,
        altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height).
        drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way.
    });

    polyline.addEventListener('gmp-click', function () {
        // Toggle whether the line draws occluded segments.
        this.drawsOccludedSegments = !this.drawsOccludedSegments;
    });

    map.append(polyline);
}

void init();index.js

ポリゴン

ポリゴンは閉じられたパス（またはループ）により囲まれた領域を表し、一連の座標により定義されます。 Polygon3DElement オブジェクトは、指定された順序の一連の座標で構成されている点で Polyline3DElement オブジェクトと似ています。ポリゴンは、ストロークと塗りつぶしにより描画されます。ポリゴンの縁（ストローク）のカスタムカラーと太さ、囲まれる領域（塗りつぶし）のカスタムカラーと不透明度を定義できます。色は、16 進数値の HTML 形式で指定する必要があります。色名はサポートされていません。

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

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

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

ポリゴンを追加する

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

1 つのパスのみで構成される基本的なポリゴンの場合、単一の LatLng 座標配列を使用して Polygon3DElement を構成できます。Maps JavaScript API の 3D 地図では、構成時にこの配列を path プロパティに格納する際、配列の配列に変換されます。

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

    const map3DElement = new Map3DElement({
        center: { lat: 40.6842, lng: -74.0019, altitude: 1000 },
        heading: 340,
        tilt: 70,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    const polygonOptions = {
        strokeColor: '#0000ff80',
        strokeWidth: 8,
        fillColor: '#ff000080',
        drawsOccludedSegments: false,
    };

    const examplePolygon = new Polygon3DElement(polygonOptions);

    examplePolygon.path = [
        { lat: 40.7144, lng: -74.0208 },
        { lat: 40.6993, lng: -74.019 },
        { lat: 40.7035, lng: -74.0004 },
    ];

    map3DElement.append(examplePolygon);

    document.body.append(map3DElement);
}

void init();index.js

インタラクティブポリゴン

次の例では、クリックイベントを登録した後、ポリゴンの内側と外側の色を変更します。

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

    const map = new Map3DElement({
        center: { lat: 40.6842, lng: -74.0019, altitude: 1000 },
        heading: 340,
        tilt: 70,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);

    const polygonOptions = {
        strokeColor: '#0000ff80',
        strokeWidth: 8,
        fillColor: '#ff000080',
        drawsOccludedSegments: false,
    };

    const examplePolygon = new Polygon3DInteractiveElement(polygonOptions);

    examplePolygon.path = [
        { lat: 40.7144, lng: -74.0208 },
        { lat: 40.6993, lng: -74.019 },
        { lat: 40.7035, lng: -74.0004 },
        { lat: 40.7144, lng: -74.0208 },
    ];

    examplePolygon.addEventListener('gmp-click', function (event) {
        // change the color of the polygon stroke and fill colors to a random alternatives!
        this.fillColor = randomizeHexColor(this.fillColor);
        this.strokeColor = randomizeHexColor(this.strokeColor);
        console.log(event);
    });

    map.append(examplePolygon);
}

function randomizeHexColor(originalHexColor) {
    console.log(originalHexColor);
    const alpha = originalHexColor.substring(7);

    // Generate random values for Red, Green, Blue (0-255)
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);

    console.log(r + ' ' + g + ' ' + b);

    // Convert decimal to 2-digit hex, padding with '0' if needed
    const rHex = ('0' + r.toString(16)).slice(-2);
    const gHex = ('0' + g.toString(16)).slice(-2);
    const bHex = ('0' + b.toString(16)).slice(-2);

    // Combine parts: '#' + random RGB + original Alpha (if any)
    return `#${rHex}${gHex}${bHex}${alpha}`;
}

void init();index.js

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