Compare Heightmaps¶
Compare main and sub heightmaps
compare_heightmaps.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Compare Heightmaps</title>
<meta property="og:description" content="Compare main and sub heightmaps" />
<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 .select-fieldset {
display: block;
}
.map-overlay-inner fieldset {
border: none;
padding: 0;
margin: 0 0 10px;
}
.map-overlay-inner fieldset:last-child {
margin: 0;
}
.map-overlay-inner select {
width: 100%;
}
.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 class="select-fieldset">
<label for="Target">Select Target</label>
<select id="Target" name="Target">
<option value="main" selected>MAIN</option>
<option value="sub">SUB</option>
<option value="main_minus_sub">MAIN_MINUS_SUB</option>
<option value="sub_minus_main">SUB_MINUS_MAIN</option>
<option value="main_plus_sub">MAIN_PLUS_SUB</option>
<option value="average">AVERAGE</option>
</select>
</fieldset>
<fieldset>
<label><input type="checkbox" id="grid_visibility" checked> Grid Visibility</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 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,
} );
// Create heightmap resource
const main_heightmap_resource = new mapray.URLResource( "https://opentiles.mapray.com/heightmap/atami-disaster/20210806-0.05/info.json" );
const sub_heightmap_resource = new mapray.URLResource( "https://opentiles.mapray.com/heightmap/atami-disaster/2019-0.5/info.json" );
// Create rastermap tiles
const entity = new mapray.RastermapTilesPolygonEntity( uiviewer.viewer.scene );
entity.setColormap( colormap_provider );
entity.setHeightmapMainSub( main_heightmap_resource, sub_heightmap_resource );
entity.setViewMode( mapray.RastermapTilesPolygonEntity.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: 0.0,
max: 400.0,
}
material.setColorTable( color_table, height_range.min, height_range.max, mapray.RastermapTilesPolygonMaterial.ColorTableMode.LINEAR );
material.gridVisibility = true;
// Update depending on the UI
document
.getElementById('Target')
.addEventListener('change', function () {
switch ( this.value ) {
case "main":
entity.setTarget( mapray.RastermapTilesPolygonEntity.Target.MAIN );
break;
case "sub":
entity.setTarget( mapray.RastermapTilesPolygonEntity.Target.SUB );
break;
case "main_minus_sub":
entity.setTarget( mapray.RastermapTilesPolygonEntity.Target.MAIN_MINUS_SUB );
break;
case "sub_minus_main":
entity.setTarget( mapray.RastermapTilesPolygonEntity.Target.SUB_MINUS_MAIN );
break;
case "main_plus_sub":
entity.setTarget( mapray.RastermapTilesPolygonEntity.Target.MAIN_PLUS_SUB );
break;
case "average":
entity.setTarget( mapray.RastermapTilesPolygonEntity.Target.AVERAGE );
break;
}
});
document
.getElementById('grid_visibility')
.addEventListener('change', function () {
material.gridVisibility = this.checked;
});
</script>
Info
このサンプルコードは、<YOUR_MAPRAY_ACCESS_TOKEN>を、あなたのMapray CloudアカウントのOrganization Tokenに置き換えるまで、期待通りに動作しません。