乐趣区

关于javascript:ThingJS5步快速开发3D地图缩短项目交付时间

jiezi

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 地图，缩短我的项目交付工夫！

退出移动版