ThingJS official example (9): Develop a 3D map script through the URL transferred from CityBuilder

# Front Development##3D Visualization##IoT#

Identify the location of the virtual scene
Citybuilder export secondary development
Basic parameter configuration and modification

CityBuilder ( city-level scene building tool ) is simple enough to use and fits the designer's usage habits. Then, how to deliver the hard-worked city-level scene to development and use it flexibly in subsequent links?

The ThingJS platform has long considered this problem, unified the platform data, and supports CityBuilder to transfer URLs; after the platform loads the map component, you can easily develop it again. Let's analyze the steps below. If you have any questions, please leave a message.

Identify the location of the virtual scene

The three-dimensional earth is based on the world coordinate system. City-level or park-level scenes will select actual locations for loading. Developers are required to modify the three-point coordinates of app.background to provide accurate map positioning.

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

Citybuilder export secondary development

After the map component script is dynamically loaded, the map can be created through the url transferred from Citybuilder for secondary development, including adding business layers and modifying object parameters in the background. The example description is simple and easy to understand, allowing developers to more clearly understand the value of the function. View more demos and enter the official website to register !
Insert picture description here
Note that it is more convenient to use with the CityBuilder map tool. Designers can use visualization components to set layer styles, support importing 3D architectural scenes, and then generate project urls and import ThingJS ( Internet of Things 3D visualization PaaS platform-digital twin visualization platform ), as shown below Shown.
Insert picture description here

// 引用地图组件脚本
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;
                });
            });

Basic parameter configuration and modification

Layer objects in a 3D scene are generally configured in citybuilder in advance. The basic parameters include name, length, width, height, color and other parameters. After importing to the thingjs platform, they can be modified directly using the front-end code. They are commonly used for line width, point size and building height.

citybuilder configuration parameters

City-level scene building tool
Insert picture description here

ThingJS modify parameter code

More demo view

// 先根据名称查询图层对象 名称是在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;
                }
            });

ThingJS uses url to develop earth scenes and combines with CityBuilder to make it easier. Both designers and developers can better cooperate and complete the 3D project release!

About ThingJS

The ThingJS platform provides 3D visualization components for the Internet of Things, making 3D development easier! Direct Javascript call 3D script, based on 200 3D development source code examples, let you fully understand the visual development logic of the Internet of Things. Scene building-3D script development-data docking-project deployment one-stop service to make development more efficient, and become a digital twin technology innovator with 200,000 developers! Magic bean flower activity ing, welcome to click to enter the official website >>
Insert picture description here