Junior developer can code a cool professional 3D map?

Good-looking 3D map out structures, we must be able to by developers and business systems development in order to truly reflect the value used. This gene, CityBuilder established channels and ThingJS - the direct transfer ThingJS code, support the configuration of 3D maps into a key code that not only reduce the workload of developers, but also as a non-GISer developer of map teaching tool , so that the average developer can code a professional and cool 3D maps .

When it comes to how to use the section GeoJSON, QGIS editing map data, using CItyBuilder build a key city model, and transferred to ThingJS development, lest they forget, I will step posted again, and then tell you how to use the "ThingJS of online development ." complete building custom top card, fly around, Mizobe effect.

This tutorial uses GeoJSON map data to draw and write, using the QGIS fine-tuned to excellent Nuo Technology Area for the map data to produce a small-scale model of a smart city is divided into the following five steps:

1. mapping resources: GeoJSON drawn into the superior Nuo Technology Area map data, add the necessary attributes (name, height, type, district ) for each building according to the desired item;

2. Edit the map data: the GeoJSON data download, edit data using QGIS (no data offset can omit this step, this time omitting the use of QGIS, interested people can search the Internet how to use QGIS edit data, ultra-simple);

3. Upload map data: The Deal GeoJSON uploaded to CityBuilder, modify styles CityBuilder in;

4. Adjust the map style: after CityBuilder in adjusting the style, save and exit CityBuilder editor, just select the adjusted development projects in CityBuilder page;

5. Development related functions: When finished fourth step is to enter into ThingJS online development, add features (automatic polling perspective, auto-rotation, etc.) for our smart city;

Want to know first four steps of concrete implementation steps, you can see I wrote " use CityBuilder build a smart city to create a 3D city model visualization of 3D (on) ."

Development-related functions:

By CityBuilder into ThingJS, the relevant code is generated references we have just completed the map of the scene, to generate the relevant code is as follows:

Ideas were THING.App = new ();

// set the background to black app

app.background = [0, 0, 0];

// map component script references

THING.Utils.dynamicLoad(["https://www.thingjs.com/uearth/uearth.min.js"], function () {

app.create({

type: "Map",

url: "https://www.thingjs.com/citybuilder_console/mapProject/config/TVRnNE1EUT1DaXR5QnVpbGRlckAyMDE5",

complete: function (event) {

// All the code we write in complete function.

console.log(event.object.userLayers.length);

}

});

ThingJS online development official has a sound example, an example of using the official will be able to complete most of our needs, we are now in a combination of graphic code form for you on the use of five functional ThingJS made.

The first small function - Get the name of the building:

// aPP is ThingJS global object, the global object that bind click event when clicking into any building would trigger this event.

app.on('click', function (ev) {

console.log (ev.object.userData.name) // output the name of the building

}

Second small features - building custom top card:

Building a custom top card is the official example of code that can be copied directly into your project going, but you can modify the html file, into the top card style you need. Just remember to call test_create_ui () this method.

// add html

function create_html() {

were sign =

`<div class="sign" id="board" style="font-size: 12px;width: 120px;text-align: center;border: 3px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;">

</div>

</div>

</div>`

$('#div3d').append($(sign));

}

create_html();

// 生成一个新面板

function create_element() {

var srcElem = document.getElementById('board');

var newElem = srcElem.cloneNode(true);

newElem.style.display = "block";

app.domElement.insertBefore(newElem, srcElem);

return newElem;

}

// 物体顶界面

var ui = null;

function test_create_ui() {

ui = app.create({

type: 'UIAnchor',

parent: app.query('car02')[0],

element: create_element(),

localPosition: [0, 2, 0],

pivot: [0.5, 1] // [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位

});

}

test_create_ui();

第三个小功能-物体环绕飞行：

物体环绕飞行同样也是是官方示例中的代码，但是需要修改几个位置，这是因为使用CityBuilder搭建的智慧城市可视化应用，所使用的摄像机与通过CamBuilder（模模搭）搭建的园区可视化或者是其他可视化行业应用不一样，需要修改摄像机环绕和停止的方法。将// 绕某看点位置或者某物体环绕注释对应的代码修改为app.camera.earthFlyRotateBySpeed({ ；将// 停止旋转注释对应的代码修改为app.camera.stopEarthFly();总的来说，就是切换camera对象所调用的方法。然后在环绕飞行的代码后面添加一个定时器，让其启动。

setTimeout(startRotate, 1000);

修改后的代码如下：

var timer;

// 设置停止操作的时间

var stopTime = 5 * 1000;

// 开始旋转

function startRotate() {

// 绕某看点位置或者某物体环绕

app.camera.earthFlyRotateBySpeed({

target: app.camera.target, // 围绕摄像机当前目标点

speed: 3, // 环绕飞行的时间（3min）

});

clearTimer();

}

// 停止旋转

function stopRotate() {

app.camera.stopEarthFly();

resetTimer();

}

// 清除定时器

function clearTimer() {

if (timer) {

clearTimeout(timer);

timer = null;

}

// 重置定时器

function resetTimer() {

clearTimer();

timer = setTimeout(function () {

startRotate();

}, stopTime)

}

app.on(THING.EventType.MouseDown, function () {

stopRotate();

}, '如果按下鼠标停止旋转');

app.on(THING.EventType.MouseWheel, function () {

stopRotate();

}, '如果滚动鼠标停止旋转');

setTimeout(startRotate, 1000);

第四个小功能-物体沟边：

物体沟边同样也是是官方示例中的代码，但是由于较为简单，因此只选择其中的一小部分进行使用，使用全局绑定 selection 集合事件，当选择了GeoBuilding属性的物体后，让该物体沟边，同样绑定Deselect事件，则取消物体沟边

// 全局绑定 selection 集合事件

app.on(THING.EventType.Select, '.GeoBuilding', function (ev) {

ev.object.style.outlineColor = '#00ff00'; // 集合中的物体沟边

});

app.on(THING.EventType.Deselect, '.GeoBuilding', function (ev) {

ev.object.style.outlineColor = null;

})

第五个小功能-视角归位：

视角归位需要我们选取一个最初视角，最初视角可以在CityBuilder中获取，方法是打开CityBuilder对应的项目文件，点击项目名右侧的菜单栏，点击视角设置，移动到一个合适的视角，并且拾取该视角。同时视角归位使用的也是app这个全局变量所绑定的click方法，通过判断是鼠标左键还是右键来确定是飞到物体上去还是视角归位。