全新推出 3D 圖塊, OGC 標準 glTF 格式、 換句話說,您可以使用任何支援 OGC 3D 圖塊規格的轉譯器 3D 視覺呈現例如: Cesium 是算繪 3D 視覺化內容的基礎開放原始碼程式庫。
使用 CesiumJS
CesiumJS 是開放原始碼的 JavaScript 程式庫,可用於在網路上 3D 視覺化功能。 如要進一步瞭解如何使用 CesiumJS,請參閱 瞭解 CesiumJS。
使用者控制項
CesiumJS 資訊方塊轉譯器具有一組標準使用者控制項。
動作 | 說明 |
---|---|
平移檢視畫面 | 按一下滑鼠左鍵及拖曳 |
縮放檢視 | 按一下滑鼠右鍵並拖曳或捲動滑鼠滾輪 |
旋轉檢視 | Ctrl + 向左/右鍵及拖曳或中鍵拖曳 |
最佳做法
你可以採用幾種方法來減少 CesiumJS 3D 載入 次。例如:
將下列陳述式加入轉譯的 HTML,即可啟用同時要求:
Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = <REQUEST_COUNT>
REQUEST_COUNT
越高, 資訊方塊載入。不過,使用REQUEST_COUNT
載入 Chrome 瀏覽器時 超過 10 的快取版本時,您可能會遇到一個已知 Chrome 問題。 以多數用途來說,建議將REQUEST_COUNT
設為 18 以獲得最佳成效 才需進行啟用略過詳細層級。若需更多資訊,請參閱 Cesium 問題。
請務必啟用「
showCreditsOnScreen: true
。若需更多資訊,請參閲
政策:
顯示指標
如要確認影格速率 請查看每秒影格數 requestAnimationFrame 方法。
如要瞭解影格延遲時間的計算方式,請查看 PerformanceDisplay 類別
CesiumJS 轉譯器範例
您可以將 CesiumJS 轉譯器與 Map Tiles API 的 3D 圖塊搭配使用, 提供的根層級圖塊網址
簡易範例
下列範例會初始化 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 網頁如下所示。
Places API 整合
您可以將 CesiumJS 與 Places API 擷取更多資訊。您可以使用「自動完成」小工具前往 地點的可視區域本範例使用 Places Autocomplete API, 啟用權限的對象則是 請按照這些步驟操作 以及 Maps 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,此動畫會模擬互動式 無人機從任何搜尋點飛過
這個程式碼範例可指引您前往 Autocomplete 小工具。
<!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>
環繞攝影機軌道
在 Cesium 中,你可以繞著搜尋點繞道,避開 與建築物的衝突或者,您也可以將建築物設為透明 並在相機穿過時移動
首先,將相機固定到某個點,接著就能建立相機軌道
展示你的資產方法是使用攝影機的
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 for Unreal
如要將 Cesium for Unreal 外掛程式與 3D Tiles API 搭配使用,請按照下列步驟操作: 。
安裝 Cesium for Unreal 外掛程式。
建立新的 Unreal 專案。
連結至 Google 擬真成像 3D Tiles API。
選取「Cesium」Cesium以開啟 Cesium 視窗。Cesium。
選取「Blank 3D Tiles Tileset」。
在「World Outliner」中,選取這個選項即可開啟「Details」面板 Cesium3DTileset。
將「來源」從「從 Cesium Ion」變更為「寄件者網址」。
將網址設為 Google 3D 圖塊網址。
https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY
- 啟用「在畫面上顯示功勞」,即可正確顯示出處。
這會載入整個世界,如要移至任何 LatLng,請選取 「Outliner」面板中的 CesiumGeoreference 項目,然後編輯 「詳細資料」面板中的「出發地緯度/經度/高度」。
與適用於 Unity 的 Cesium 合作
如要搭配 Unity 的 Cesium 使用擬真圖塊,請按照下列步驟操作。
建立新的 Unity 專案。
在「套件管理員」部分中新增限定範圍的登錄檔 (依序前往「Editor」>「Project Settings」)。
名稱:Cesium
網址:https://unity.pkg.cesium.com
範圍:com.cesium.unity
安裝適用於 Unity 套件的 Cesium。
連結至 Google Photoreal 3D Tiles API。
選取「Cesium」Cesium以開啟 Cesium 視窗。Cesium。
按一下「空白 3D 圖塊圖塊」。
在左側面板中的「Tileset Source」選項中,「Source」。 選取「從網址」 (而不是從 Cesium Ion)。
將網址設為 Google 3D 圖塊網址。
https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY
- 啟用「在畫面上顯示功勞」,即可正確顯示出處。
這會載入整個世界,如要移至任何 LatLng,請選取 「情境階層」中的 CesiumGeoreference 項目,然後編輯 Inspector 中的起點緯度/經度/高度。
使用 deck.gl
deck.gl, 採用 WebGL 技術,是一種開放原始碼 JavaScript 架構,可提供高效能 以圖表呈現資料
歸因
擷取 copyright
,確保資料出處正確顯示
欄位的值asset
,然後在算繪的檢視畫面中顯示該欄位。適用對象
如需更多資訊,請參閱
顯示資料出處。
deck.gl 轉譯器範例
簡易範例
下列範例會初始化 deck.gl 轉譯器,然後載入地點 以及 3D 模型在您的程式碼中,請務必將 YOUR_API_KEY 換成 實際的 API 金鑰
<!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 會將 2D 資料轉譯至 3D 介面。舉例來說,您可以利用 建築物平面圖的 GeoJSON,在擬真 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>