Add region contour¶
Add region contour on rastermap tiles
add_region_contour.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Add region contour</title>
<meta property="og:description" content="Add region contour on 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 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;
}
.map-overlay-inner button {
display: inline-block;
width: 100px;
height: 20px;
border: none;
cursor: pointer;
}
.map-overlay-inner button:focus {
outline: none;
}
.map-overlay-inner button:hover {
box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div id="mapray-container"></div>
<div class="map-overlay top">
<div class="map-overlay-inner">
<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 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.REGION_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: 250.0,
max: 300.0,
}
material.setColorTable( color_table, height_range.min, height_range.max, mapray.RastermapTilesPolygonMaterial.ColorTableMode.LINEAR );
material.gridVisibility = false;
// 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('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に置き換えるまで、期待通りに動作しません。