Şekiller ve çizgiler

Platform seçin: Android iOS

Haritanıza çeşitli şekiller ekleyebilirsiniz. Şekil, harita üzerinde LatLng koordinat sistemine bağlı bir nesnedir. Maps JavaScript API'deki 3D haritalar, haritaya çizgi ve poligon eklemeyi destekler.

Çoklu çizgiler

Haritanızda çizgi çizmek için çoklu çizgi kullanın. Polyline3DElement sınıfı, harita üzerinde bağlı çizgi segmentlerinin doğrusal bir yer paylaşımını tanımlar. Polyline3DElement nesnesi, LatLng konumdan oluşan bir diziden oluşur ve bu konumları sıralı bir şekilde bağlayan bir dizi çizgi segmenti oluşturur.

Çoklu çizgi ekleme

Polyline3DElement oluşturucusu, çizginin LatLng koordinatlarını belirten bir Polyline3DElementOptions kümesi ve çoklu çizginin görsel davranışını ayarlamak için bir stil kümesi alır.

Çoklu çizgi nesneleri, harita üzerinde bir dizi düz segment olarak çizilir. Çizginizi oluştururken Polyline3DElementOptions içinde çizginin konturu için özel renkler, genişlikler, opaklıklar, yükseklikler ve geometrik stil seçenekleri belirtebilir veya oluşturduktan sonra bu özellikleri değiştirebilirsiniz. Çoklu çizgi, aşağıdaki kontur stillerini destekler:

• outerColor: "#FFFFFF" biçiminde onaltılık bir HTML rengi.
• outerWidth: 0.0 ile 1.0 arasında, strokeWidth'nin yüzdesi olarak yorumlanan sayısal bir değer.
• strokeColor: "#FFFFFF" biçiminde onaltılık bir HTML rengi.
• strokeWidth: Çizginin piksel cinsinden genişliği.
• geodesic: Çokgenin kenarlarının Dünya'nın eğriliğini mi takip edeceği yoksa düz çizgiler olarak mı çizileceği.
• altitudeMode: Koordinatlardaki yükseklik bileşenlerinin nasıl yorumlandığı
• drawsOccludedSegments: Çokgenin nesneler (ör. binalar) tarafından gizlenen kısımlarının çizilip çizilmeyeceğini belirten bir boole değeri.
• extruded: Çoklu çizginin zemine bağlanıp bağlanmayacağını gösteren boole değeri.

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',
    });

    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

Etkileşimli çoklu çizgiler

Aşağıdaki örnekte, bir tıklama etkinliği kaydedildikten sonra çoklu çizginin drawsOccludedSegments özelliği açılıp kapatılır.

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',
    });

    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

Poligonlar

Poligon, bir dizi koordinatla tanımlanan kapalı bir yol (veya döngü) ile çevrili bir alanı temsil eder. Polygon3DElement nesneleri, sıralı bir koordinat dizisinden oluşmaları bakımından Polyline3DElement nesnelerine benzer. Poligonlar, kontur ve dolguyla çizilir. Çokgenin kenarı (çizgi) için özel renkler ve genişlikler, kapalı alan (dolgu) için özel renkler ve opaklıklar tanımlayabilirsiniz. Renkler onaltılık HTML biçiminde belirtilmelidir. Renk adları desteklenmez.

Polygon3DElement nesneleri, aşağıdakiler de dahil olmak üzere karmaşık şekilleri tanımlayabilir:

• Tek bir poligonla tanımlanan birden fazla bitişik olmayan alan.
• Delikli alanlar.
• Bir veya daha fazla alanın kesişimleri.

Karmaşık bir şekil tanımlamak için birden fazla yolu olan bir poligon kullanırsınız.

Poligon ekle

Çokgen bir alan birkaç ayrı yol içerebileceğinden Polygon3DElement nesnesinin yollar özelliği, bir dizi dizisi belirtir. Her bir dizi, sıralı LatLng koordinatlarından oluşan ayrı bir diziyi tanımlar.

Yalnızca bir yoldan oluşan temel poligonlar için tek bir LatLng koordinat dizisi kullanarak Polygon3DElement oluşturabilirsiniz. Maps JavaScript API'deki 3D haritalar, diziyi path özelliğinde depolarken oluşturma sırasında bir dizi dizisine dönüştürür.

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',
    });

    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

Etkileşimli poligonlar

Aşağıdaki örnekte, bir tıklama etkinliği kaydedildikten sonra çokgenin iç ve dış renkleri değiştirilmektedir.

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',
    });

    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