请选择 进入手机版 | 继续访问电脑版
分享
查看: 798|回复: 0

[分享] ThingJS:3D地图轻量制作方法普及

[复制链接]

ThingJS:3D地图轻量制作方法普及

发表于 2020-9-25 19:29:06 来自 分享 阅读模式 倒序浏览
zzv_icon798 zzr_icon0 查看全部

作为户外广告界的“兵家必争之地”,时报广场出现过许多有趣的广告牌。一些大屏幕,已经和我们的生活产生了奇妙的联系。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,让开发者早点交付项目早点下班回家!


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

本版积分规则

130700ppkpl8x3t7tt1b1t