<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<link href='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet'/>
<script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
<script type="text/javascript" src="http://www.bigemap.com/Public/common/js/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.toolbar{
position: absolute;
left:20px;
top:15px;
z-index: 99;
color: #222;
background-color: rgba(220,220,220,0.8);
padding: 0 10px;
}
.bmgl-widget-credits{display:none}
</style>
<title>part_test</title>
</head>
<body>
<div id='container'></div>
<div class="toolbar">
<p>
<label>
<input type="radio" name="type" value="">影像
</label>
<label>
<input type="radio" checked name="type" value="elevation">高程
</label>
<label>
<input type="radio" name="type" value="aspect">方位
</label>
</p>
<p>
<label><input type="checkbox" value="line" checked name="line">等高线</label>
</p>
</div>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', {
terrainId: 'bigemap.9af15d8e',
mapId: 'bigemap.zhongkexingtu'
});
$('input').on('click',function () {
var v=$(this).val();
if (v==='line'){
viewModel.enableContour=$(this).prop('checked');
}else{
viewModel.selectedShading=v;
}
updateMaterial();
});
viewer.camera.setView({
destination:new bmgl.Cartesian3(-1233524.2528105492,5342784.449529671,3266300.735257586),
orientation:{
heading:5.737109377827798,
roll:6.281571490802099,
pitch:-0.3089655832119651,
}
})
viewer.scene.globe.enableLighting = true;
function getElevationContourMaterial() {
return new bmgl.Material({
fabric: {
type: 'ElevationColorContour',
materials: {
contourMaterial: {
type: 'ElevationContour'
},
elevationRampMaterial: {
type: 'ElevationRamp'
}
},
components: {
diffuse: 'contourMaterial.alpha == 0.0 ? elevationRampMaterial.diffuse : contourMaterial.diffuse',
alpha: 'max(contourMaterial.alpha, elevationRampMaterial.alpha)'
}
},
translucent: false
});
}
function getSlopeContourMaterial() {
return new bmgl.Material({
fabric: {
type: 'SlopeColorContour',
materials: {
contourMaterial: {
type: 'ElevationContour'
},
slopeRampMaterial: {
type: 'SlopeRamp'
}
},
components: {
diffuse: 'contourMaterial.alpha == 0.0 ? slopeRampMaterial.diffuse : contourMaterial.diffuse',
alpha: 'max(contourMaterial.alpha, slopeRampMaterial.alpha)'
}
},
translucent: false
});
}
function getAspectContourMaterial() {
return new bmgl.Material({
fabric: {
type: 'AspectColorContour',
materials: {
contourMaterial: {
type: 'ElevationContour'
},
aspectRampMaterial: {
type: 'AspectRamp'
}
},
components: {
diffuse: 'contourMaterial.alpha == 0.0 ? aspectRampMaterial.diffuse : contourMaterial.diffuse',
alpha: 'max(contourMaterial.alpha, aspectRampMaterial.alpha)'
}
},
translucent: false
});
}
var elevationRamp = [0.0, 0.045, 0.1, 0.15, 0.37, 0.54, 1.0];
var slopeRamp = [0.0, 0.29, 0.5, Math.sqrt(2)/2, 0.87, 0.91, 1.0];
var aspectRamp = [0.0, 0.2, 0.4, 0.6, 0.8, 0.9, 1.0];
function getColorRamp(selectedShading) {
var ramp = document.createElement('canvas');
ramp.width = 100;
ramp.height = 1;
var ctx = ramp.getContext('2d');
var values;
if (selectedShading === 'elevation') {
values = elevationRamp;
} else if (selectedShading === 'slope') {
values = slopeRamp;
} else if (selectedShading === 'aspect') {
values = aspectRamp;
}
var grd = ctx.createLinearGradient(0, 0, 100, 0);
if (values){
grd.addColorStop(values[0], '#000000'); //black
grd.addColorStop(values[1], '#2747E0'); //blue
grd.addColorStop(values[2], '#D33B7D'); //pink
grd.addColorStop(values[3], '#D33038'); //red
grd.addColorStop(values[4], '#FF9742'); //orange
grd.addColorStop(values[5], '#ffd700'); //yellow
grd.addColorStop(values[6], '#ffffff'); //white
}
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 100, 1);
return ramp;
}
var minHeight = -414.0;
var maxHeight = 8777.0;
var contourColor = bmgl.Color.RED.clone();
var contourUniforms = {};
var shadingUniforms = {};
var viewModel = {
enableContour: true,
contourSpacing: 150.0,
contourWidth: 2.0,
selectedShading: 'elevation',
changeColor: function() {
contourUniforms.color = bmgl.Color.fromRandom({alpha: 1.0}, contourColor);
}
};
function updateMaterial() {
var hasContour = viewModel.enableContour;
var selectedShading = viewModel.selectedShading;
var globe = viewer.scene.globe;
var material;
if (hasContour) {
if (selectedShading === 'elevation') {
material = getElevationContourMaterial();
shadingUniforms = material.materials.elevationRampMaterial.uniforms;
shadingUniforms.minimumHeight = minHeight;
shadingUniforms.maximumHeight = maxHeight;
contourUniforms = material.materials.contourMaterial.uniforms;
} else if (selectedShading === 'slope') {
material = getSlopeContourMaterial();
shadingUniforms = material.materials.slopeRampMaterial.uniforms;
contourUniforms = material.materials.contourMaterial.uniforms;
} else if (selectedShading === 'aspect') {
material = getAspectContourMaterial();
shadingUniforms = material.materials.aspectRampMaterial.uniforms;
contourUniforms = material.materials.contourMaterial.uniforms;
} else {
material = bmgl.Material.fromType('ElevationContour');
contourUniforms = material.uniforms;
}
contourUniforms.width = viewModel.contourWidth;
contourUniforms.spacing = viewModel.contourSpacing;
contourUniforms.color = contourColor;
} else if (selectedShading === 'elevation') {
material = bmgl.Material.fromType('ElevationRamp');
shadingUniforms = material.uniforms;
shadingUniforms.minimumHeight = minHeight;
shadingUniforms.maximumHeight = maxHeight;
} else if (selectedShading === 'slope') {
material = bmgl.Material.fromType('SlopeRamp');
shadingUniforms = material.uniforms;
} else if (selectedShading === 'aspect') {
material = bmgl.Material.fromType('AspectRamp');
shadingUniforms = material.uniforms;
}
if (selectedShading !== 'none') {
shadingUniforms.image = getColorRamp(selectedShading);
}
globe.material = material;
}
updateMaterial();
</script>
</body>
</html>
源码