Set water polygon parameter¶
Set water polygon parameter
set_water_polygon_parameter.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Set water polygon parameter</title>
<meta property="og:description" content="Set water polygon parameter" />
<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="select_visualizer_param">Select Visualizer Parameter</label>
<select id="select_visualizer_param" name="select_visualizer_param">
<option value="default" selected>Default</option>
<option value="custom">Custom</option>
</select>
</fieldset>
<fieldset>
<label>
<input type="checkbox" id="reflect" checked>Reflect
</label>
</fieldset>
</div>
</div>
</body>
</html>
<script>
async function main() {
// 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() ),
sun_visualizer: new mapray.SunVisualizer( 32 ),
atmosphere: new mapray.Atmosphere(),
} );
// Setup camera position
uiviewer.setCameraPosition( {
longitude: 138.8813839790466,
latitude: 35.41599948957569,
height: 1003.4868803909048,
} );
uiviewer.setLookAtPosition( {
longitude: 138.8124600651,
latitude: 35.3937341103,
height: 1080,
} );
// Sun direction
const theta = - Math.PI / 180.0 * 180;
const x = Math.cos(theta);
const y = Math.sin(theta);
uiviewer.viewer.sun.setSunDirection( [ x, y, 0 ] );
// Create water polygon visualizer
const visualizer = new mapray.WaterPolygonEntityVisualizer( {
extra_texture_width: 2048,
extra_texture_height: 2048,
use_reflect_texture: true,
} );
// Create water polygon entity
const resources = [cloud_api.getDatasetAsResource("5103308951781376")];
const entities = await mapray.WaterPolygonEntity.loadWaterPolygonGeoJSON(
uiviewer.viewer.scene, resources, {
altitude_mode: mapray.AltitudeMode.ABSOLUTE,
height: 988.5353277977556,
visualizer: visualizer,
}
);
// Create water polygon parameter
const param_default = {
wave_height: visualizer.getWaveHeight(),
wave_length: visualizer.getWaveLength(),
wave_cycle_sec: visualizer.getWaveCycleSec(),
wave_dir_angle: visualizer.getWaveDirectionAngleDegree(),
wave_speed: visualizer.getWaveSpeed(),
wave_normal_rot_angle: visualizer.getWaveNormalRotationAngleDegree(),
wave_partial_delta_angle: visualizer.getWavePartialDeltaAngleDegree(),
wave_sharpness: visualizer.getWaveSharpness(),
water_transparency: visualizer.getWaterTransparency(),
water_absorbance_r: visualizer.getWaterAbsorbanceR(),
water_absorbance_g: visualizer.getWaterAbsorbanceG(),
water_absorbance_b: visualizer.getWaterAbsorbanceB(),
water_diffuse_min: visualizer.getWaterDiffuseMin(),
}
const param_custom = {
wave_height: 5,
wave_length: 50,
wave_cycle_sec: 30,
wave_dir_angle: 360,
wave_speed: 10,
wave_normal_rot_angle: 90,
wave_partial_delta_angle: 20,
wave_sharpness: 20,
water_transparency: 20,
water_absorbance_r: 1000,
water_absorbance_g: 1000,
water_absorbance_b: 1000,
water_diffuse_min: 1,
}
// Set water polygon parameter
const setParameter = function( param ) {
visualizer.setWaveHeight( param.wave_height );
visualizer.setWaveLength( param.wave_length );
visualizer.setWaveCycleSec( param.wave_cycle_sec );
visualizer.setWaveDirectionAngleDegree( param.wave_dir_angle );
visualizer.setWaveSpeed( param.wave_speed );
visualizer.setWaveNormalRotationAngleDegree( param.wave_normal_rot_angle );
visualizer.setWavePartialDeltaAngleDegree( param.wave_partial_delta_angle );
visualizer.setWaveSharpness( param.wave_sharpness );
visualizer.setWaterTransparency( param.water_transparency );
visualizer.setWaterAbsorbanceR( param.water_absorbance_r );
visualizer.setWaterAbsorbanceG( param.water_absorbance_g );
visualizer.setWaterAbsorbanceB( param.water_absorbance_b );
visualizer.setWaterDiffuseMin( param.water_diffuse_min );
}
setParameter( param_default );
// Update depending on the UI
document
.getElementById('select_visualizer_param')
.addEventListener('change', function () {
switch( this.value ) {
case "default":
setParameter( param_default )
break;
case "custom":
setParameter( param_custom )
break;
}
});
document
.getElementById('reflect')
.addEventListener('change', function () {
visualizer.setUseReflectTexture( this.checked );
});
}
main();
</script>
Info
このサンプルコードは、<YOUR_MAPRAY_ACCESS_TOKEN>を、あなたのMapray CloudアカウントのOrganization Tokenに置き換えるまで、期待通りに動作しません。