前端开发人员用它就能做可视化应用！

有人说我一个前端工程师，只懂怎么写页面，如何能开发企业可视化应用？近几年可视化应用已经渗透到各行各业中，科技园、医院、学校、工厂、消防、安保、仓储无不涉猎！作为一个前端开发人员，你有必要再往前迈一步，多了解webgl技术，再沉淀一下Javascript。thingjs是一个面向物联网的3D可视化开发平台，可在线开发、对接数据、项目部署、实际应用~如果你想进步不妨一步哦！

建筑拔高(ThingLayer).js

/**

* 该示例主要展示了根据底面坐标轮廓和高度进行拔楼的功能

* 该示例中的插值功能主要用到了Tween.js

* 该示例用到的数据地址为:https://www.thingjs.com/uearth/uGeo/chaoyang_building.geojson

* 其中建筑的高度为随机值，无特殊意义

*/

var app = new THING.App();

app.background = [0, 0, 0];

var map;

THING.Utils.dynamicLoad('https://www.thingjs.com/uearth/uearth.min.js', function () {

    map = app.create({

        type: 'Map',

        attribution: 'Google'

    });

    // 创建一个瓦片图层

    var tileLayer1 = app.create({

        type: 'TileLayer',

        name: 'tileLayer1',

        url: 'https://mt{0,1,2,3}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}',

        style: {

            template: CMAP.TileLayerStyle.DARKGREEN // 设置瓦片图层的样式为DARKGREEN

        }

    });

    // 将瓦片图添加到地图中

    map.addLayer(tileLayer1);

    // 创建一个建筑物图层

    var buildingLayer = app.create({

        type: 'ThingLayer',

        name: 'buildingLayer'

    });

    // 将 buildingLayer 添加到 map 中

    map.addLayer(buildingLayer);

    // 飞到地理位置和高度

    app.camera.earthFlyTo({

        lonlat: [116.4488, 39.9187],

        height: 4000,

        time: 2000,

        lerp: THING.LerpType.Linear.None,

        complete: function () {

            app.camera.curOrbit.setState();

            setTimeout(createBuilding, 1000);

        }

    });

    var createBuilding = function () {

        $.ajax({

            type: 'GET',

            url: 'https://www.thingjs.com/uearth/uGeo/chaoyang_building.geojson',

            dataType: 'json',

            success: function (data) {

                // 对数据进行排序

                sortBuildData(data);

                // 加载楼宇

                addBuildAsync(data, 0, function () {

                });

            }

        });

    };

    // 每次创建建筑数量

    var step = 70;

    function addBuildAsync(arr, start, cb) {

        var building;

        var i = start;

        var j = THING.Math.min(start + step, arr.features.length);

        // 循环创建建筑,先将其高度都设置成1米

        for (; i < j; i += 1) {

            building = app.create({

                type: 'GeoBuilding',

                name: 'build' + i,

                coordinates: arr.features[i].geometry.coordinates,

                userData: arr.features[i].properties,

                height: 1,

                renderer: {

                    type: 'image',

                    imageUrl: ['https://www.thingjs.com/uearth/uGeo/building_top.png', 'https://www.thingjs.com/uearth/uGeo/building.png'], // 楼宇顶部贴图和侧边贴图

                    blending: true, // 贴图叠加混合

                    textureWrap:CMAP.TextureWrapMode.Stretch

                }

            });

            buildingLayer.add(building);

        }

        if (j < arr.features.length) {

            // 异步递归下一次循环

            setTimeout(function () {

                addBuildAsync(arr, j, cb);

            }, 0);

        }

        else if (typeof cb === 'function') {

            cb();

        }

    }

    // 对楼宇数据按照其中心点，从西到东排序

    function sortBuildData(arr) {

        arr.features.sort(function (a, b) {

            return (a.properties.centerx - b.properties.centerx);

        });

    }

    // 不同街道的相机视角

    var camPos = {

        '建外街道': {

            position: [2179362.5621945052, 4091446.2018570947, 4382089.316474768],

            target: [2178592.77284655, 4091931.0390559826, 4380492.883422022],

            up: [0.34164472651390604, 0.6413960312283457, 0.6869425099451665]

        },

        '朝外街道': {

            position: [2177287.5596858454, 4093097.7380608646, 4381963.4315843275],

            target: [2177867.783281599, 4092609.529367086, 4380219.533160159],

            up: [0.3413043969490713, 0.6416204643836936, 0.6869020951396816]

        },

        '呼家楼街道': {

            position: [2180796.208593407, 4092585.7199409953, 4381166.2383312695],

            target: [2178653.476017196, 4092893.444632129, 4379563.480796406],

            up: [0.3415888171867664, 0.6417205149940622, 0.6866672124171224]

        },

        '三里屯街道': {

            position: [2180049.8274386693, 4094127.8027542974, 4379868.140003332],

            target: [2178462.4045711374, 4094071.222602554, 4378557.5679814685],

            up: [0.34172853816543197, 0.6417652897142498, 0.6865558383127347]

        },

        '东外街道': {

            position: [2176806.062780602, 4093945.081429624, 4381311.039653606],

            target: [2177692.216493408, 4093814.228132429, 4379180.936632392],

            up: [0.3412325931407259, 0.641760200965019, 0.6868072231971607]

        },

        '左家庄街道': {

            position: [2178343.586772876, 4095041.600086432, 4379738.026890182],

            target: [2178049.2702569016, 4095201.3772697616, 4377706.140884884],

            up: [0.3414940843927409, 0.6420823733568143, 0.6863760020202075]

        },

        '团结湖街道': {

            position: [2180423.2727790484, 4093298.1298934473, 4380347.1220772965],

            target: [2179657.996113762, 4093548.054626523, 4378451.706304496],

            up: [0.3417463148500724, 0.6418231506156354, 0.6864928984484943]

        }, '麦子店街道': {

            position: [2180809.303744469, 4097285.615845475, 4377199.009997367],

            target: [2178441.4391688984, 4094647.778341093, 4378028.833554901],

            up: [0.34155557214940396, 0.6419955751553925, 0.686426596669003]

        }

    };

    var blocks = ['全景', '建外街道', '朝外街道', '呼家楼街道', '三里屯街道', '东外街道', '左家庄街道', '团结湖街道', '麦子店街道'];

    // 创建一个tween对象

    function grow(fromBlock, toBlock, cb) {

        var indexForm = blocks.indexOf(fromBlock);

        var indexTo = blocks.indexOf(toBlock);

        var tw = buildTween(blocks[indexForm], blocks[indexTo], cb);

        return tw;

    }

    // 创建生长动画对象

    function buildTween(fromBlock, toBlock, cb) {

        var growTween = new TWEEN.Tween({ num: 0 }).to({ num: 1 }, 3000).easing(TWEEN.Easing.Linear.None)

            .onUpdate(function (obj) {

                setBuildingHeight(fromBlock, toBlock, obj.num);

            }).onStart(function () {

                app.camera.flyTo({

                    position: camPos[toBlock].position,

                    target: camPos[toBlock].target,

                    time: 1000,

                    up: camPos[toBlock].up,

                    lerp: THING.LerpType.Linear.None,

                    upLerp: THING.LerpType.Linear.None

                });

            });

        return growTween;

    }

    // 遍历buildingLayer中的楼宇对象，对其设置高度

    function setBuildingHeight(fromBlock, toBlock, num) {

        // 进度条onChange触发的情况

        if (fromBlock == toBlock) {

            var temp_blocks = blocks.slice(0, blocks.indexOf(toBlock) + 1);

            buildingLayer.children.forEach(function (v) {

                v.height = 1;

                if (temp_blocks.indexOf(v.userData['district']) >= 0) {

                    v.visible = true;

                    v.height = v.userData['height'];

                }

            });

        }

        // tween触发的情况

        else {

            buildingLayer.children.forEach(function (v) {

                if (v.userData['district'] == toBlock) {

                    var startHeight = 1;

                    var stopHeight = v.userData['height'];

                    var currentHeight = startHeight + (stopHeight - startHeight) * num;

                    v.visible = true;

                    v.height = currentHeight;

                }

            });

        }

    }

    var progressObj = { progress: 0 };

    // 创建一个进度条

    function creatProgress() {

        var bar = new THING.widget.Panel({ width: '800px' });

        bar.position = [10, 10];

        var progress = bar.addProgress(progressObj, 'progress', [

            { name: '全景', describe: '建外街道' },

            { name: '建外街道', describe: '朝外街道' },

            { name: '朝外街道', describe: '呼家楼街道' },

            { name: '呼家楼街道', describe: '三里屯街道' },

            { name: '三里屯街道', describe: '东外街道' },

            { name: '东外街道', describe: '东外街道' },

            { name: '左家庄街道', describe: '团结湖街道' },

            { name: '团结湖街道', describe: '团结湖街道' },

            { name: '麦子店街道', describe: '全景' },

        ]);

        var tween = undefined;

        // 设置每一步播放需要的时间,单位毫秒

        progress.time(3000);

        // 进度条变化

        progress.on('change', function (id) {

            setBuildingHeight(blocks[id], blocks[id], 1);

            if (tween) {

                tween.stop();

                if (id < blocks.length - 1) {

                    tween = grow(blocks[id], blocks[id + 1]);

                    tween.start();

                }

                else {

                    app.camera.earthFlyTo({

                        lonlat: [116.4488, 39.9187],

                        height: 4000,

                        time: 2000

                    });

                }

            }

        });

        progress.startCallback(function (state, id) {

            if (tween) {

                tween.stop();

                setBuildingHeight(blocks[id], blocks[id], 1);

            }

            if (state) {

                tween = grow(blocks[id], blocks[id + 1]);

                tween.start();

            }

        });

    }

    creatProgress();

});