ThingJS 开发使用感悟

已于 2022-08-18 08:40:27 修改
阅读量6.7k 收藏 27
点赞数 6
分类专栏： 前端 文章标签： echarts 前端 javascript
于 2022-08-11 14:28:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a715167986/article/details/126284775
版权

ThingJS 开发使用感悟

前言

  • 近日，笔者所在公司购买了一个付费 JS 三维可视化框架开发平台——thingjs, 打算基于 thingjs 制作一个数字乡村可视化平台，笔者大概花了 3 个月的时间了解学习 thingjs 并初步制作了一版符合 UI 设计稿及交互的前端项目。初步完成后感触良多，这里写下一些个人感悟点用于有相关业务的开发人员避坑。

什么是 ThingJS

ThingJS 隶属于北京优锘科技有限公司，是优锘科技旗下物联网三维可视化开发平台。ThingJS采用JavaScript开发语言，主要面向前端程序员和实施人员。ThingJS平台让传统企业无需组建3D可视化开发团队，也能开发3D可视化应用。

  • 以上解释来自百度百科，我相信应该是由其官方人员编写的。简单的说，ThingJS 是由国人开发的（北京优锘），需要付费使用的，基于 ThreeJS 封装的一个 3d 可视化开发平台。

为何要使用一个付费产品, 不采用开源解决方案?

  • 因为传统上，如果我们需要开发图表类的应用，比如说常见的大屏应用，我们可以使用百度的echarts, 阿里的AntV,开源大热的D3JS，但是这些框架本质上说都是 2d 的图表展示效果，当然，它们也提供了一些三维图表，但是总体上说，echarts等平台提供的三维图表不满足很多复杂的带有一些特定交互场景的业务，所以在 web 开发方面，尤其是当下智慧城市方向特别火热时，我们有必要寻求一款可以在 web 端进行较复杂 3d 可视化场景开发的平台。那么在这一方向，目前的技术/框架有：WebGL, ThreeJS. 那它们的关系如何呢：

WebGL可以处理3D图像，听起来是非常高兴的一件事，但是WebGL实在是太底层了，WebGl解决是如何再画布上画图的问题，怎么画点，线，面，怎么上色，怎么贴图，怎么处理光线，视角转动之后怎么换算绘制等等。这些对于一个做3D应用的开发者来说要学的东西太多了。
Threejs库的出现解决了底层的渲染细节和复杂的数据结构，终于将复杂的底层细节抽象出来，使得大家开发3d应用更容易了一些。和很多开发者交流threejs都是他们首次接触的WebGL 3D库，并能很容易的就能开始做一些实验。
但是使用Threejs开发应用还是门槛很高，单就一个加载模型，调光，选择模型弹框的功能，就能干出Threejs上百行代码。同时还有很多复杂的3D概念需要理解。这时就需要ThingJS了。

  • 来自来自 ThingJS 团队的文章。

简单的说，WebGL 是需要从零开发 3d 场景的基础知识，而 ThreeJS 封装了 WebGL 的很多底层细节，用 ThreeJS 来做 3d 开发更简便，而 ThingJS 在 ThreeJS 的基础上又做了一层封装，进一步简化非专业人员开发 3d 场景的门槛。

如何使用 ThingJS

  • 笔者以公司目前需要开发的一个业务场景为例：笔者所在公司需要开发一个 3d 可视化的智慧乡村场景，在这个 3d 场景上加上一些 echarts 大屏的图表，同时还会有一些交互。大致场景如下：
    在这里插入图片描述

  • 该项目的地图背景是一个倾斜摄影模型，当然倾斜摄影模型只是一部分，在其外围是一个普通的，由 ThingJS 官方提供的一个三维底图。我们需要在这个模型基础上加入一些图表的展示，同时在此模型上加入大量的地图点位，每个地图点位都是一个摄像头，可以通过点击地图点位播放实时监控视频。

  • 开发流程

    • 首先便是购买 ThingJS 付费服务
      在这里插入图片描述

    来自 thingjs 官网，可以说是价格不菲了，入手需谨慎。

    • 其次，导入倾斜摄影模型，倾斜摄影模型的源数据来自无人机航拍。这里也是 ThingJS 提供的付费服务，我们只需付钱，将源数据交给官方人员，平台帮我们生成倾斜摄影模型。
      在这里插入图片描述

    • 到此开始正式开发，我们的思路是将项目分成两部分，即地图模型端和图表端。地图模型端主要负责处理地图模型的一些交互，如切换地图底图；从后端获取地图点位数据并渲染到地图上；点击地图点位显示点位信息，并支持视频播放。最终项目在运行时，地图模型端是以一个 iframe 的形式嵌入到图表端的。

    • 这里有一点值得注意的是如果要实现最终的效果，不把项目分成两部分也是可以的，即把 echarts 图表部分也写在地图模型端，这样做的好处时之后不需要考虑 iframe 交互的问题。官方也提供了一个类似的例子。于是第一个坑点出现了，thingjs 是不支持目前主流的 JS 模块化方案的（ESM，UMD, CMD……），引入模块化文件需要靠官方提供的一个 api

const loadViedeJs = async () => {
    return new Promise(resolve => {
        THING.Utils.dynamicLoad([
            "https://www.thingjs.com/uploads/wechat/xxxx/static/video-js.min.css",
            "https://www.thingjs.com/uploads/wechat/xxxx/static/video.min.js"],
            function (result) {
                resolve(true)
            },
            true, // 选填 是否带时间戳
            true, // 选填 是否按顺序下载
            false //选填 文件是否包含加密文件
        )
    })
}

类似如上的写法，而如果要实现一个较为庞大复杂的业务场景时，就不太方便了，所以项目一开始便是分为地图模型端和图表端两部分的。

开发流程

在开发流程上笔者先开发了项目的图表端的主要内容，之后再开发地图端部分。因为相比之下图表端的部分以 echarts和传统 html 网页为主，开发起来较为简单。先易后难的开发流程较好。

  • 图表端
    • 静态文件的编写
      这里笔者新建了一个本地代码备份调试仓库，将所有静态代码现在本地用最基本的 html 文件实现出来。下面以设计稿中的乡村文明-农村基层党建为例
      在这里插入图片描述
      要开发这个小模块，还需要将其细分为两部分，即 echarts 图表和普通 html 部分。新建一个 html 静态文件编写开发内容：
<!DOCTYPE html>
<html>

<head>
  <title>HTML</title>
</head>

<body>
  <div style="display: inline-block">
    <div style="
					padding: 2px 0 4px 29px;
					background: url(./assets/images/common/title-bg.png) no-repeat;
					font-family: YouSheBiaoTiHei;
					font-size: 20px;
					color: rgba(255, 247, 224, 0.9);
					letter-spacing: 0.4px;
				">
      农村基层党建
    </div>
    <div style="
					margin-top: 4px;
					padding: 35px 20px;
					padding-top: 0;
					background: url(./assets/images/common/data-bg.png) no-repeat;
					background-size: cover;
					overflow: hidden;
				">
      <div style="
						margin: 21px auto;
						width: 130px;
						text-align: center;
						background: url(./assets/images/common/blue.png) no-repeat;
						background-size: cover;
					">
        <div style="
							font-family: DINAlternate-Bold;
							font-size: 32px;
							color: #409aff;
							text-shadow: 0 0 20px #19acb5;
						">
          500
        </div>
        <div style="
							margin-top: 34px;
							font-family: PingFangSC-Regular;
							font-size: 18px;
							color: #a8dedd;
							letter-spacing: 0;
							text-shadow: 0 1px 2px rgba(35, 26, 124, 0.61);
						">
          基层党支部数量
        </div>
      </div>
      <div>
        <div style="
							font-family: YouSheBiaoTiHei;
							font-size: 20px;
							color: rgba(255, 247, 224, 0.9);
							letter-spacing: 0.4px;
						">
          <img src="./assets/images/manage/decoration-1.png" style="margin-right: 7px" />
          党员类型
        </div>
        <div style="height: 132px">
          <div style="
								background: url(./assets/images/common/circle.png) no-repeat;
							">
            <span>4,961</span>
          </div>
          <div>
            <div><span>预备党员</span> 2,845 <span>44%</span></div>
            <div><span>预备党员</span> 2,845 <span>44%</span></div>
          </div>
        </div>
      </div>
      <div>
        <div style="
							font-family: YouSheBiaoTiHei;
							font-size: 20px;
							color: rgba(255, 247, 224, 0.9);
							letter-spacing: 0.4px;
						">
          <img src="./assets/images/manage/decoration-1.png" style="margin-right: 7px" />党员年龄分布情况
        </div>
        <div style="
							padding: 25px 0;
							margin-left: 46px;
							width: 314px;
							background: url(./assets/images/common/Academic-degree.png)
								no-repeat;
							background-size: cover;
						">
          <div style="
								text-align: center;
								font-family: DINAlternate-Bold;
								font-size: 32px;
								color: #ffffff;
								letter-spacing: 0;
								text-shadow: 0 0 16px #91ffff;
							">
            200
          </div>
          <div style="
								text-align: center;
								font-family: PingFangSC-Regular;
								font-size: 18px;
								color: #a8dedd;
								letter-spacing: 0;
								text-shadow: 0 1px 2px rgba(35, 26, 124, 0.61);
							">
            大专以以上学历
          </div>
        </div>
        <div style="height: 224px">柱状图预留</div>
      </div>
      <div>
        <div style="
							font-family: YouSheBiaoTiHei;
							font-size: 20px;
							color: rgba(255, 247, 224, 0.9);
							letter-spacing: 0.4px;
						">
          <img src="./assets/images/manage/decoration-1.png" style="margin-right: 7px" />男女占比
        </div>
        <div style="
							display: flex;
							justify-content: center;
							align-items: center;
							margin-top: 22px;
						">
          <div>
            <div style="
									font-family: PingFangSC-Medium;
									font-size: 16px;
									color: #e0f7ff;
								">
              男生
            </div>
            <div style="
									font-family: DINAlternate-Bold;
									font-size: 16px;
									color: #44dbda;
								">
              567
            </div>
          </div>
          <div style="margin: 0 22px">
            <img src="./assets/images/man.png" />
            <img src="./assets/images/man.png" />
            <img src="./assets/images/man.png" />
            <img src="./assets/images/man.png" />
            <img src="./assets/images/man.png" />
            <img src="./assets/images/man.png" />
            <img src="./assets/images/man.png" />
            <img src="./assets/images/man.png" />
            <img src="./assets/images/man.png" />
            <img src="./assets/images/man.png" />
          </div>
          <div>
            <div style="
									font-family: PingFangSC-Medium;
									font-size: 16px;
									color: #e0f7ff;
								">
              女生
            </div>
            <div style="
									font-family: DINAlternate-Bold;
									font-size: 16px;
									color: #44dbda;
								">
              567
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

注意这里笔者没有把样式代码写在 style 标签中，之前是考虑到最终 html 代码会以模板的形式加入到 JS 代码中去，感觉如果将 CSS 代码写在 style 标签会不好插入到模板中。但是后面笔者发现其实将 CSS 代码写在模板中也未尝不可，但是需要注意的时类名的命名上尽量不要重复，因为一旦类名重复可能会影响到其他组件的样式（推荐使用 BEM 方法进行命名）。

  • 将静态文件改写成能在 thingjs 图表端空白文件中运行的 JS 文件
    如下：
this.clearDom() //在每次进入创建DOM之前必须清除之前的DOM
let dom = this.getDom() //获取DOM节点
let jq = this.getJquery() //获取Jquery
let data = this.getComponentData() //获取组件数据

let topTitle = data.topTitle //标签数据
let title = data.title //标题数据
let content = data.content //内容数据

const aa = `<div class="civilization" style="display: inline-block">
      <div
        style="padding: 2px 0 4px 29px;
        background: url(/uploads/wechat/oLX7p00hNvyDvp6C44l-mJtTtmAo/file/数字清水/static/images/common/title-bg.png) no-repeat;
        font-family: YouSheBiaoTiHei;
        font-size: 20px;
        color: rgba(255, 247, 224, 0.9);
        letter-spacing: 0.4px;">
        农村基层党建
      </div>
      <div
        style="margin-top: 4px;
        padding: 35px 20px;
        padding-top: 0;
        background: url(/uploads/wechat/oLX7p00hNvyDvp6C44l-mJtTtmAo/file/数字清水/static/images/common/data-bg.png) no-repeat;
        background-size: cover;
        overflow: hidden;">
        <div
          style="margin: 21px auto;
          width: 140px;
          text-align: center;
          background: url(/uploads/wechat/oLX7p00hNvyDvp6C44l-mJtTtmAo/file/数字清水/static/images/common/blue.png) no-repeat;
          background-size: cover;">
          <div
            style="font-family: DINAlternate-Bold;
            text-align: center;
            font-size: 32px;
            color: #409aff;
            text-shadow: 0 0 20px #19acb5;">
            500
          </div>
          <div
            style="margin-top: 34px;
            text-align: center;
            font-family: PingFangSC-Regular;
            font-size: 18px;
            color: #a8dedd;
            letter-spacing: 0;
            text-shadow: 0 1px 2px rgba(35, 26, 124, 0.61);">
            基层党支部数量
          </div>
        </div>
        <div>
          <div
            style="font-family: YouSheBiaoTiHei;
            font-size: 20px;
            color: rgba(255, 247, 224, 0.9);
            letter-spacing: 0.4px;">
            <img
              src="/uploads/wechat/oLX7p00hNvyDvp6C44l-mJtTtmAo/file/数字清水/static/images/manage/decoration-1.png"
              style="margin-right: 7px"
              />
            党员类型
          </div>
          <div style="height: 110px">
            <div
              style="background: url(/uploads/wechat/oLX7p00hNvyDvp6C44l-mJtTtmAo/file/数字清水/static/images/common/circle.png)
              no-repeat;">
              <span>4,961</span>
            </div>
            <div>
              <div><span>预备党员</span> 2,845 <span>44%</span></div>
              <div><span>预备党员</span> 2,845 <span>44%</span></div>
            </div>
          </div>
        </div>
        <div>
          <div
            style="font-family: YouSheBiaoTiHei;
            font-size: 20px;
            color: rgba(255, 247, 224, 0.9);
            letter-spacing: 0.4px;">
            <img
              src="/uploads/wechat/oLX7p00hNvyDvp6C44l-mJtTtmAo/file/数字清水/static/images/manage/decoration-1.png"
              style="margin-right: 7px"
              />党员年龄分布情况
          </div>
          <div
            style="padding: 25px 0;
            margin-left: 46px;
            width: 314px;
            background: url(/uploads/wechat/oLX7p00hNvyDvp6C44l-mJtTtmAo/file/数字清水/static/images/common/Academic-degree.png)
            no-repeat;
            background-size: cover;">
            <div
              style="text-align: center;
              font-family: DINAlternate-Bold;
              font-size: 32px;
              color: #ffffff;
              letter-spacing: 0;
              text-shadow: 0 0 16px #91ffff;">
              200
            </div>
            <div
              style="text-align: center;
              font-family: PingFangSC-Regular;
              font-size: 18px;
              color: #a8dedd;
              letter-spacing: 0;
              text-shadow: 0 1px 2px rgba(35, 26, 124, 0.61);">
              大专以以上学历
            </div>
          </div>
          <div style="height: 190px"></div>
        </div>
        <div>
          <div
            style="font-family: YouSheBiaoTiHei;
            font-size: 20px;
            color: rgba(255, 247, 224, 0.9);
            letter-spacing: 0.4px;">
            <img
              src="/uploads/wechat/oLX7p00hNvyDvp6C44l-mJtTtmAo/file/数字清水/static/images/manage/decoration-1.png"
              style="margin-right: 7px"
              />男女占比
          </div>
          <div style="display: flex;justify-content: center; align-items: center; margin-top: 22px">
            <div>
              <div
                style="font-family: PingFangSC-Medium;
                font-size: 16px;
                color: #e0f7ff;">
                男生
              </div>
              <div
                style="font-family: DINAlternate-Bold;
                font-size: 16px;
                color: #44dbda;">
                567
              </div>
            </div>
            <div style="margin: 0 22px">
              <img src="/uploads/wechat/oLX7p00hNvyDvp6C44l-mJtTtmAo/file/数字清水/static/images/man.png" />
              <img src="/uploads/wechat/oLX7p00hNvyDvp6C44l-mJtTtmAo/file/数字清水/static/images/man.png" />
              <img src="/uploads/wechat/oLX7p00hNvyDvp6C44l-mJtTtmAo/file/数字清水/static/images/man.png" />
              <img src="/uploads/wechat/oLX7p00hNvyDvp6C44l-mJtTtmAo/file/数字清水/static/images/man.png" />
              <img src="/uploads/wechat/oLX7p00hNvyDvp6C44l-mJtTtmAo/file/数字清水/static/images/man.png" />
              <img src="/uploads/wechat/oLX7p00hNvyDvp6C44l-mJtTtmAo/file/数字清水/static/images/man.png" />
              <img src="/uploads/wechat/oLX7p00hNvyDvp6C44l-mJtTtmAo/file/数字清水/static/images/man.png" />
              <img src="/uploads/wechat/oLX7p00hNvyDvp6C44l-mJtTtmAo/file/数字清水/static/images/man.png" />
              <img src="/uploads/wechat/oLX7p00hNvyDvp6C44l-mJtTtmAo/file/数字清水/static/images/man.png" />
              <img src="/uploads/wechat/oLX7p00hNvyDvp6C44l-mJtTtmAo/file/数字清水/static/images/man.png" />
            </div>
            <div>
              <div
                style="font-family: PingFangSC-Medium;
                font-size: 16px;
                color: #e0f7ff;">
                女生
              </div>
              <div
                style="font-family: DINAlternate-Bold;
                font-size: 16px;
                color: #44dbda;">
                567
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>`
    
jq(dom).append(aa) //创建标签、标题和内容的div

这里需要注意的是类似 this.getJquery() //获取Jquery 这样的代码，通过 this 获取 jquery 函数是由 thingsjs 平台提供的能力，作为使用开发者却又无法在全局自定义挂载一个可使用的全局工具函数。

  • 改写完成后，将上述 JS 代码复制粘贴到 thingjs 图表端对应的空白组件代码编写区中去。
    在这里插入图片描述
    这里需要注意的一点是因为在本地调试完毕之后再复制粘贴到 thingjs 在线平台运行，一般来说是不会报什么问题的，但是因为开发环境的不同及一切其他原因，当我们粘贴代码后点击保存&运行按钮后仍可能运行不正常，这时候只需要 f12 打开浏览器控制台慢慢排查问题即可，待问题排查解决完毕该部分的 HTML 部分功能算是暂时完成了。之后再来处理 echarts 图表部分。

  • echarts 图表部分的开发
    在这里插入图片描述
    在这部分的开发里，笔者发现其有些效果会触发一些 bug 导致无法实现。比如说设计稿给出的 x轴的坐标名是带有图片背景的，笔者在本地开发可以实现这样的效果，但是将代码复制到在线开发平台就不行。

  • 接入接口数据
    在将一个个模块开发完毕之后，需要接入服务端接口数据。这里笔者是通过新建一个小的空白组件的方式进行的。
    在这里插入图片描述
    这里是用 jquery 自带的 ajax 请求方法进行的请求。之后将请求到的数据通过数据总线发布订阅的方式分发到各个业务组件中。

  • 图表端开发综述
    图表端的开发难度比想象中要大不少，这种难度不仅体现在对新工具平台的使用探索上，也体现在利用发布订阅的模式总览全局上。在编码方面，由于平台提供的代码编码端体验不佳，我们不得不先在本地进行开发再将相关代码复制到在线平台，而调试修改代码也是如此繁琐，目前暂未探索出更好的方式。

流光D
关注
  • 6
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
vue20全家桶thinkjs框架
08-10
vue2.0全家桶 thinkjs框架
ThingsJS:ThingsJS是一个框架，用于在Raspberry PI等IoT设备上运行JavaScript应用程序。 有关更多详细信息，请参见下文
05-06
ThingsJS ThingsJS是一个框架，用于在Raspberry PI等IoT设备上运行JavaScript应用程序 注意：该存储库当前正在积极开发中，其内容可能会发生重大更改。 目录结构 /bin /docs /lib /core /util /util /dashboard /samples 该存储库的组织方式如下： 包含与软件包一起安装things-js CLI（shell脚本）。 还包含默认配置文件。 包含JSDoc生成的API文档。 包含核心的ThingsJS代码 包含主要的ThingsJS对象，例如Code ， CodeEngine ， Pubsub ， Dispatcher 。 包含系统中使用的通用实用程序模块。 包含补充应用程序和调试工具 包含ThingsJS Dashboard应用程序； 这是一个express网络应用程序 包含可
数字孪生--thingjs
wanxiweilai的博客
08-11 542
4、使用自定义模型时需要导入模型的URL，然后设置type为thing。1、使用js创建新的模型（设置模型的参数，长宽高、模型的外观颜色需要单独设置），3、 物体模型的移动，旋转。
ThingsJs--学习笔记3：在springboot项目前端嵌入thingsjs页面，并在实现对它的跨域数据对接
ZLZQ_Yuan
05-29 2280
1.在线编写thingsjs页面 var app = new THING.App(); app.background = [0, 0, 0]; // app.camera.earthFlyTo. THING.Utils.dynamicLoad('https://www.thingjs.com/uearth/uearth.min.js', function () { // 创建一个地图 var map = app.create({ type: 'Map', at
数字孪生——thing.js和three.js
smile_hahahaxixi的博客
08-07 3467
本文讲了thing.js和three.js的对比及它们的应用
使用three.js 的 交互式 3D 心脏模型
07-14
使用three.js 的 交互式 3D 心脏模型
ThingsJs-学习笔记1:初步了解
ZLZQ_Yuan
05-28 2764
1.官网： thingsjs官网 2.大致功能概述： thingsjs介绍 ThingJS平台的推出，解决了传统3D开发人员投入大、开发效率低、场景制作周期长、模型无法复用、系统部署复杂的问题。 特点： （1）强大的3D引擎：可在各类主流网页浏览器中自如运行，包括可在移动端直接访问运行。 （2）简化模型制作：ThingBuilder（包括面向园区级别的搭建工具CampusBuilder，还包括面向城市级场景的CityBuilder）。使用平台的CampusBuilder3D场景快速搭建工具，拥有便捷的搭建
thing.js入门学习
lff18277233091的博客
07-29 3884
1.官网链接，若有不懂的直接戳官网：thing.js官网 2.开发工具：直接使用在线开发工具 3.学习路线：先了解清楚thing.js的用途 可以做可视化页面展示 做3D效果等 4.建议：一定要浏览文档及看文档的官方示例（非常重要个人觉得） 5.做项目的时候都是用vue语法，但是目录结构方面有很大的差别： 自我感觉到的相同点： 可以用vue的双向数据绑定及生命周期，监听及计算属性的用法都相同，js都是通用的 自我感觉到的不同点： 更多的是使用原生js创建节点及插入元素及使用模板字符串 ..
ThingJS开发使用感受
@Fonden
08-09 648
出于为了实现有关厂区的数字孪生项目，断断续续使用ThingJS平台开发一年左右，做一个使用感受的总结。在编码方面，笔者的编码方式和博客中的描述基本一致：“由于平台提供的代码编码端体验不佳，我们不得不先在本地进行开发，再将相关代码复制到在线平台，而调试修改代码也是如此繁琐”。个人感觉至少现阶段的ThingJS还是比较适合去做一些简单的业务场景、数据交互简单的项目，类似于大屏展示，这种纯数据展示；如果要实现一个较为庞大复杂的业务场景时，就不太方便，开发难度也会随之增加。
【ThingJS | 3D可视化】开发框架，一站式数字孪生
東方幻想郷的博客
08-23 1354
ThingJS是一个基于WebGL和Three.js的开源3D JavaScript库，用于创建交互式的3D场景和应用程序。它提供了丰富的功能和工具，使开发人员能够简单而高效地构建各种类型的3D应用。ThingJS支持导入各种3D模型格式，并提供了各种渲染效果和交互功能，例如阴影、光照、碰撞检测等。
paginathing.js
02-18
paginathing.js，方便实现表格的jquery动态加载页数。
JS添加删除DIV的简单实例
10-21
下面小编就为大家带来一篇JS添加删除DIV的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
天津市房屋建筑物轮廓geojson三维建模数据gis含高度属性shp2020年thingjs平台
07-06
thingjs平台可以用，其他家数据转换后加载不了，文件包含geojson和shp格式。大市区房屋轮廓都有，属性有高度字段，品质很好
upf.rar_thing8bm_upf_upf开发_如何打开UPF
07-14
简单的upf代码，供初学者使用，如果需要，可以下载。
ThingJS-front:ThingJS.io平台的前端
05-15
该项目是ThingJS平台的开发模板。 基于主要利润开源的轻型跨平台应用任何层的单一语法（JavaScript） 相关的开发堆栈（webpack，npm等） 运行时和开发依赖项（通过npm） 跨平台，硬件独立的数据总线（ ） 跨平台，...
基于ThingJS的3D可视化.zip
最新发布
02-17
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
ThingJS学习
奔跑的狮子
11-05 942
【代码】ThingJS学习。
ThinkJS安装到启动
太阳晒屁股了的博客
05-17 743
前言 ThinkJS 是一款 Node.js 的 MVC 框架，所以安装 ThinkJS 之前，需要先安装 Node.js 环境。ThinkJS 需要 Node.js 的版本>=0.12.0，如果版本小于这个版本，需要升级 Node.js，否则无法启动服务 安装 ThinkJS npm install thinkjs@2 -g --verbose 如果安装慢的话，可以尝试使用淘宝...
数字孪生可视化开发技术（ThingJS）学习笔记
jclee95的个人博客
08-07 5494
笔者参加了一个有优锘科技（以下简称该公司）举办的数字孪生可视化开发技术训练营培训，该公司研发了低代码 3D可视化开发平台 ThingJS 相关生态链，主要用于以一种低代码简单的方式构建城市、园区等生产生活应用场景下数据展示。这些相关培训的内容也是本文的记录点。..............................................................................................................................
如何使用thing.js
03-25
A：使用thing.js可以按照以下步骤进行： 1. 在浏览器中引入thing.js文件。 2. 创建一个Thing对象，可以指定一些参数，如名称、标签、描述等。 3. 为Thing对象添加属性、方法、事件等。 4. 将Thing对象添加到Thing实例中。 5. 调用Thing实例的start方法来启动Thing。 例如，以下代码演示了创建和启动一个简单的Thing： ```javascript // 引入thing.js文件 <script src="thing.js"></script> // 创建一个Thing对象并添加属性、方法 var myThing = Thing({ name: "My Thing", properties: { state: "off" }, methods: { turnOn: function() { this.state = "on"; console.log("Turned on"); }, turnOff: function() { this.state = "off"; console.log("Turned off"); } } }); // 创建一个Thing实例并添加Thing对象 var myThingInstance = new ThingInstance({ thing: [myThing] }); // 启动Thing实例 myThingInstance.start(); ``` 这样，就可以使用turnOn和turnOff方法来控制状态属性state的值了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值