• 用js的方式使用ThingJS!


    ThingJS代码创建步骤

    ThingJS中是如何创建代码去开发物联网可视化项目的呢?ThingJS的核心是什么?写代码第一步应该是什么呢?作为一个可视化平台,ThingJS在线开发平台该如何去使用呢?

    ThingJS作为一个webgl协议标准库,使用的是前端JavaScript语法,这使得JavaScript中的绝大部分方法在ThingJS中都可以使用,比如循环判断、function等等,这些在JavaScript中怎么写的,在ThingJS中就怎么写,所以说ThingJS是面向前端开发人员的3D js 库,只要会JavaScript,就能非常迅速的入门,尤其是在JavaScript、java受众很广的情况下,大部分的成寻缘入门ThingJS也会更加轻松。这样无论是让前端工作人员直接学习ThingJS还是让后端java人员来开发这个,都是极为方便的。

    ThingJS核心对象APP

    ThingJS的核心对象APP创建方法如下:

    var app = new THING.App();
    

    当然,这个是核心对象的创建方法,具体还有加载园区的方式,通过url的方式将园区加载至ThingJS中:

    var app = new THING.App({
        url: "models/storehouse"
    });

    其中的url则是我们的场景地址,此处为选填,该地址可写绝对路径也可写相对路径。有人可能会疑惑这个地址怎么来的?只需要通过Ctrl + J 这个快捷键或者直接点击园区按钮,双击即可自动生成核心对象APP以及相关URL,当然也可以不输入路径,在你需要的时候通过  app.create  创建园区物体,从而加载园区,如下例:

    var app = new THING.App();
    var obj = app.create({
        type: "Campus",
        url: "models/storehouse/",
        complete: function() {
        console.log("Campus created: " + this.id);
        }
    });

    除了园区的加载,地球的加载又是不同的代码,但是使用起来是一模一样的, 使用Ctrl + K 或者是直接点击地图按钮,双击地图即可引用对应场景,地图与园区在引用上还有些不同,地球需要使用到插件:

    https://www.thingjs.com/uearth/history/uearth.min.v1.7.7.2.js

    具体引用方法如下:

    // 加载地图
    var app = new THING.App();
    // 设置app背景为黑色
    app.background = [0, 0, 0];
    // 引用地图组件脚本
    THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/history/uearth.min.v1.7.7.2.js'], function () {
        app.create({
            type: 'Map',
            // 地图场景名:test
            url: 'https://www.thingjs.com/citybuilder_console/mapProject/config/TkRBd01ERT1DaXR5QnVpbGRlckAyMDE5',
            complete: function (event) {
                console.log(event.object.userLayers.length);
            }
        });
    });

    其中URL则是我们通过citybuilder搭建的3D城市地图场景了,那么是否能够既显示园区场景又显示三维城市地图场景呢?这个是需要方法控制的,如果直接两个合在一起,那么是不可能遗弃展示的,需要用到ThingJS官方示例的场景切换功能。下个文章我们再来介绍如何结合园区与地图!

    ThingJS,用js去开发三维可视化场景!

  • 相关阅读:
    两款开发辅助工具介绍
    探究Repository模式的两种写法与疑惑
    js 时间处理
    Jquery元素追加和删除
    js 格式验证总结
    jquery UI datepicker时间控件的使用
    jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码
    JS 字符串编码函数(解决URL特殊字符传递问题):escape()、encodeURI()、encodeURIComponent()区别详解
    form表单和ajax表单提交(Html.BeginForm()、Ajax.BeginForm())的差别
    了解了这些才能开始发挥jQuery的威力(转)
  • 原文地址:https://www.cnblogs.com/thingjs/p/13099274.html
Copyright © 2020-2023  润新知