Compare Heightmaps With Base¶
Compare the from and to heightmaps against the base heightmap
compare_heightmaps_with_base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Compare Heightmaps With Base</title>
<meta property="og:description" content="Compare the from and to heightmaps against the base heightmap" />
<meta name="mapray-version" content="0.10.1">
<meta name="mapray-api-status" content="experimental">
<script src="./v0.10.1/mapray.min.js"></script>
<script src="./v0.10.1/maprayui.min.js"></script>
<link rel="stylesheet" href="./v0.10.1/mapray.css">
<style>
body {margin: 0; padding: 0;}
html, body, div#mapray-container { height: 100%; }
.map-overlay {
font: 12px/20px "Robot", sans-serif;
position: absolute;
width: 200px;
top: 0;
left: 0;
padding: 10px;
}
.map-overlay .map-overlay-inner {
background-color: #fff;
color: #000;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
border-radius: 3px;
padding: 10px;
margin-bottom: 10px;
}
.map-overlay-inner fieldset {
border: none;
padding: 0;
margin: 0 0 10px;
}
.map-overlay-inner fieldset:last-child {
margin: 0;
}
.map-overlay-inner label {
display: block;
font-weight: bold;
margin: 0 0 5px;
}
</style>
</head>
<body>
<div id="mapray-container"></div>
<div class="map-overlay top">
<div class="map-overlay-inner">
<fieldset>
<label for="progress">Animation Progress</label>
<input type="range" id="progress" min="0.0" max="1.0" value="0.5" step="0.01">
<span id="progress_value">0.5</span>
</fieldset>
<fieldset>
<label>
<input type="checkbox" id="height_animation" checked>Height Animation
</label>
</fieldset>
</div>
</div>
</body>
</html>
<script>
// Create Mapray Cloud API. Set up your access token, which can be created in Mapray Cloud.
const cloud_api = new mapray.cloud.CloudApiV2( {
tokenType: mapray.cloud.CloudApi.TokenType.ACCESS_TOKEN,
token: "<YOUR_MAPRAY_ACCESS_TOKEN>",
} );
// Create viewer
const uiviewer = new maprayui.StandardUIViewer( "mapray-container", {
image_provider: new mapray.StandardImageProvider( {
url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", format: "jpg", min_level: 2, max_level: 18,
} ),
dem_provider: new mapray.StandardDemProvider( cloud_api.getDefaultDemAsResource() ),
} );
// Setup camera position
uiviewer.setCameraPosition( {
longitude: 139.08929188929858,
latitude: 35.11780127121247,
height: 1205.4664811063558,
} );
uiviewer.setLookAtPosition( {
longitude: 139.0772398543468,
latitude: 35.11853399141087,
height: 237.91778357233852,
} );
// Create colormap provider
const from_colormap_provider = new mapray.StandardImageProvider( {
url: "https://opentiles.mapray.com/xyz/atami-disaster/20210806/",
min_level: 0,
max_level: 23,
coord_system: mapray.StandardImageProvider.CoordSystem.LOWER_LEFT,
} );
const to_colormap_provider = new mapray.StandardImageProvider( {
url: "https://opentiles.mapray.com/xyz/atami-disaster/20210806-gray/",
min_level: 14,
max_level: 20,
coord_system: mapray.StandardImageProvider.CoordSystem.LOWER_LEFT,
} );
// Create heightmap resource
const from_heightmap_resource = new mapray.URLResource( "https://opentiles.mapray.com/heightmap/atami-disaster/20210806-0.05/info.json" );
const to_heightmap_resource = new mapray.URLResource( "https://opentiles.mapray.com/heightmap/atami-disaster/2019-0.5/info.json" );
// Create rastermap tiles for animation
const entity = new mapray.RastermapTilesPolygonAnimationEntity( uiviewer.viewer.scene );
entity.setColormapFromTo( from_colormap_provider, to_colormap_provider );
entity.setViewMode( mapray.RastermapTilesPolygonAnimationEntity.ViewMode.CONTOUR );
// Add Entity
uiviewer.viewer.scene.addEntity( entity );
// Create rastermap material
const material = new mapray.RastermapTilesPolygonMaterial( uiviewer.viewer.glenv );
entity.setMaterial( material );
// Create contour color table
const color_table = [
[ 0, 0, 0, 1 ],
[ 1, 0, 0, 1 ],
[ 1, 0.5, 0, 1 ],
[ 1, 1, 0, 1 ],
[ 0, 1, 1, 1 ],
[ 0, 0, 1, 1 ],
];
const height_range = {
min: -10.0,
max: 10.0,
}
material.setColorTable( color_table, height_range.min, height_range.max, mapray.RastermapTilesPolygonMaterial.ColorTableMode.LINEAR );
material.gridVisibility = false;
// Set animation progress value
entity.setAlpha( 0.5 );
// Active height animation
entity.setAnimationHeight( true );
// Set Heightmaps with base
const base_heightmap_resource = new mapray.URLResource( "https://opentiles.mapray.com/heightmap/atami-disaster/20210806-0.05/info.json" );
entity.setHeightmapFromTo( from_heightmap_resource, to_heightmap_resource, base_heightmap_resource );
// Update depending on the UI
document
.getElementById('progress')
.addEventListener('input', function () {
// Animation Progress
entity.setAlpha( this.value );
document.getElementById('progress_value').textContent = this.value;
});
document
.getElementById('height_animation')
.addEventListener('change', function () {
entity.setAnimationHeight( this.checked );
});
</script>
Info
このサンプルコードは、<YOUR_MAPRAY_ACCESS_TOKEN>を、あなたのMapray CloudアカウントのOrganization Tokenに置き換えるまで、期待通りに動作しません。