ফটোরিয়ালিস্টিক 3D টাইলসগুলি OGC স্ট্যান্ডার্ড glTF ফর্ম্যাটে রয়েছে, যার অর্থ আপনি আপনার 3D ভিজ্যুয়ালাইজেশন তৈরি করতে OGC 3D টাইলস স্পেক সমর্থন করে এমন কোনও রেন্ডারার ব্যবহার করতে পারেন৷ উদাহরণস্বরূপ, সিসিয়াম হল 3D ভিজ্যুয়ালাইজেশন রেন্ডার করার জন্য একটি মৌলিক ওপেন সোর্স লাইব্রেরি।
CesiumJS এর সাথে কাজ করুন
CesiumJS হল ওয়েবে 3D ভিজ্যুয়ালাইজেশনের জন্য একটি ওপেন সোর্স জাভাস্ক্রিপ্ট লাইব্রেরি। CesiumJS ব্যবহার সম্পর্কে আরও তথ্যের জন্য, CesiumJS শিখুন দেখুন।
ব্যবহারকারী নিয়ন্ত্রণ
CesiumJS টাইল রেন্ডারারের ব্যবহারকারী নিয়ন্ত্রণের একটি মানক সেট রয়েছে।
| অ্যাকশন | বর্ণনা |
|---|---|
| প্যান ভিউ | বাম ক্লিক করুন এবং টেনে আনুন |
| জুম ভিউ | ডান ক্লিক করুন এবং টেনে আনুন, বা মাউস হুইল স্ক্রোল করুন |
| ভিউ ঘোরান | Ctrl + বাম/ডান ক্লিক করুন এবং টেনে আনুন, অথবা মধ্যম ক্লিক করুন এবং টেনে আনুন |
সর্বোত্তম অনুশীলন
আপনি CesiumJS 3D লোডিং সময় কমাতে নিতে পারেন এমন বেশ কয়েকটি পদ্ধতি রয়েছে। যেমন:
আপনার রেন্ডারিং HTML-এ নিম্নলিখিত বিবৃতি যোগ করে একযোগে অনুরোধগুলি সক্ষম করুন:
Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = <REQUEST_COUNT>REQUEST_COUNTযত বেশি হবে, টাইলস তত দ্রুত লোড হবে৷ যাইহোক, যখনREQUEST_COUNT10-এর বেশি এবং ক্যাশে অক্ষম সহ একটি Chrome ব্রাউজারে লোড করা হয়, তখন আপনি একটি পরিচিত Chrome সমস্যায় পড়তে পারেন৷ বেশিরভাগ ব্যবহারের ক্ষেত্রে, আমরা সর্বোত্তম কার্য সম্পাদনের জন্য 18টির মধ্যেREQUEST_COUNTটি সুপারিশ করি৷বিস্তারিত লেভেল এড়িয়ে যাওয়া সক্ষম করুন। আরও তথ্যের জন্য, এই সিসিয়াম সমস্যাটি দেখুন।
showCreditsOnScreen: true । আরও তথ্যের জন্য, নীতি দেখুন।
রেন্ডারিং মেট্রিক্স
ফ্রেমরেট খুঁজে পেতে, প্রতি সেকেন্ডে কতবার অনুরোধ অ্যানিমেশনফ্রেম পদ্ধতিটি কল করা হয়েছে তা দেখুন।
ফ্রেম লেটেন্সি কীভাবে গণনা করা হয় তা দেখতে, পারফরম্যান্স ডিসপ্লে ক্লাসটি দেখুন।
CesiumJS রেন্ডারার উদাহরণ
আপনি শুধুমাত্র রুট টাইলসেট URL সরবরাহ করে Map Tiles API এর 3D টাইলস সহ CesiumJS রেন্ডারার ব্যবহার করতে পারেন।
সহজ উদাহরণ
নিম্নলিখিত উদাহরণটি CesiumJS রেন্ডারারকে আরম্ভ করে এবং তারপর রুট টাইলসেট লোড করে।
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>CesiumJS 3D Tiles Simple Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
// Enable simultaneous requests.
Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;
// Create the viewer.
const viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: false,
baseLayerPicker: false,
geocoder: false,
globe: false,
// https://cesium.com/blog/2018/01/24/cesium-scene-rendering-performance/#enabling-request-render-mode
requestRenderMode: true,
});
// Add 3D Tiles tileset.
const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",
// This property is needed to appropriately display attributions
// as required.
showCreditsOnScreen: true,
}));
</script>
</body>
requestRenderMode সম্পর্কে তথ্যের জন্য, অনুরোধ রেন্ডার মোড সক্ষম করা দেখুন।
HTML পৃষ্ঠাটি এখানে দেখানো হিসাবে রেন্ডার করে।
স্থান API ইন্টিগ্রেশন
আপনি আরও তথ্য পুনরুদ্ধার করতে Places API এর সাথে CesiumJS ব্যবহার করতে পারেন। আপনি স্থানগুলির ভিউপোর্টে উড়তে স্বয়ংসম্পূর্ণ উইজেট ব্যবহার করতে পারেন৷ এই উদাহরণটি স্থানগুলি স্বয়ংসম্পূর্ণ API ব্যবহার করে, যা এই নির্দেশাবলী অনুসরণ করে সক্ষম হয় এবং মানচিত্র JavaScript API, যা এই নির্দেশাবলী অনুসরণ করে সক্ষম হয়।
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>CesiumJS 3D Tiles Places API Integration Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<label for="pacViewPlace">Go to a place: </label>
<input
type="text"
id="pacViewPlace"
name="pacViewPlace"
placeholder="Enter a location..."
style="width: 300px"
/>
<div id="cesiumContainer"></div>
<script>
// Enable simultaneous requests.
Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;
// Create the viewer.
const viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: false,
baseLayerPicker: false,
requestRenderMode: true,
geocoder: false,
globe: false,
});
// Add 3D Tiles tileset.
const tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",
// This property is required to display attributions as required.
showCreditsOnScreen: true,
})
);
const zoomToViewport = (viewport) => {
viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
viewport.getNorthEast().lng(), viewport.getNorthEast().lat(),
viewport.getSouthWest().lng(), viewport.getNorthEast().lat(),
viewport.getSouthWest().lng(), viewport.getSouthWest().lat(),
viewport.getNorthEast().lng(), viewport.getSouthWest().lat(),
viewport.getNorthEast().lng(), viewport.getNorthEast().lat(),
]),
width: 10,
clampToGround: true,
material: Cesium.Color.RED,
},
});
viewer.flyTo(viewer.entities);
};
function initAutocomplete() {
const autocomplete = new google.maps.places.Autocomplete(
document.getElementById("pacViewPlace"),
{
fields: [
"geometry",
"name",
],
}
);
autocomplete.addListener("place_changed", () => {
viewer.entities.removeAll();
const place = autocomplete.getPlace();
if (!place.geometry || !place.geometry.viewport) {
window.alert("No viewport for input: " + place.name);
return;
}
zoomToViewport(place.geometry.viewport);
});
}
</script>
<script
async=""
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"
></script>
</body>
ঘোরানো ড্রোন ভিউ
আপনি টাইলসেটের মাধ্যমে অ্যানিমেট করার জন্য ক্যামেরা নিয়ন্ত্রণ করতে পারেন। Places API এবং Elevation API-এর সাথে একত্রিত হলে, এই অ্যানিমেশনটি আগ্রহের যেকোন জায়গার একটি ইন্টারেক্টিভ ড্রোন ফ্লাইওভারকে অনুকরণ করে।
এই কোড নমুনাটি আপনাকে সেই জায়গার চারপাশে নিয়ে যায় যা আপনি স্বয়ংসম্পূর্ণ উইজেটে নির্বাচন করেছেন।
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>CesiumJS 3D Tiles Rotating Drone View Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<label for="pacViewPlace">Go to a place: </label>
<input type="text" id="pacViewPlace" name="pacViewPlace" placeholder="Enter a location..." style="width: 300px" />
<div id="cesiumContainer"></div>
<script>
// Enable simultaneous requests.
Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;
// Create the viewer and remove unneeded options.
const viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: false,
baseLayerPicker: false,
homeButton: false,
fullscreenButton: false,
navigationHelpButton: false,
vrButton: false,
sceneModePicker: false,
geocoder: false,
globe: false,
infobox: false,
selectionIndicator: false,
timeline: false,
projectionPicker: false,
clockViewModel: null,
animation: false,
requestRenderMode: true,
});
// Add 3D Tile set.
const tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",
// This property is required to display attributions.
showCreditsOnScreen: true,
})
);
// Point the camera at a location and elevation, at a viewport-appropriate distance.
function pointCameraAt(location, viewport, elevation) {
const distance = Cesium.Cartesian3.distance(
Cesium.Cartesian3.fromDegrees(
viewport.getSouthWest().lng(), viewport.getSouthWest().lat(), elevation),
Cesium.Cartesian3.fromDegrees(
viewport.getNorthEast().lng(), viewport.getNorthEast().lat(), elevation)
) / 2;
const target = new Cesium.Cartesian3.fromDegrees(location.lng(), location.lat(), elevation);
const pitch = -Math.PI / 4;
const heading = 0;
viewer.camera.lookAt(target, new Cesium.HeadingPitchRange(heading, pitch, distance));
}
// Rotate the camera around a location and elevation, at a viewport-appropriate distance.
let unsubscribe = null;
function rotateCameraAround(location, viewport, elevation) {
if(unsubscribe) unsubscribe();
pointCameraAt(location, viewport, elevation);
unsubscribe = viewer.clock.onTick.addEventListener(() => {
viewer.camera.rotate(Cesium.Cartesian3.UNIT_Z);
});
}
function initAutocomplete() {
const autocomplete = new google.maps.places.Autocomplete(
document.getElementById("pacViewPlace"), {
fields: [
"geometry",
"name",
],
}
);
autocomplete.addListener("place_changed", async () => {
const place = autocomplete.getPlace();
if (!(place.geometry && place.geometry.viewport && place.geometry.location)) {
window.alert(`Insufficient geometry data for place: ${place.name}`);
return;
}
// Get place elevation using the ElevationService.
const elevatorService = new google.maps.ElevationService();
const elevationResponse = await elevatorService.getElevationForLocations({
locations: [place.geometry.location],
});
if(!(elevationResponse.results && elevationResponse.results.length)){
window.alert(`Insufficient elevation data for place: ${place.name}`);
return;
}
const elevation = elevationResponse.results[0].elevation || 10;
rotateCameraAround(
place.geometry.location,
place.geometry.viewport,
elevation
);
});
}
</script>
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"></script>
</body>
পলিলাইন এবং লেবেল আঁকুন
এই কোড নমুনা দেখায় কিভাবে একটি মানচিত্রে পলিলাইন এবং লেবেল যোগ করতে হয়। আপনি ড্রাইভিং এবং হাঁটার দিকনির্দেশ দেখাতে, বা সম্পত্তির সীমানা দেখাতে, বা ড্রাইভিং এবং হাঁটার সময়কাল গণনা করতে একটি মানচিত্রে পলিলাইন যুক্ত করতে পারেন। আপনি দৃশ্যটি বাস্তবে রেন্ডার না করেও বৈশিষ্ট্যগুলি পেতে পারেন।
আপনি ব্যবহারকারীদের একটি আশেপাশের একটি কিউরেটেড সফরে নিয়ে যেতে পারেন, অথবা আপনি প্রতিবেশী বৈশিষ্ট্যগুলি দেখাতে পারেন যা বর্তমানে বিক্রি হচ্ছে, এবং তারপরে আপনি দৃশ্যে বিলবোর্ডের মতো 3D বস্তু যুক্ত করতে পারেন৷
আপনি একটি ভ্রমণের সংক্ষিপ্ত বিবরণ দিতে পারেন, আপনি যে বৈশিষ্ট্যগুলি দেখেছেন তা তালিকাভুক্ত করে, ভার্চুয়াল অবজেক্টগুলিতে এই বিবরণগুলি প্রদর্শন করে৷
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>CesiumJS 3D Tiles Polyline and Label Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
<link
href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"
/>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
// Enable simultaneous requests.
Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;
// Create the viewer.
const viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: false,
baseLayerPicker: false,
requestRenderMode: true,
geocoder: false,
globe: false,
});
// Add 3D Tiles tileset.
const tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",
// This property is required to display attributions as required.
showCreditsOnScreen: true,
})
);
// Draws a circle at the position, and a line from the previous position.
const drawPointAndLine = (position, prevPosition) => {
viewer.entities.removeAll();
if (prevPosition) {
viewer.entities.add({
polyline: {
positions: [prevPosition, position],
width: 3,
material: Cesium.Color.WHITE,
clampToGround: true,
classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
},
});
}
viewer.entities.add({
position: position,
ellipsoid: {
radii: new Cesium.Cartesian3(1, 1, 1),
material: Cesium.Color.RED,
},
});
};
// Compute, draw, and display the position's height relative to the previous position.
var prevPosition;
const processHeights = (newPosition) => {
drawPointAndLine(newPosition, prevPosition);
const newHeight = Cesium.Cartographic.fromCartesian(newPosition).height;
let labelText = "Current altitude (meters above sea level):\n\t" + newHeight;
if (prevPosition) {
const prevHeight =
Cesium.Cartographic.fromCartesian(prevPosition).height;
labelText += "\nHeight from previous point (meters):\n\t" + Math.abs(newHeight - prevHeight);
}
viewer.entities.add({
position: newPosition,
label: {
text: labelText,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
pixelOffset: new Cesium.Cartesian2(0, -10),
showBackground: true,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
}
});
prevPosition = newPosition;
};
const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (event) {
const earthPosition = viewer.scene.pickPosition(event.position);
if (Cesium.defined(earthPosition)) {
processHeights(earthPosition);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
</script>
</body>
ক্যামেরার কক্ষপথ
সিসিয়ামে, আপনি বিল্ডিংয়ের সাথে সংঘর্ষ এড়িয়ে ক্যামেরাটিকে আগ্রহের একটি বিন্দুর চারপাশে প্রদক্ষিণ করতে পারেন। বিকল্পভাবে, আপনি যখন বিল্ডিংগুলিকে স্বচ্ছ করতে পারেন যখন ক্যামেরাটি তাদের মাধ্যমে চলে যায়৷
প্রথমে, ক্যামেরাটিকে একটি বিন্দুতে লক করুন, তারপর আপনি আপনার সম্পদ প্রদর্শনের জন্য একটি ক্যামেরা কক্ষপথ তৈরি করতে পারেন৷ আপনি ইভেন্ট লিসেনারের সাথে ক্যামেরার lookAtTransform ফাংশন ব্যবহার করে এটি করতে পারেন, যেমন এই কোড নমুনায় প্রদর্শিত হয়েছে।
// Lock the camera onto a point.
const center = Cesium.Cartesian3.fromRadians(
2.4213211833389243,
0.6171926869414084,
3626.0426275055174
);
const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
viewer.scene.camera.lookAtTransform(
transform,
new Cesium.HeadingPitchRange(0, -Math.PI / 8, 2900)
);
// Orbit around this point.
viewer.clock.onTick.addEventListener(function (clock) {
viewer.scene.camera.rotateRight(0.005);
});
ক্যামেরা নিয়ন্ত্রণ সম্পর্কে আরও তথ্যের জন্য, ক্যামেরা নিয়ন্ত্রণ দেখুন
অবাস্তব জন্য Cesium সঙ্গে কাজ
3D টাইলস API সহ অবাস্তব প্লাগইনের জন্য সিসিয়াম ব্যবহার করতে, নীচের পদক্ষেপগুলি অনুসরণ করুন৷
অবাস্তব প্লাগইনের জন্য সিসিয়াম ইনস্টল করুন।
একটি নতুন অবাস্তব প্রকল্প তৈরি করুন।
Google Photorealistic 3D Tiles API-এর সাথে সংযোগ করুন৷
মেনু থেকে Cesium > Cesium নির্বাচন করে Cesium উইন্ডো খুলুন।
ফাঁকা 3D টাইলস টাইলসেট নির্বাচন করুন।
ওয়ার্ল্ড আউটলাইনারে , এই Cesium3DTileset নির্বাচন করে বিস্তারিত প্যানেল খুলুন।
সিজিয়াম আয়ন থেকে ইউআরএল থেকে উৎস পরিবর্তন করুন।
URLটিকে Google 3D টাইলস URL হিসাবে সেট করুন৷
https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY- অ্যাট্রিবিউশনগুলি সঠিকভাবে প্রদর্শন করতে স্ক্রিনে ক্রেডিট দেখান সক্ষম করুন৷
এই বিশ্ব লোড. যেকোন LatLng-এ যেতে, আউটলাইনার প্যানেলে CesiumGeoreference আইটেমটি নির্বাচন করুন এবং তারপর বিস্তারিত প্যানেলে মূল অক্ষাংশ/দ্রাঘিমাংশ/উচ্চতা সম্পাদনা করুন।
সিসিয়াম ফর ইউনিটির সাথে কাজ করুন
সিসিয়াম ফর ইউনিটির সাথে ফটোরিয়ালিস্টিক টাইলস ব্যবহার করতে, নিচের ধাপগুলি অনুসরণ করুন।
একটি নতুন ইউনিটি প্রকল্প তৈরি করুন।
প্যাকেজ ম্যানেজার বিভাগে একটি নতুন স্কোপড রেজিস্ট্রি যোগ করুন ( সম্পাদক > প্রকল্প সেটিংসের মাধ্যমে)।
নাম: সিজিয়াম
URL: https://unity.pkg.cesium.com
সুযোগ(গুলি): com.cesium.unity
ইউনিটি প্যাকেজের জন্য সিসিয়াম ইনস্টল করুন।
Google ফটোরিয়ালিস্টিক 3D টাইলস API-এর সাথে সংযোগ করুন৷
মেনু থেকে Cesium > Cesium নির্বাচন করে Cesium উইন্ডো খুলুন।
ফাঁকা 3D টাইলস টাইলসেট ক্লিক করুন।
বাম-পাশের প্যানেলে, সোর্সের অধীনে টাইলসেট সোর্স বিকল্পে, ইউআরএল থেকে (সিজিয়াম আয়নের পরিবর্তে) নির্বাচন করুন।
Google 3D টাইলস URL-এ URL সেট করুন।
https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY- অ্যাট্রিবিউশনগুলি সঠিকভাবে প্রদর্শন করতে স্ক্রিনে ক্রেডিট দেখান সক্ষম করুন৷
এই বিশ্ব লোড. যেকোন LatLng-এ যেতে, সিন হায়ারার্কিতে CesiumGeoreference আইটেমটি নির্বাচন করুন এবং তারপর ইন্সপেক্টরে অরিজিন অক্ষাংশ/দ্রাঘিমাংশ/উচ্চতা সম্পাদনা করুন।
deck.gl এর সাথে কাজ করুন
deck.gl , WebGL দ্বারা চালিত, হল একটি ওপেন সোর্স জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যা উচ্চ-কর্মক্ষমতা, বৃহৎ-স্কেল ডেটা ভিজ্যুয়ালাইজেশনের জন্য।
অ্যাট্রিবিউশন
নিশ্চিত করুন যে আপনি টাইলস gltf asset থেকে copyright ক্ষেত্রটি বের করে এবং তারপর রেন্ডার করা ভিউতে এটি প্রদর্শন করে সঠিকভাবে ডেটা অ্যাট্রিবিউশন প্রদর্শন করছেন। আরও তথ্যের জন্য, ডেটা অ্যাট্রিবিউশন প্রদর্শন দেখুন।
deck.gl রেন্ডারার উদাহরণ
সহজ উদাহরণ
নিম্নলিখিত উদাহরণটি deck.gl রেন্ডারারকে আরম্ভ করে এবং তারপর 3D-এ একটি স্থান লোড করে৷ আপনার কোডে, আপনার আসল API কী দিয়ে YOUR_API_KEY প্রতিস্থাপন করতে ভুলবেন না।
<!DOCTYPE html>
<html>
<head>
<title>deck.gl Photorealistic 3D Tiles example</title>
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
<style>
body { margin: 0; padding: 0;}
#map { position: absolute; top: 0;bottom: 0;width: 100%;}
#credits { position: absolute; bottom: 0; right: 0; padding: 2px; font-size: 15px; color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
</style>
</head>
<body>
<div id="map"></div>
<div id="credits"></div>
<script>
const GOOGLE_API_KEY = YOUR_API_KEY;
const TILESET_URL = `https://tile.googleapis.com/v1/3dtiles/root.json`;
const creditsElement = document.getElementById('credits');
new deck.DeckGL({
container: 'map',
initialViewState: {
latitude: 50.0890,
longitude: 14.4196,
zoom: 16,
bearing: 90,
pitch: 60,
height: 200
},
controller: {minZoom: 8},
layers: [
new deck.Tile3DLayer({
id: 'google-3d-tiles',
data: TILESET_URL,
loadOptions: {
fetch: {
headers: {
'X-GOOG-API-KEY': GOOGLE_API_KEY
}
}
},
onTilesetLoad: tileset3d => {
tileset3d.options.onTraversalComplete = selectedTiles => {
const credits = new Set();
selectedTiles.forEach(tile => {
const {copyright} = tile.content.gltf.asset;
copyright.split(';').forEach(credits.add, credits);
creditsElement.innerHTML = [...credits].join('; ');
});
return selectedTiles;
}
}
})
]
});
</script>
</body>
</html>
Google ফটোরিয়ালিস্টিক 3D টাইলগুলির উপরে 2D স্তরগুলিকে কল্পনা করুন৷
deck.gl TerrainExtension অন্যথায় একটি 3D পৃষ্ঠে 2D ডেটা রেন্ডার করে। উদাহরণস্বরূপ, আপনি ফটোরিয়ালিস্টিক 3D টাইলস জ্যামিতির উপরে একটি বিল্ডিং ফুটপ্রিন্টের জিওজেএসএন ড্র্যাপ করতে পারেন।
নিম্নলিখিত উদাহরণে, ফোটোরিয়ালিস্টিক 3D টাইলস পৃষ্ঠের সাথে অভিযোজিত বহুভুজ দিয়ে ভবনগুলির একটি স্তরকে কল্পনা করা হয়েছে।
<!DOCTYPE html>
<html>
<head>
<title>Google 3D tiles example</title>
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
<style>
body { margin: 0; padding: 0;}
#map { position: absolute; top: 0;bottom: 0;width: 100%;}
#credits { position: absolute; bottom: 0; right: 0; padding: 2px; font-size: 15px; color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
</style>
</head>
<body>
<div id="map"></div>
<div id="credits"></div>
<script>
const GOOGLE_API_KEY = YOUR_API_KEY;
const TILESET_URL = `https://tile.googleapis.com/v1/3dtiles/root.json`;
const BUILDINGS_URL = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/google-3d-tiles/buildings.geojson'
const creditsElement = document.getElementById('credits');
const deckgl = new deck.DeckGL({
container: 'map',
initialViewState: {
latitude: 50.0890,
longitude: 14.4196,
zoom: 16,
bearing: 90,
pitch: 60,
height: 200
},
controller: true,
layers: [
new deck.Tile3DLayer({
id: 'google-3d-tiles',
data: TILESET_URL,
loadOptions: {
fetch: {
headers: {
'X-GOOG-API-KEY': GOOGLE_API_KEY
}
}
},
onTilesetLoad: tileset3d => {
tileset3d.options.onTraversalComplete = selectedTiles => {
const credits = new Set();
selectedTiles.forEach(tile => {
const {copyright} = tile.content.gltf.asset;
copyright.split(';').forEach(credits.add, credits);
creditsElement.innerHTML = [...credits].join('; ');
});
return selectedTiles;
}
},
operation: 'terrain+draw'
}),
new deck.GeoJsonLayer({
id: 'buildings',
// This dataset is created by CARTO, using other Open Datasets available. More info at: https://3dtiles.carto.com/#about.
data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/google-3d-tiles/buildings.geojson',
stroked: false,
filled: true,
getFillColor: ({properties}) => {
const {tpp} = properties;
// quantiles break
if (tpp < 0.6249)
return [254, 246, 181]
else if (tpp < 0.6780)
return [255, 194, 133]
else if (tpp < 0.8594)
return [250, 138, 118]
return [225, 83, 131]
},
opacity: 0.2,
extensions: [new deck._TerrainExtension()]
})
]
});
</script>
</body>
</html>