前端开发用它就能做可视化应用!进来撒一眼!

本文介绍了一位前端工程师如何利用webgl技术和thingjs平台开发物联网3D可视化应用。thingjs是一个面向物联网的3D可视化开发平台,支持在线开发、数据对接和项目部署。通过实例代码,展示如何创建建筑并进行动画效果,帮助前端开发者拓展技能领域。
摘要由CSDN通过智能技术生成

有人说我一个前端工程师,只懂怎么写页面,如何能开发企业可视化应用?近几年可视化应用已经渗透到各行各业中,科技园、医院、学校、工厂、消防、安保、仓储无不涉猎!作为一个前端开发人员,你有必要再往前迈一步,多了解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',

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值