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

简介: ThingJS支持3D地图轻量制作,城市是每个人的家,现在就教你如何制作3D地图!

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

智慧城市指的是运用信息和通信技术手段,实现精细化和动态管理,并提升城市管理成效和改善市民生活质量。城市大屏应用通过可视化的形式营造感知氛围,把数据背后的故事生动描绘,调动受众的情绪与感知,传达本地文化背后的商业价值。

ThingJS支持通过编辑界面可视化的点击方式来快速使用搭建地图工具,在智慧城市管理平台建设过程中,基于可视化实现集中指挥调度、预案及辅助决策以及服务,使得数据共享交换更加便捷。更多详情参阅Citybuilder技术文档 >

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

第 1 步:创建地图项目
点击+号,创建地图项目,可选择一键生成或者自己上传Geojason数据。
01 (2).GIF

第 2 步:选择底图
进入Citybuilder界面(自己上传数据),从【底图】列表中选取最贴近使用场景的【背景底图】模板,默认为Google影像。
02 (2).GIF

第 3 步:添加图层
上传准备好的Geojason数据,底图上新增一个地理图层。可继续利用【底图】组件来增强效果。
03.GIF

第 4 步:放置场景
进入【场景】,可从数据库中直接选择园区或建筑,选择地点,嵌入场景。之后进行【项目定位】,包括视角调整和交互参数配置。
040.GIF
041.GIF

第 5 步:预览发布
点击画布右下角全屏预览,预览完毕后点击发布,即可生成 URL,并可设置访问密码
05.GIF

如上图所示,生成的地图场景可转入ThingJS平台进行二次开发,纯js代码引用地图组件脚本,获取CityBuilder转出的url,定义类型为map,随后从map中获取项目的瓦片图层、业务图层,后续可进行绑定回调控制,并根据名称查询图层对象,编辑修改尺寸或大小参数。

官方示例如下:

var app = new THING.App();
app.background = [0, 0, 0];

// 引用地图组件脚本
THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {
    app.create({
        type: 'Map',
        // CityBuilder转出的url
        url: 'https://www.thingjs.com/citybuilder_console/mapProject/config/TVRFNE9UZz1DaXR5QnVpbGRlckAyMDE5',
        complete: function (event) {
            // 在这里编写业务代码
            var map = event.object;
            // 获取项目中的瓦片图层
            var baseLayers = map.baseLayers;
            // 获取项目中的业务图层
            var userLayers = map.userLayers;
            var buildingLayer = app.query('building')[0];
            buildingLayer.on(THING.EventType.DBLClick, function (e) {
                let obj = e.object;
                app.camera.earthFlyTo({
                    object: obj
                });
            });

            var toolbarWidth = 250;
            var toolbar = new THING.widget.Panel({
                hasTitle: true, // 是否有标题
                titleText: '图层列表',
                width: toolbarWidth
            });
            let clientWidth = app.domElement.clientWidth;
            toolbar.position = [clientWidth - toolbarWidth - 10, 10];
            userLayers.forEach(function (layer) {
                var button = toolbar.addBoolean({ open: true }, 'open').caption(layer.name);// 绑定回调
                button.on('change', function (ev) {
                    layer.visible = ev;
                });
            });

            // 先根据名称查询图层对象 名称是在CityBuilder中配置的图层的名称
            var primaryRoadLayer = app.query('primary')[0];
            var originWidth = primaryRoadLayer.renderer.width;
            new THING.widget.Button('修改线宽度', function () {
                if (primaryRoadLayer.renderer.width === originWidth) {
                    primaryRoadLayer.renderer.width = 8;
                }
                else {
                    primaryRoadLayer.renderer.width = originWidth;
                }
            });
            // 根据名称查询图层对象
            var bankLayer = app.query('bank')[0];
            var originSize = bankLayer.renderer.size;
            new THING.widget.Button('修改点尺寸', function () {
                if (bankLayer.renderer.size === originSize) {
                    // 修改整个图层对象的尺寸
                    bankLayer.renderer.size = 30;
                }
                else {
                    bankLayer.renderer.size = originSize;
                }
            });
            // 根据名称查询图层对象
            var buildingLayer = app.query('building')[0];
            var originHeight = buildingLayer.objects[0].height;
            new THING.widget.Button('修改建筑高度', function () {
                // 修改第一个对象的高度
                if (buildingLayer.objects[0].height === originHeight) {
                    buildingLayer.objects[0].height = 500;
                }
                else {
                    buildingLayer.objects[0].height = originHeight;
                }
            });
        }
    });
});

ThingJS,让开发者早点交付项目早点下班回家!

相关文章
|
Web App开发 前端开发 JavaScript
《如何制作一个媲美原生体验的选择器组件-卡晨》演讲视频+文字版
《如何制作一个媲美原生体验的选择器组件-卡晨》演讲视频+文字版
205 0
|
6月前
|
开发者 图形学 iOS开发
掌握Unity的跨平台部署与发布秘籍,让你的游戏作品在多个平台上大放异彩——从基础设置到高级优化,深入解析一站式游戏开发解决方案的每一个细节,带你领略高效发布流程的魅力所在
【8月更文挑战第31天】跨平台游戏开发是当今游戏产业的热点,尤其在移动设备普及的背景下更为重要。作为领先的游戏开发引擎,Unity以其卓越的跨平台支持能力脱颖而出,能够将游戏轻松部署至iOS、Android、PC、Mac、Web及游戏主机等多个平台。本文通过杂文形式探讨Unity在各平台的部署与发布策略,并提供具体实例,涵盖项目设置、性能优化、打包流程及发布前准备等关键环节,助力开发者充分利用Unity的强大功能,实现多平台游戏开发。
212 0
|
测试技术 数据库 UED
搭建开发类似虎牙斗鱼类型的娱乐游戏直播平台的四个步骤
下面我们就给大家介绍快速的搭建开发类似(虎牙、斗鱼)类型的娱乐游戏直播平台的四个步骤,通过搭建自己的娱乐游戏直播平台,不仅可以为用户提供有吸引力的娱乐内容,还能够产生丰厚的经济收益。
|
6月前
|
搜索推荐 Java Android开发
打造个性化安卓应用:从设计到部署的全攻略
【8月更文挑战第31天】在这篇文章中,我们将一起探索如何从零开始构建一个安卓应用,并为其添加个人特色。我们将通过实际的代码示例,学习如何使用Android Studio进行开发,以及如何将应用发布到Google Play商店。无论你是编程新手还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧,帮助你打造独一无二的安卓应用。
|
Kubernetes Devops 程序员
开发者云《云中谁送锦书来》热烈来袭,给你不一样的表白体验
这个七夕,你是那个浪漫的程序员吗? 扫码开启云效DevOps七夕云中密书 2000个超大Git定制鼠标垫等你领,更有机会获得Cherry机械键盘 ! (8月19-28日)
开发者云《云中谁送锦书来》热烈来袭,给你不一样的表白体验
|
5月前
|
图形学 C++ C#
Unity插件开发全攻略:从零起步教你用C++扩展游戏功能,解锁Unity新玩法的详细步骤与实战技巧大公开
【8月更文挑战第31天】Unity 是一款功能强大的游戏开发引擎,支持多平台发布并拥有丰富的插件生态系统。本文介绍 Unity 插件开发基础,帮助读者从零开始编写自定义插件以扩展其功能。插件通常用 C++ 编写,通过 Mono C# 运行时调用,需在不同平台上编译。文中详细讲解了开发环境搭建、简单插件编写及在 Unity 中调用的方法,包括创建 C# 封装脚本和处理跨平台问题,助力开发者提升游戏开发效率。
533 0
现有的游戏娱乐直播平台源代码开发平台,二开功能省钱又省时
随着游戏娱乐行业的蓬勃发展,开发一套高效的游戏娱乐直播平台成为了许多企业和个人的目标。在这篇文章中,我们将探讨一种新的开发策略,即通过源码二次开发来省钱和省时。
|
6月前
|
开发者 图形学 API
从零起步,深度揭秘:运用Unity引擎及网络编程技术,一步步搭建属于你的实时多人在线对战游戏平台——详尽指南与实战代码解析,带你轻松掌握网络化游戏开发的核心要领与最佳实践路径
【8月更文挑战第31天】构建实时多人对战平台是技术与创意的结合。本文使用成熟的Unity游戏开发引擎,从零开始指导读者搭建简单的实时对战平台。内容涵盖网络架构设计、Unity网络API应用及客户端与服务器通信。首先,创建新项目并选择适合多人游戏的模板,使用推荐的网络传输层。接着,定义基本玩法,如2D多人射击游戏,创建角色预制件并添加Rigidbody2D组件。然后,引入网络身份组件以同步对象状态。通过示例代码展示玩家控制逻辑,包括移动和发射子弹功能。最后,设置服务器端逻辑,处理客户端连接和断开。本文帮助读者掌握构建Unity多人对战平台的核心知识,为进一步开发打下基础。
226 0
|
安全 小程序 API
云开发技巧
在云开发技巧中,我们将向你介绍: 使用云函数HTTP触发器+云调用实现无需后端接入支付宝支付功能,并通过云函数接收支付回调功能; 使用云函数定时触发器实现每天凌晨定时调度任务。
云开发技巧
|
传感器 物联网 Android开发
【uFUN试用体验】小巧而不失精致,简单而不失内涵——uFun开发板开箱爆照
【uFUN试用体验】小巧而不失精致,简单而不失内涵——uFun开发板开箱爆照
196 0
【uFUN试用体验】小巧而不失精致,简单而不失内涵——uFun开发板开箱爆照

热门文章

最新文章