স্থানগুলি UI কিট : একটি রেডি-টু-ব্যবহারের লাইব্রেরি যা কাস্টমাইজেশন এবং কম-কোড বিকাশের জন্য জায়গা প্রদান করে। এটি ব্যবহার করে দেখুন, এবং আপনার UI কিট অভিজ্ঞতাতে আপনার ইনপুট শেয়ার করুন।

এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

ক্যামেরার অবস্থান নিয়ন্ত্রণ করুন

মানচিত্রের দৃশ্যটিকে একটি ক্যামেরা হিসেবে মডেল করা হয়েছে যা একটি সমতল তলের উপর থেকে নিচের দিকে তাকায়। ক্যামেরার অবস্থান (এবং ফলস্বরূপ মানচিত্রের রেন্ডারিং) নিম্নলিখিত প্রোপার্টিগুলোর মাধ্যমে নির্দিষ্ট করা হয়: latitude , longitude , altitude , heading , tilt , range , এবং fov ।

ক্যামেরার টার্গেট হলো ম্যাপের কেন্দ্রবিন্দুর অবস্থান, যা অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্ক হিসাবে নির্দিষ্ট করা হয়। আপনি দুইভাবে ক্যামেরার অবস্থান নির্দিষ্ট করতে পারেন:

টার্গেট পয়েন্ট দ্বারা : ক্যামেরাটি ম্যাপের কোন স্থানাঙ্কের দিকে মুখ করে থাকবে তা নির্দিষ্ট করতে center প্রপার্টি ব্যবহার করুন। কোনো ল্যান্ডমার্ক বা এলাকা ফোকাসে আছে কিনা তা নিশ্চিত করতে চাইলে এটি সবচেয়ে ভালো কাজ করে।
ক্যামেরা স্থানাঙ্ক দ্বারা : ক্যামেরাকে নির্দিষ্ট অক্ষাংশ, দ্রাঘিমাংশ এবং উচ্চতা স্থানাঙ্কে স্থাপন করতে cameraPosition প্রপার্টি ব্যবহার করুন। একটি সুনির্দিষ্ট ভিউপয়েন্ট নির্ধারণের জন্য এটি আদর্শ।

যৌক্তিকভাবে, center এবং cameraPosition পরস্পর সংযুক্ত। আপনি যখন একটি সেট করেন, তখন ক্যামেরার অভিমুখ এবং দূরত্বের উপর ভিত্তি করে অন্যটি স্বয়ংক্রিয়ভাবে গণনা করা হয়। আপনি কোন পজিশনিং পদ্ধতি ব্যবহার করছেন তা নির্বিশেষে, tilt , heading এবং roll এর মতো প্রোপার্টিগুলো ক্যামেরাটি কীভাবে তাক করা হবে তা নিয়ন্ত্রণ করে।

নিম্নলিখিত উদাহরণটি আপনাকে center (ক্যামেরা মানচিত্রের কেন্দ্রের দিকে তাকিয়ে থাকা) এবং cameraPosition (ক্যামেরা মানচিত্রের কেন্দ্রে অবস্থিত) এর মধ্যে টগল করতে দেয়।

সম্পূর্ণ উদাহরণ সোর্স কোড দেখুন

টাইপস্ক্রিপ্ট

async function init(): Promise<void> {
    // Import the needed libraries.
    await google.maps.importLibrary('maps3d');

    const map3DElement = document.querySelector('gmp-map-3d')!;
    const btn = document.getElementById('switch-mode-btn') as HTMLButtonElement;

    const initialCenter = { lat: 40.7860524, lng: -73.9634983, altitude: 0 };
    let isCenterMode = true;

    btn.addEventListener('click', () => {
        if (isCenterMode) {
            // Switch to Camera Position Mode.
            // Place the camera at the marker's location, but 50m up in the air
            map3DElement.cameraPosition = { ...initialCenter, altitude: 50 };
            map3DElement.tilt = 80;

            btn.textContent = 'Switch to Center Mode';
            isCenterMode = false;
        } else {
            // Revert back to Center Mode (looking AT the marker)
            map3DElement.center = initialCenter;
            map3DElement.tilt = 70;
            map3DElement.range = 1500; // Restore the original range value.

            btn.textContent = 'Switch to Camera Position';
            isCenterMode = true;
        }
    });
}

void init();index.ts

জাভাস্ক্রিপ্ট

async function init() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps3d');

    const map3DElement = document.querySelector('gmp-map-3d');
    const btn = document.getElementById('switch-mode-btn');

    const initialCenter = { lat: 40.7860524, lng: -73.9634983, altitude: 0 };
    let isCenterMode = true;

    btn.addEventListener('click', () => {
        if (isCenterMode) {
            // Switch to Camera Position Mode.
            // Place the camera at the marker's location, but 50m up in the air
            map3DElement.cameraPosition = { ...initialCenter, altitude: 50 };
            map3DElement.tilt = 80;

            btn.textContent = 'Switch to Center Mode';
            isCenterMode = false;
        } else {
            // Revert back to Center Mode (looking AT the marker)
            map3DElement.center = initialCenter;
            map3DElement.tilt = 70;
            map3DElement.range = 1500; // Restore the original range value.

            btn.textContent = 'Switch to Camera Position';
            isCenterMode = true;
        }
    });
}

void init();index.js

সিএসএস

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#ui-container {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
}

button {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f8fafc;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

button:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateY(-1px);
}

button:active {
    transform: translateY(0);
}
style.css

এইচটিএমএল

<html>
    <head>
        <title>3D Camera Position</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8" 
            });
        </script>
    </head>

    <body>
        <gmp-map-3d
            center="40.7860524,-73.9634983"
            range="1500"
            tilt="70"
            heading="-150"
            mode="satellite">
            <gmp-marker
                position="40.7860524,-73.9634983"
                altitude-mode="clamp-to-ground"></gmp-marker>
        </gmp-map-3d>

        <div id="ui-container">
            <button id="switch-mode-btn" type="button">
                Switch to Camera Position
            </button>
        </div>
    </body>
</html>index.html

নমুনা চেষ্টা করুন

JSFiddle.net

দৃশ্যক্ষেত্র এবং পরিসীমা

একটি 3D পরিবেশে, 'জুম' ধারণাটি দুটি স্বতন্ত্র প্যারামিটার দ্বারা নিয়ন্ত্রিত হয়: range এবং fov (ফিল্ড অফ ভিউ)। যদিও উভয়ই ম্যাপে বস্তুগুলো কতটা বড় দেখাবে তা প্রভাবিত করে, তারা ভিন্ন ভিন্ন কৌশল ব্যবহার করে তা করে থাকে:

range : ক্যামেরা এবং এর কেন্দ্রবিন্দুর মধ্যকার ভৌত দূরত্ব। রেঞ্জ সমন্বয় করা হলো ক্যামেরাকে কোনো বিষয়বস্তুর কাছে বা দূরে সরানো।
fov : ক্যামেরা লেন্সের উল্লম্ব কোণ, যা ডিগ্রিতে পরিমাপ করা হয়। ফিল্ড অফ ভিউ সামঞ্জস্য করা ক্যামেরার লেন্স পরিবর্তনের সমতুল্য। একটি উচ্চতর মান (৮০ ডিগ্রি পর্যন্ত) ওয়াইড-অ্যাঙ্গেল লেন্সের মতো কাজ করে, যা প্রান্তের বেশি অংশ দেখায়, অন্যদিকে একটি নিম্নতর মান (৫ ডিগ্রি পর্যন্ত) টেলিফটো লেন্সের মতো কাজ করে এবং ফোকাসকে সংকুচিত করে।

নিম্নলিখিত উদাহরণটি আপনাকে পরীক্ষা করে দেখতে সাহায্য করবে যে বিভিন্ন ম্যাপ এবং ক্যামেরা পজিশনিং অপশনগুলো কীভাবে একসাথে কাজ করে। UI স্লাইডার ব্যবহার করে প্যারামিটার সেট করুন, অথবা সরাসরি ম্যাপ এবং ম্যাপ কন্ট্রোলগুলোর সাথে ইন্টারঅ্যাক্ট করুন। ফলাফলস্বরূপ প্যারামিটারগুলো একটি gmp-map-3d এলিমেন্টে যুক্ত হয়, যা আপনি কপি করে পুনরায় ব্যবহার করতে পারেন।