专栏首页3D可视化使用ThingJS在线开发完成3D地图自定义效果
原创

使用ThingJS在线开发完成3D地图自定义效果

好看的3D地图搭建出来,一定是要能为开发者所用与业务系统开发中才能真正地体现价值。基因于此,CityBuilder建立了与ThingJS的通道——直转ThingJS代码,支持将配置完成的3D地图一键转为代码,不仅减少开发者的工作量,还能作为非GISer开发者的地图教学工具,使一般开发者也能码出专业、炫酷的3D地图。

上节说到如何使用GeoJSON、QGIS编辑地图数据,使用CItyBuilder搭建一键城市模型,并且转入到ThingJS开发,以免大家遗忘,我将步骤再次贴出来,然后告诉大家如何使用ThingJS的“在线开发”完成建筑的自定义顶牌、环绕飞行、沟边效果。

本教程使用GeoJSON绘制并且编写地图数据,使用QGIS微调,以优锘科技所在区域为地图数据,制作一个小范围的智慧城市模型一共分以下五个步骤:

1. 绘制地图资源:进入GeoJSON绘制优锘科技所在区域地图数据,根据项目所需为每个建筑添加必要的属性(name、height、type、district);

2. 编辑地图数据:将GeoJSON数据下载 ,使用QGIS编辑数据(没有数据偏移可以省略这一步,本次省略使用QGIS,感兴趣的人可以网上搜索如何使用QGIS编辑数据,超简单);

3. 上传地图数据:将处理好的GeoJSON上传至CityBuilder中,在CityBuilder中修改样式;

4. 调整地图样式:CityBuilder中调整好样式之后,保存并且退出CityBuilder编辑器,在CityBuilder页面中选择开发刚刚调整好的项目;

5. 开发相关功能:当完成第四步后,就进入到ThingJS在线开发中,为我们的智慧城市添加功能(视角自动轮巡、自动旋转等);

想知道前四个步骤的具体实现步骤,可以查看我写的《使用CityBuilder搭建智慧城市3D可视化模型之创建三维城市(上)》。

开发相关功能:

通过CityBuilder进入到ThingJS中,会生成相关代码引用我们刚才完成的地图场景,生成的相关代码如下:

var app = new THING.App();

// 设置app背景为黑色

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

// 引用地图组件脚本

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) {

// 我们所有的代码都在complete函数中书写。

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

}

});

});

ThingJS在线开发中拥有着完善的官方示例,使用官方示例就能够完成我们的大部分需求,现在我们以图文结合代码的形式为大家讲解使用ThingJS制作的五个功能。

第一个小功能-获取建筑名字:

// aPP是ThingJS的全局对象,对全局对象绑定click事件,当点击到任意建筑,都会触发该事件。

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

console.log(ev.object.userData.name) // 输出建筑的名字

}

第二个小功能-建筑自定义顶牌:

建筑自定义顶牌是官方示例中的代码,可以直接复制到你的项目中去,同时可以修改html文件,改成你所需要的顶牌样式。不过要记得调用test_create_ui()这个方法。

// 添加html

function create_html() {

var sign =

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

            <div class="s1" style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;">

                <span class="span-l icon" style="float: left;width: 30px;height: 30px;background:url(https://www.thingjs.com/static/images/example/hydrant.png) no-repeat center;margin: 1px 1px 1px 5px;"></span>

                <span class="span-l font" style="float: left;margin: 0px 0px 0px 3px;">物体</span>

                <span class="span-r point" style="float: right;width: 12px;height: 12px;background-color: #18EB20;border-radius: 50%;margin: 10px 5px 10px 0px;"></span>

            </div>

            <div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">

                <span class="span-l font1" style="float: left;margin: 0px 10px 0px 10px;">数值</span>

                <span class="span-l font2" style="float: left;width: 70px;background-color: #2480E3;">0.14MPa</span>

            </div>

            <div class="point-top" style="position: absolute;top: -7px;right: -7px;background-color: #3F6781;width: 10px;height: 10px;border: 3px solid #eee;border-radius: 50%;"></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方法,通过判断是鼠标左键还是右键来确定是飞到物体上去还是视角归位。

相关功能代码如下:

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

if (ev.button == 0) { // 鼠标左键

if (ev.object.type == 'GeoBuilding') {

cameraFly(ev.object); // 摄像机飞行到建筑

console.log(ev.object.userData.name) // 输出建筑的名字

app.selection.select(ev.object); // 将建筑放进 selection 集合中

}

} else if (ev.button == 2) { // 鼠标右键

app.selection.clear(); // 清空集合

// 摄像机飞行到指定位置

app.camera.earthFlyTo({

time: 2000,

lonlat: [116.46531369922128, 39.98585330794342, -0.009057496674358845],

heading: -16.67619746802896,

height: 276.80479009170085,

pitch: 33.76486653158114

});

}

});

最后附上完整代码:

var app = new THING.App();

// 设置app背景为黑色

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

// 引用地图组件脚本

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) {

// 自定义顶牌

function create_html() {

var sign =

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

                       <div class="s1" style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;">

                           <span class="span-l icon" style="float: left;width: 30px;height: 30px;background:url(https://www.thingjs.com/static/images/example/hydrant.png) no-repeat center;margin: 1px 1px 1px 5px;"></span>

                           <span class="span-l font" style="float: left;margin: 0px 0px 0px 3px;">优锘科技有限公司</span>

                           <span class="span-r point" style="float: right;width: 12px;height: 12px;background-color: #18EB20;border-radius: 50%;margin: 10px 5px 10px 0px;"></span>

                       </div>

                       <div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">

                           <span class="span-l font1" style="float: left;margin: 0px 10px 0px 10px;">地区</span>

                           <span class="span-l font2" style="float: left;width: 70px;background-color: #2480E3;">朝阳区</span>

                       </div>

                       <div class="point-top" style="position: absolute;top: -7px;right: -7px;background-color: #3F6781;width: 10px;height: 10px;border: 3px solid #eee;border-radius: 50%;"></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('北京优锘科技有限公司')[0], // 顶牌的对象

element: create_element(),

localPosition: [0, 2, 0],

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

});

}

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);

test_create_ui();

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

if (ev.button == 0) { // 鼠标左键

if (ev.object.type == 'GeoBuilding') {

cameraFly(ev.object); // 摄像机飞行到建筑

console.log(ev.object.userData.name) // 输出建筑的名字

app.selection.select(ev.object); // 将建筑放进 selection 集合中

}

} else if (ev.button == 2) { // 鼠标右键

app.selection.clear(); // 清空集合

// 摄像机飞行到指定位置

app.camera.earthFlyTo({

time: 2000,

lonlat: [116.46531369922128, 39.98585330794342, -0.009057496674358845],

heading: -16.67619746802896,

height: 276.80479009170085,

pitch: 33.76486653158114

});

}

});

// 全局绑定 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;

})

function cameraFly(object) {

app.camera.earthFlyTo({

time: 2000,

object: object

});

}

}

});

});

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webgl和可视化应用是什么关系?不懂来看吧!

    很简单,我们通过在线开发平台thingjs来阐述!  前提你要掌握js,假设你掌握了js,ThingJS 使用当今最热门的 Javascript语言进行开发。

    要不要吃火锅
  • 前端 3d开发怎么操作,什么流程?

    我们都知道现今社会复合型人才是企业刚需,只会一项本领难以在企业中立足,即便是前端工程师,如果你只会敲代码改网页也是不行了,要多方面拓展自己的才能。比如研究可视化...

    要不要吃火锅
  • 没有3D建模的基础,只用thingjs就能搞定可视化开发

    没有3D建模的基础,对于制作3D场景要了解的知识也不明白,如何搭建3D可视化场景?咋整?什么都不会的我们该如何以最简单的方式搭建3D场景来完成我们的目标呢?当然...

    要不要吃火锅
  • CSS3径向渐变实现优惠券波浪造型

    很多人看到左右的波浪边框,第一想法,应该是用图片实现。现在我们就打破这一想法,用CSS搞定这个效果。

    Javanx
  • 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影

    红橙黄绿青蓝紫红:颜色从 0~360 顺序,各占30度。比如红色为0,黄色为120,绿色为240。

    Daotin
  • 一个CSS画的灰太狼,IE下属于重口味,慎看!

    还有几个不错的,比如一个小日本制作的多啦A梦,一个Twitter的当机页面等等,大家可以搜下看看.不得不感叹做前端的哥们闲起来还真是可怕啊.Firefox是正常...

    练小习
  • css绘图,实现一些特殊形状

    还是和前面的tips一样,多用after和before,能省俩标签!俩!比如这一堆的形状 <!DOCTYPE HTML> <html> <head> <met...

    练小习
  • CSS 3.0实现创意点击按钮

    越陌度阡
  • Valine Admin后台搭建(最新修订版)

    Valine Admin 是 Valine 评论系统的扩展和增强,主要实现评论邮件通知、评论管理、垃圾评论过滤等功能。支持完全自定义的邮件通知模板,基于Akis...

    Caleb
  • PHP+MYSQL分页css篇2

    body{ font-size: 12px;font-family: verdana;width: 100%; } div.page{ text-ali...

    用户7873631

扫码关注云+社区

领取腾讯云代金券