请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 408|回复: 0

[分享] ThingJS:3D舆图轻量建造方式提高

[复制链接]
avatar

52

主题

57

帖子

79

积分

注册会员

Rank: 2

积分
79
ico_lz  楼主| 发表于 2020-9-25 19:29:06 | 显示全部楼层 |阅读模式

作为户外广告界的“兵家必争之地”,时报广场出现过很多风趣的广告牌。一些大屏幕,已经和我们的生活发生了奇妙的联系。ThingJS支持3D舆图轻量建造,城市是每小我的家,现在就教你若何建造3D舆图!

聪明城市指的是应用信息和通讯技术手段,实现邃密化和静态治理,并提升城市治理效果和改良市民生活质量。城市大屏利用经过可视化的形式营建感知空气,把数据背后的故事活泼描画,变更受众的情感与感知,转达当地文化背后的贸易代价。

ThingJS支持经过编辑界面可视化的点击方式来快速利用搭建舆图工具,在聪明城市治理平台扶植进程中,基于可视化实现集合批示调剂、预案及帮助决议以及办事,使得数据同享交换加倍便利。更多详情参阅CityBuilder技术文档 >

登录您的ThingJS平台账号,进入在线编辑界面,在操纵可视化办事下点击进入Citybuidler。

第 1 步:建立舆图项目

点击+号,建立舆图项目,可挑选一键天生大概自己上传Geojason数据。

ThingJS:3D舆图轻量建造方式提高

第 2 步:挑选底图

进入Citybuilder界面(自己上传数据),从【底图】列表中拔取最切近利用处景的【布景底图】模板,默以为Google影象。

ThingJS:3D舆图轻量建造方式提高

第 3 步:增加图层

上传预备好的Geojason数据,底图上新增一个地理图层。可继续操纵【底图】组件来增强结果。

ThingJS:3D舆图轻量建造方式提高

第 4 步:放置场景

进入【场景】,可从数据库中间接挑选园区或修建,挑选地址,嵌入场景。之落后行【项目定位】,包括视角调剂和交互参数设置。

ThingJS:3D舆图轻量建造方式提高
ThingJS:3D舆图轻量建造方式提高

第 5 步:预览公布

点击画布右下角全屏预览,预览终了后点击公布,即可天生 URL,并可设备拜候密码

ThingJS:3D舆图轻量建造方式提高

如上图所示,天生的舆图场景可转入ThingJS平台停止二次开辟,纯js代码援用舆图组件剧本,获得CityBuilder转出的url,界说范例为map,随后从map中获得项目标瓦片图层、营业图层,后续可停止绑定回调控制,并按照称号查询图层工具,编辑点窜尺寸或巨细参数。

官方示例以下:

  1. var app = new THING.App();
  2. app.background = [0, 0, 0];
  3. // 援用舆图组件剧本
  4. THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {
  5. app.create({
  6. type: 'Map',
  7. // CityBuilder转出的url
  8. url: 'https://www.thingjs.com/citybuilder_console/mapProject/config/TVRFNE9UZz1DaXR5QnVpbGRlckAyMDE5',
  9. complete: function (event) {
  10. // 在这里编写营业代码
  11. var map = event.object;
  12. // 获得项目中的瓦片图层
  13. var baseLayers = map.baseLayers;
  14. // 获得项目中的营业图层
  15. var userLayers = map.userLayers;
  16. var buildingLayer = app.query('building')[0];
  17. buildingLayer.on(THING.EventType.DBLClick, function (e) {
  18. let obj = e.object;
  19. app.camera.earthFlyTo({
  20. object: obj
  21. });
  22. });
  23. var toolbarWidth = 250;
  24. var toolbar = new THING.widget.Panel({
  25. hasTitle: true, // 能否有题目
  26. titleText: '图层列表',
  27. width: toolbarWidth
  28. });
  29. let clientWidth = app.domElement.clientWidth;
  30. toolbar.position = [clientWidth - toolbarWidth - 10, 10];
  31. userLayers.forEach(function (layer) {
  32. var button = toolbar.addBoolean({ open: true }, 'open').caption(layer.name);// 绑定回调
  33. button.on('change', function (ev) {
  34. layer.visible = ev;
  35. });
  36. });
  37. // 先按照称号查询图层工具 称号是在CityBuilder中设置的图层的称号
  38. var primaryRoadLayer = app.query('primary')[0];
  39. var originWidth = primaryRoadLayer.renderer.width;
  40. new THING.widget.Button('点窜线宽度', function () {
  41. if (primaryRoadLayer.renderer.width === originWidth) {
  42. primaryRoadLayer.renderer.width = 8;
  43. }
  44. else {
  45. primaryRoadLayer.renderer.width = originWidth;
  46. }
  47. });
  48. // 按照称号查询图层工具
  49. var bankLayer = app.query('bank')[0];
  50. var originSize = bankLayer.renderer.size;
  51. new THING.widget.Button('点窜点尺寸', function () {
  52. if (bankLayer.renderer.size === originSize) {
  53. // 点窜全部图层工具的尺寸
  54. bankLayer.renderer.size = 30;
  55. }
  56. else {
  57. bankLayer.renderer.size = originSize;
  58. }
  59. });
  60. // 按照称号查询图层工具
  61. var buildingLayer = app.query('building')[0];
  62. var originHeight = buildingLayer.objects[0].height;
  63. new THING.widget.Button('点窜修建高度', function () {
  64. // 点窜第一个工具的高度
  65. if (buildingLayer.objects[0].height === originHeight) {
  66. buildingLayer.objects[0].height = 500;
  67. }
  68. else {
  69. buildingLayer.objects[0].height = originHeight;
  70. }
  71. });
  72. }
  73. });
  74. });
复制代码


ThingJS,让开辟者早点托付项目早点放工回家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则