Set contour parameter¶
Set contour parameter of rastermap tiles
set_contour_parameter.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Set contour parameter</title>
<meta property="og:description" content="Set contour parameter of rastermap tiles" />
<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="color_table_mode">Select Color Table Mode</label>
<select id="color_table_mode" name="color_table_mode">
<option value="linear" selected>LINEAR</option>
<option value="step">STEP</option>
</select>
</fieldset>
<fieldset class="select-fieldset">
<label for="color_table">Select Color Table</label>
<select id="color_table" name="color_table">
<option value="color" selected>COLOR</option>
<option value="red_blue">RED_BLUE</option>
</select>
</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 );
// Create rastermap material
const material = new mapray.RastermapTilesPolygonMaterial( uiviewer.viewer.glenv );
entity.setMaterial( material );
// Add Entity
uiviewer.viewer.scene.addEntity( entity );
// 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 red_blue_table = [
[ 0, 0, 1, 1 ],
[ 0.5, 0.5, 0.5, 1 ],
[ 1, 0, 0, 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 = false;
// Set Target
entity.setTarget( mapray.RastermapTilesPolygonEntity.Target.MAIN );
// Update depending on the UI
let table = color_table;
let table_mode = mapray.RastermapTilesPolygonMaterial.ColorTableMode.LINEAR;
document
.getElementById('color_table_mode')
.addEventListener('change', function () {
table_mode = this.value == "linear" ? mapray.RastermapTilesPolygonMaterial.ColorTableMode.LINEAR : mapray.RastermapTilesPolygonMaterial.ColorTableMode.STEP;
material.setColorTable( table, height_range.min, height_range.max, table_mode );
});
document
.getElementById('color_table')
.addEventListener('change', function () {
table = this.value == "color" ? color_table : red_blue_table;
material.setColorTable( table, height_range.min, height_range.max, table_mode );
});
</script>
Info
このサンプルコードは、<YOUR_MAPRAY_ACCESS_TOKEN>を、あなたのMapray CloudアカウントのOrganization Tokenに置き換えるまで、期待通りに動作しません。