Cbs Panorama

Cbs için geliştirilmiş panorama kullanım aracı.

Script Dosyasını Ekleme

JavaScript

  GET https://cbspanorama.ibb.gov.tr/assets/CbsPanorama.js

Fonksiyonlar

OpenPanoramaOnLocation(x, y, orientation)

x,y : Açılması istenen noktanın EPSG:4326 koordinatları

orientation {yaw: number, pitch: number, fov: number}: Bakış parametreleri, yaw yatay bakış açısı, pitch: dikey bakış açısı, fov görüş açısı

OpenPanoramaFrame()

Panorama penceresini açar

HidePanoramaFrame()

Panorama penceresini saklar

ConfigureMapLibreMap(map, maplibregl)

map : maplibre ile oluşturulan map objesi

maplibregl : maplibre kütüphanesi

Maplibre üzerinde haritadan tıklaıp panorama açma, görüş ikonunun renderlanması gibi fonksiyonların konfigürasyonunu yapar.

Reset()

Panorama objesini sıfırlar ve sonradan yeniden kullanılabilecek hale getirir

GetOrientation()

En son bakılan görseldeki bakış parametrelerini döner. {yaw: number, pitch: number, fov: number}

ConfigurePanorama(props)

Props: içerisinde parametreleri barındıran obje, parametreler:

token: cbs tarafından verilen token

environment: "development", "test" veya "production"

panoramaType: default - 2013-2018, "2018" - sadece 2018 görselleri

panoramaContainerId: panorama yüklenecek container div'i. default - "panorama-container"

panoramaIframeId: Panorama iframe div'i. default - "panorama-iframe"

panoramaCloseButtonId: Panorama kapatma butonunun id'si. default - "panorama-close-button"

mapClickEnabled: Haritaya basılarak panorama açılma durumu. Eğer açılacaksa, default olarak id'si "panorama-checkbox" olan checkbox checked olduğu durumda tıklamalar çalışır. checkbox id'si özelleştirilmek istenirse:

panoramaCheckBoxElementId: checkBox'un id'si. default - "panorama-checkbox"

markerImage: Haritaya basılacak olan görselin url adresi.

keyboardControlsEnabled: Panorama içerisinde yön tuşları + WASD ile ilerleme

orientation {yaw: number, pitch: number, fov: number}: Panorama ilk oluşturulduğunda başlangıç bakış parametreleri

coordinates [x,y]: Panorama ilk oluşturulduğunda açılacak nokta

Kullanım/Örnekler

Html İmport

<script src="https://cbspanorama.ibb.gov.tr/assets/CbsPanorama.js"></script>
<div class="toggle-button last" id="panorama-toggle">
    <input type="checkbox" id="panorama-checkbox" name="panorama-click" />
    <label for="panorama-click">Open Panorama On Click</label>
</div>
<div id="panorama-container"">
    <div id="panorama-top-bar">
        <div>
            <button id="panorama-close-button">Close Panorama</button>
        </div>
    </div>
    <iframe id="panorama-iframe" src=""></iframe>
</div>

// Panorama Konfigürasyon
PanoramaModule.Panorama.ConfigurePanorama({
    environment: 'production',
    panoramaType:'2018',
    token: '00000000-0000-0000-0000-000000000000',
    mapClickEnabled: true
});

// Maplibre konfigürasyon
const map = new maplibregl.Map({
    // ...
});
map.on('load', async function () {
    // ...
    PanoramaModule.Panorama.ConfigureMapLibreMap(map, maplibregl);
    // ...
}