Skip to content

Instantly share code, notes, and snippets.

@AdrianKriger

AdrianKriger/cesium_osm3Dbuildings01.html

Last active October 13, 2022 17:13
Show Gist options
  • Save AdrianKriger/42c6dbddb31e9839069484856baecc0f to your computer and use it in GitHub Desktop.
Save AdrianKriger/42c6dbddb31e9839069484856baecc0f to your computer and use it in GitHub Desktop.
Download ZIP
basic osm 3D buildings with cesiumjs
Raw
cesium_osm3Dbuildings01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta name="description" content="Use Viewer to start building new applications or easily embed Cesium into existing applications.">
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases">
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../CesiumUnminified/Cesium.js"
></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<select class="cesium-button" id="dropdown">
<option value="0">Apply Default Style</option>
<option value="1">Apply Basic Style</option>
<option value="2">Color Features with Conditions</option>
<option value="3">Color BRT with Conditions</option>
</select>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
'use strict';
//Sandcastle_Begin
// Grant CesiumJS access to your ion assets
// Cesium.Ion.defaultAccessToken = "_your_cesium_ion_acess_token_";
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
animation: false,
});
// Set the initial camera to look at Mamre
viewer.scene.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(18.4856, -33.5141, 550),
orientation: {
heading: Cesium.Math.toRadians(270),
pitch: Cesium.Math.toRadians(-35),
},
});
// Add OSM Building tileset
var osmBuildingsTileset = Cesium.createOsmBuildings();
viewer.scene.primitives.add(osmBuildingsTileset);
// Show features
function showDefault() {
osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
show: osmBuildingsTileset,
});
}
// Styling functions
// Color by type, checks for null values since not all buildings have the type property.
function basicStyling() {
osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
defines: {
whole: "${feature['building']}",
part: "${feature['part#building:part']}", //"${feature['building'].building:part]}"
amenity: "${feature['amenity']}"
},
color: {
conditions: [
["${whole} === null", "color('white')"],
["${whole} === 'house'", "color('blue', 0.5)"],
["${whole} === 'garage'", "color('green', 0.7)"],
["${part} === 'house'", "color('blue', 0.5)"],
["${part} === 'garage'", "color('green', 0.7)"],
["${whole} === 'retail'", "color('orange')"],
["${whole} === 'school'", "color('red')"],
["${amenity} === 'library'", "color('purple')"],
["${amenity} === 'clinic'", "color('yellow')"],
["true", "color('white')"], // This is the else case
],
},
});
}
// Show features based on property
function showFeaturesWithProperty() {
osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
show: "${feature['building']} === 'residential' || ${feature['building']} === 'apartments'",
});
}
// Color features with distance conditions
function colorFeaturesWithConditions() {
osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
defines: {
distance:
"distance(vec2(${feature['cesium#longitude']}, ${feature['cesium#latitude']}), vec2(18.47923, -33.51519))",
},
color: {
conditions: [
["${distance} > 0.010", "color('red')"],
["${distance} > 0.006", "color('pink')"],
["${distance} > 0.002", "color('orange')"],
["${distance} > 0.0001", "color('yellow')"],
["true", "color('#ffffff')"],
],
},
});
}
// Color BRT with distnace conditions
function brtWithConditions() {
// Load the GeoJSON file from Cesium ion.
async function addGeoJSON() {
// Load the GeoJSON file from Cesium ion.
const geoJSONURL = await Cesium.IonResource.fromAssetId(721383);
// Create the geometry from the GeoJSON, and clamp it to the ground.
const geoJSON = await Cesium.GeoJsonDataSource.load(geoJSONURL,
{ clampToGround: true,
markerSymbol: 'bus',
markerColor: Cesium.Color.DARKCYAN });
// Add it to the scene.
const dataSource = await viewer.dataSources.add(geoJSON);
geoJSON.show = true;}
addGeoJSON();
///color buildings based on distance
osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
defines: {
distance:
"distance(vec2(${feature['cesium#longitude']}, ${feature['cesium#latitude']}), vec2(18.47923, -33.51519))",
},
color: {
conditions: [
["${distance} > 0.010", "color('red')"],
["${distance} > 0.006", "color('pink')"],
["${distance} > 0.002", "color('orange')"],
["${distance} > 0.0001", "color('yellow')"],
["true", "color('#ffffff')"],
],
},
});
}
var menu = document.getElementById("dropdown");
menu.options[0].onselect = function () {
showDefault();
};
menu.options[1].onselect = function () {
basicStyling();
};
menu.options[2].onselect = function () {
colorFeaturesWithConditions();
};
menu.options[3].onselect = function () {
brtWithConditions();
};
menu.onchange = function () {
var item = menu.options[menu.selectedIndex];
if (item && typeof item.onselect === "function") {
item.onselect();
}
};
showDefault();//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== 'undefined') {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment