添加道路模型-源代码示例 运行 重置

                    <!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 src="http://www.bigemap.com/Public/common/js/jquery.min.js"></script>
    <link href="http://www.bigemap.com/Public/common/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #container {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%
        }

        #control {
            user-select: none;
            position: absolute;
            bottom: 20px;
            right: 0;
            width: 380px;
            background: #f1f1f1;
        }

        #control .panel {
            margin-bottom: 0;
        }

        #control .panel input[type=range] {
            width: calc(100% - 30px);
            margin-left: 10px;
        }

        #control .minus, #control .plus {
            position: absolute;
            text-align: center;
            line-height: 16px;
            font-size: 20px;
            display: inline-block;
            height: 20px;
            cursor: pointer;
            width: 20px;
            border-radius: 100%;
            border: 1px solid #29d2ff;
        }

        #control .minus {
            left: 0;
            top: -1px;
        }

        #control .plus {
            right: 4px;
            top: -1px;

        }
    </style>
    <title>part_test</title>
</head>
<body>
<div id='container'></div>
<div id="control">
    <div class="panel panel-info">
        <div class="panel-heading">
            位置校正
        </div>
        <div class="panel-body">
            <div class="form-group row">
                <div class="col-sm-4">
                    <label>
                        <span>缩放</span>
                        <span class="value">1</span>
                    </label>
                </div>
                <div class="col-sm-8">
                    <span class="minus mi">-</span>
                    <input name="scale" type="range" value="1" min="0.01" max="3" step="0.1">
                    <span class="plus mi">+</span>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                    <label>
                        <span>经度</span>
                        <span class="value">93.946</span>
                    </label>
                </div>
                <div class="col-sm-8">
                    <span class="minus mi">-</span>
                    <input name="longitude" type="range" value="93.946" min="93.3" max="94.2" step="0.0001">
                    <span class="plus mi">+</span>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                    <label>
                        <span>纬度</span>
                        <span class="value">36.6878</span>
                    </label>
                </div>
                <div class="col-sm-8">
                    <span class="minus mi">-</span>
                    <input name="latitude" type="range" value="36.6878" min="36.2" max="36.9" step="0.0001">
                    <span class="plus mi">+</span>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                    <label>
                        <span>高度</span>
                        <span class="value">-380</span>
                    </label>
                </div>
                <div class="col-sm-8">
                    <span class="minus mi">-</span>
                    <input name="height" type="range" value="-380" min="-2000" max="2000" step="1">
                    <span class="plus mi">+</span>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                    <label>
                        <span>X旋转</span>
                        <span class="value">0</span>
                    </label>
                </div>
                <div class="col-sm-8">
                    <span class="minus mi">-</span>
                    <input name="rx" type="range" value="0" min="-360" max="360" step="1">
                    <span class="plus mi">+</span>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                    <label>
                        <span>Y旋转</span>
                        <span class="value">0</span>
                    </label>
                </div>
                <div class="col-sm-8">
                    <span class="minus mi">-</span>
                    <input name="ry" type="range" value="0" min="-360" max="360" step="1">
                    <span class="plus mi">+</span>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                    <label>
                        <span>Z旋转</span>
                        <span class="value">-4.5</span>
                    </label>
                </div>
                <div class="col-sm-8">
                    <span class="minus mi">-</span>
                    <input name="rz" type="range" value="-4.5" min="-360" max="360" step="1">
                    <span class="plus mi">+</span>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
    var viewer = new bmgl.Viewer('container', {mapId: 'bigemap.googlemap-satellite',requestRenderMode:false});
   var tilesets = new bmgl.BM3DTileset({url: '/bmgl/data/road2/tileset.json', maximumScreenSpaceError: 1});
    
    var tileData;
    tilesets.readyPromise.then(function (tileset) {
        viewer.scene.primitives.add(tileset);
        // var default_HeadingPitchRange = new bmgl.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0);
        // viewer.zoomTo(tileset, default_HeadingPitchRange);
        viewer.camera.setView({
            "destination": bmgl.Cartesian3.fromDegrees(93.70850968438515, 36.678872101477836,3155.311533),
            "orientation": {"heading":1.541920544673033,"roll":0.003466896409897835,"pitch":-0.3847566214148632}
        });
        var cartographic = bmgl.Cartographic.fromCartesian(tileset.boundingSphere.center);
        var delta_lng = 0, delta_lat = 0;
        console.log(bmgl.Math.toDegrees(cartographic.longitude), bmgl.Math.toDegrees(cartographic.latitude));
        var surface = bmgl.Cartesian3.fromRadians(cartographic.longitude + delta_lng, cartographic.latitude + delta_lat, 0.0);
        var offset = bmgl.Cartesian3.fromRadians(cartographic.longitude + delta_lng - bmgl.Math.toRadians(23), cartographic.latitude - bmgl.Math.toRadians(4.5), 0);
        var translation = bmgl.Cartesian3.subtract(offset, surface, new bmgl.Cartesian3());
        // tileset.modelMatrix = bmgl.Matrix4.fromTranslation(translation);
        // tileset.modelMatrix=update3dtilesMaxtrix(params);
        tileData = tileset;
        tileset._root.transform = update3dtilesMaxtrix();
        // console.log(tileset._root.transform);
    }).otherwise(function (error) {
        console.log(error);
    });
    $('#control').on('change', 'input[type=range]', function () {
        $(this).parent().parent().find('.value').html($(this).val());
        var name = $(this).prop('name');
        tileModelTool[name] = parseFloat($(this).val());
        tileData._root.transform = update3dtilesMaxtrix();
        console.log('aaa');
    });
    $('#control').on('click', '.mi', function () {
        var input = $(this).parent().find('input');
        var name = input.prop('name');
        var step = input.prop('step');
        if ($(this).hasClass('minus')) {
            tileModelTool[name] -= parseFloat(step);
        } else {
            tileModelTool[name] += parseFloat(step);
        }
        if (parseFloat(input.prop('min')) > tileModelTool[name]) {
            tileModelTool[name] = parseFloat(input.prop('min'));
        }
        if (parseFloat(input.prop('max')) < tileModelTool[name]) {
            tileModelTool[name] = parseFloat(input.prop('max'));
        }
        input.val(tileModelTool[name]);

        $(this).parent().parent().find('.value').html(tileModelTool[name].toString().substr(0, 7));
        tileData._root.transform = update3dtilesMaxtrix();

    });
    var tileModelTool = {
        scale: 1,
        longitude: 93.9435,
        latitude: 36.6613,
        height: -380, //修改高度
        rx: 0,
        ry: 0,
        rz: -3.5, //修改旋转
        alpha: 0.5
    }

    function update3dtilesMaxtrix() {

        var mx = bmgl.Matrix3.fromRotationX(
            bmgl.Math.toRadians(tileModelTool.rx)
        );
        var my = bmgl.Matrix3.fromRotationY(
            bmgl.Math.toRadians(tileModelTool.ry)
        );
        var mz = bmgl.Matrix3.fromRotationZ(
            bmgl.Math.toRadians(tileModelTool.rz)
        );
        var rotationX = bmgl.Matrix4.fromRotationTranslation(mx);
        var rotationY = bmgl.Matrix4.fromRotationTranslation(my);
        var rotationZ = bmgl.Matrix4.fromRotationTranslation(mz);
        //平移 修改经纬度
        var position = bmgl.Cartesian3.fromDegrees(
            tileModelTool.longitude,
            tileModelTool.latitude,
            tileModelTool.height
        );

        var m = bmgl.Transforms.eastNorthUpToFixedFrame(position);
        //旋转、平移矩阵相乘
        bmgl.Matrix4.multiply(m, rotationX, m);
        bmgl.Matrix4.multiply(m, rotationY, m);
        bmgl.Matrix4.multiply(m, rotationZ, m);
        //缩放 修改缩放比例
        var scale = bmgl.Matrix4.fromUniformScale(tileModelTool.scale);
        bmgl.Matrix4.multiply(m, scale, m);
        return m;
    }
</script>
</body>
</html>                                                                                                                                
源码