3D地图赋予城市大屏生命力，使得数据显示变得活泼化，造成了残缺的数据三维可视化治理。ThingJS提供3D地图组件，通过我的项目参数设置生成URL，疾速开发可视化商业我的项目。

智慧城市指的是使用信息和通信技术手段，实现精细化和动静治理，并晋升城市治理功效和改善市民生存品质。城市大屏利用通过可视化的模式营造感知气氛，把数据背地的故事活泼描述，调动受众的情绪与感知，传播本地文化背地的商业价值。

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

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

第 1 步：创立地图我的项目
点击+号，创立地图我的项目，可抉择一键生成或者本人上传Geojason数据。

第 2 步：抉择底图
进入Citybuilder界面（本人上传数据），从【底图】列表中选取最贴近应用场景的【背景底图】模板，默认为Google影像。

第 3 步：增加图层
上传筹备好的Geojason数据，底图上新增一个天文图层。可持续利用【底图】组件来加强成果。

第 4 步：搁置场景
进入【场景】，可从数据库中间接抉择园区或修建，抉择地点，嵌入场景。之后进行【我的项目定位】，包含视角调整和交互参数配置。

第 5 步：预览公布
点击画布右下角全屏预览，预览结束后点击公布，即可生成 URL，并可设置拜访明码

如上图所示，生成的地图场景可转入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，疾速开发3D地图，缩短我的项目交付工夫！