高程-等高线-源代码示例 运行 重置

                    <!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.googlemap-satellite'
    });
    $('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>
                                                                                                                                
源码