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,让开发者早点交付项目早点下班回家!

相关文章
|
3天前
|
存储 数据可视化 项目管理
有哪些“极简风”页面设计的办公协同工具?再不怕眼花缭乱啦!
在快节奏的现代职场中,极简风页面设计的协同工具成为提升工作效率的重要手段。本文介绍了10款极简风设计的办公协同工具,包括板栗看板、Notion、Trello、Slack、Asana、Figma、Invision、Moqups、Coda和Dropbox Paper。这些工具不仅界面简洁直观,功能强大,还能帮助团队高效协作,让工作更加井然有序。
64 43
有哪些“极简风”页面设计的办公协同工具?再不怕眼花缭乱啦!
|
3月前
|
开发者 图形学 前端开发
绝招放送:彻底解锁Unity UI系统奥秘,五大步骤教你如何缔造令人惊叹的沉浸式游戏体验,从Canvas到动画,一步一个脚印走向大师级UI设计
【8月更文挑战第31天】随着游戏开发技术的进步,UI成为提升游戏体验的关键。本文探讨如何利用Unity的UI系统创建美观且功能丰富的界面,包括Canvas、UI元素及Event System的使用,并通过具体示例代码展示按钮点击事件及淡入淡出动画的实现过程,助力开发者打造沉浸式的游戏体验。
83 0
|
3月前
|
图形学 C# 开发者
Unity粒子系统全解析:从基础设置到高级编程技巧,教你轻松玩转绚丽多彩的视觉特效,打造震撼游戏画面的终极指南
【8月更文挑战第31天】粒子系统是Unity引擎的强大功能,可创建动态视觉效果,如火焰、爆炸等。本文介绍如何在Unity中使用粒子系统,并提供示例代码。首先创建粒子系统,然后调整Emission、Shape、Color over Lifetime等模块参数,实现所需效果。此外,还可通过C#脚本实现更复杂的粒子效果,增强游戏视觉冲击力和沉浸感。
149 0
|
6月前
|
前端开发 定位技术 SEO
基于WordPress开发的高颜值的自适应主题,支持白天与黑夜模式
环境要求 WordPress >=6.0PHP >=7.4 主题特性 支持白天与暗黑模式 全局无刷新加载 支持博客、CMS、企业三种布局 内置 WP 优化策略 内置前台用户中心 支持 QQ / Github / Gitee / 微博登录 支持缩略图伪静态 全局顶部滚动公告 图形及极验验证码支持 自定义 SMTP 支持 一键全站变灰 网页压缩成一行 后台防恶意登录 内置出色的 SEO 功能 评论 ajax 加载 文章点赞、打赏、海报生成、分享 Twemoji 集成 丰富的广告位 丰富的小工具 自动百度链接提交 众多页面模板(读者墙 / 归档 / 书籍推荐 / 站点导航 / 标签 / 站点地图
69 5
|
6月前
|
人工智能 Linux C#
八宫格丨九宫格丨淘金镇丨潮玩元宇宙大逃杀游戏系统开发指南步骤及稳定版
uSurvival - the new Multiplayer Survival Asset from the creator of uMMORPG.
|
C# C语言 Android开发
一个超酷的开源uHand2.0机械手掌项目
一个超酷的开源uHand2.0机械手掌项目
223 1
|
缓存 Kubernetes API
数据缓存系列分享(三):通过 StableDiffusion 扩展插件实现网红爆款文字光影图
在文章《23秒完成从零开始搭建StableDiffusion》中我们详细讲解了通过ECI的数据缓存快速搭建StableDiffusion应用,用户通过模型网站选择好自己需要的模型,然后创建ECI数据缓存,即可快速部署自己的StableDiffusion应用。本文将基于StableDiffusion + 扩展插件 ControlNet 来完成实现网红爆款文字光影图
395 0
数据缓存系列分享(三):通过 StableDiffusion 扩展插件实现网红爆款文字光影图
|
机器学习/深度学习 算法
【OpenVI—视觉生产系列之视频插帧实战篇】几行代码,尽享流畅丝滑的视频观感
随着网络电视、手机等新媒体领域的快速发展,用户对于观看视频质量的要求也越来越高。当前市面上所广为传播的视频帧率大多仍然处于20~30fps,已经无法满足用户对于高清、流畅的体验追求。而视频插帧算法,能够有效实现多倍率的帧率提升,有效消除低帧率视频的卡顿感,让视频变得丝滑流畅。配合其它的视频增强算法,更是能够让低质量视频焕然一新,让观众享受到极致的播放和观看体验。
617 0
【OpenVI—视觉生产系列之视频插帧实战篇】几行代码,尽享流畅丝滑的视频观感
|
传感器 物联网 Android开发
【uFUN试用体验】小巧而不失精致,简单而不失内涵——uFun开发板开箱爆照
【uFUN试用体验】小巧而不失精致,简单而不失内涵——uFun开发板开箱爆照
173 0
【uFUN试用体验】小巧而不失精致,简单而不失内涵——uFun开发板开箱爆照
|
数据可视化
办公必备的5款实用软件,各个都非常小巧且无广告
安利过很多软件了,今天再次推荐5款神级软件,各个都是免费、轻量、无广告,属于绝对良心,让你赞不绝口!
232 1
办公必备的5款实用软件,各个都非常小巧且无广告