Region Colormap Animation¶
Display Image animation of rastermap tiles with region
anime_region_colormap.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Region Colormap Animation</title>
<meta property="og:description" content="Display Image animation of rastermap tiles with region" />
<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="region_tri" checked>Region Triangle
</label>
<label>
<input type="checkbox" id="region_rect">Region Rectangle
</label>
<button id="clear_region" name="clear_region">Clear Region</button>
</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.0763836369515,
latitude: 35.118740159256554,
height: 453.4921488808468,
} );
uiviewer.setLookAtPosition( {
longitude: 139.0761184044442,
latitude: 35.11994496969431,
height: 200.10365466214716,
} );
// 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.setHeightmapFromTo( from_heightmap_resource, to_heightmap_resource );
entity.setViewMode( mapray.RastermapTilesPolygonAnimationEntity.ViewMode.REGION_COLOR );
// Add Entity
uiviewer.viewer.scene.addEntity( entity );
// Create rastermap material
const material = new mapray.RastermapTilesPolygonMaterial( uiviewer.viewer.glenv );
entity.setMaterial( material );
material.gridVisibility = false;
material.setAlphaEnable( true );
// Set animation progress value
entity.setAlpha( 0.5 );
// Set annotation area
const region_tri = {
id: 0,
area: [
139.07601088872156, 35.11983127333058, 296.14801939204335,
139.07601471045598, 35.11943162960163, 268.983626187779,
139.07629835039154, 35.119666414264636, 296.0412341207266
]
};
const region_rect= {
id: 1,
area: [
139.07639829095135, 35.11960965652609, 292.0006719697267,
139.0763859942828, 35.11904637883378, 268.94206756632775,
139.07691647428214, 35.1190605411941, 264.25325317215174,
139.07688713251386, 35.11965659223881, 276.1427563391626
]
};
entity.setAnnotationArea( region_tri.id, region_tri.area );
// 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('region_tri')
.addEventListener('change', function () {
if ( this.checked ) {
entity.setAnnotationArea( region_tri.id, region_tri.area );
}
else {
entity.deleteAnnotationArea( region_tri.id );
}
});
document
.getElementById('region_rect')
.addEventListener('change', function () {
if ( this.checked ) {
entity.setAnnotationArea( region_rect.id, region_rect.area );
}
else {
entity.deleteAnnotationArea( region_rect.id );
}
});
document
.getElementById('clear_region')
.addEventListener('click', function () {
document.getElementById( 'region_tri' ).checked = false;
document.getElementById( 'region_rect' ).checked = false;
entity.clearAnnotationArea();
});
</script>
Info
このサンプルコードは、<YOUR_MAPRAY_ACCESS_TOKEN>を、あなたのMapray CloudアカウントのOrganization Tokenに置き換えるまで、期待通りに動作しません。