Şekiller ve çizgiler

Platform seçin: Android iOS

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

Çoklu çizgiler

Haritanızda çizgi çizmek için çoklu çizgi kullanın. Polyline3DElement sınıfı, haritada bağlı çizgi segmentlerinin doğrusal bir yer paylaşımını tanımlar. Bir Polyline3DElement nesnesi, LatLng konum dizisinden oluşur ve bu konumları sıralı bir şekilde birbirine bağlayan bir dizi çizgi parçası oluşturur.

Çoklu çizgi ekleme

Polyline3DElement Oluşturucu, Polyline3DElementOptions çizginin LatLng koordinatlarını belirten bir dizi Polyline3DElementOptions ve çoklu çizginin görsel davranışını ayarlamak için bir dizi stil alır.

Çoklu çizgi nesneleri, haritada düz segmentler serisi 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 bu özellikleri oluşturma işleminden sonra 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 bir sayısal değerdir. Bu değer, strokeWidth'ün yüzdesi olarak yorumlanır.
  • strokeColor: "#FFFFFF" biçiminde onaltılık bir HTML rengi.
  • strokeWidth: Çizginin piksel cinsinden genişliği.
  • geodesic: Çokgenin kenarlarının yeryüzünün eğriliğini takip edip etmeyeceği veya düz çizgiler olarak çizilip çizilmeyeceği.
  • altitudeMode: Koordinatlardaki yükseklik bileşenlerinin nasıl yorumlandığı
  • drawsOccludedSegments: Çokgenin nesneler (ör. binalar) tarafından kapatılan kısımlarının çizilip çizilmeyeceğini belirten bir boole değeri.
  • extruded: Çoklu çizginin yere bağlanıp bağlanmayacağını gösteren bir 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',
        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();

Etkileşimli çoklu çizgiler

Aşağıdaki örnekte, bir tıklama etkinliği kaydedildikten sonra çoklu çizginin drawsOccludedSegments özelliği değiştirilir.

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

Poligonlar

Poligon, bir dizi koordinatla tanımlanan kapalı bir yolla (veya döngüyle) çevrili bir alanı temsil eder. Polygon3DElement nesneleri, sıralı bir dizideki bir dizi koordinattan oluştuğu için Polyline3DElement nesnelerine benzer. Poligonlar kontur ve dolguyla çizilir. Çokgenin kenarı (kontur) için özel renkler ve genişlikler, kapalı alan (dolgu) için ise ö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ımlanmış, birbirine bitişik olmayan birden fazla alan.
  • Deliklerin olduğu alanlar
  • Bir veya daha fazla alanın kesişimleri.

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

Poligon ekle

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

Yalnızca tek bir yoldan oluşan temel poligonlar için LatLng koordinatlarından oluşan tek bir dizi kullanarak Polygon3DElement oluşturabilirsiniz. Maps JavaScript API'deki 3D Haritalar, path özelliği içinde depolanırken oluşturma sırasında diziyi 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',
        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();

Etkileşimli poligonlar

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

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