没有3D建模的基础，只用thingjs就能搞定可视化开发

原创

要不要吃火锅

修改于 2019-10-24 14:29:34

4.1K1

修改于 2019-10-24 14:29:34

没有3D建模的基础，对于制作3D场景要了解的知识也不明白，如何搭建3D可视化场景？咋整?什么都不会的我们该如何以最简单的方式搭建3D场景来完成我们的目标呢?当然，最简单的就是让别人帮我们做(ThingJS提倡让我们自己做，他们提供技术支持)，不过毕竟有些事情还是得亲力亲为，那么，如何在最短的时间里面搭建一个智慧城市的地图场景呢?　　

之前说过模型可以使用网上有的，比如Sketchfab上的免费模型或者是通过3ds Max制作模型并且上传(详情请看 https://store.thingjs.com/?t=tools 中的3ds Max模型上传插件及使用教程)，或者是使用ThingJS的申请建模，让ThingJS的官方人员帮我们搭建模型，让我们可以直接使用各种精美模型而无需我们自己搭建。同样，地图场景也可以使用这些步骤，但是，我来教大家的，是如何免费并且快速的制作智慧城市的三维模型(当然了，快速就代表模型不够精美)，但是，总会有急需的时候吧?那个时候，你就可以自主把一些不太重要的模型全部自己搞定，剩下的费时又比较重要的，就可以交给专业的建模人员去搞定啦。　　

现在开始使用在线编辑工具编辑我们的地图数据啦：

GeoJSON(http://geojson.io/)、或者是使用全国地理信息资源目录服务系统(http://www.webmap.cn/)以及其他在线工具，本教程就以GeoJSON绘制并且编写地图数据，使用QGIS微调，以优锘科技所在区域为地图数据，制作一个小范围的智慧城市模型。　　

分以下五个步骤：　　

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

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

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

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

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

1. 绘制地图资源：　　

进入GeoJSON网站，打开相应的百度地图或者高德地图，找到对应位置，我们本次选择的就是优锘科技所处地：北京市朝阳区国际画材中心，找到位置，放大并且开始编辑。选取satellite卫星图像，绘制平面建筑图，填写相关属性，全部绘制完后，鼠标移至Save上(千万不要点上去了，亲测会报没有权限的错误)选择GeoJSON格式。绘制地图的话，记得最后返回mapbox查看绘制的建筑是否有偏差，无明显偏差则选择Save成GeoJSON格式。至此，绘制地图步骤结束。

2. 编辑地图数据　　

将GeoJSON数据下载，使用QGIS编辑数据，打开QGIS，将下载的GeoJSON数据导入到QGIS中，引用在线地图，根据在线地图微调建筑的位置(不明白如何导入地图的人，可以网上搜索如何使用QGIS导入在线地图)。同时开始编辑数据，选择“优锘”图层，点击左上角的“铅笔”，选中后查看地图数据是否有偏移，有偏移可以使用QGIS的工具修改建筑图形，图形修改完成后，进行属性的修改，点击属性图表(不知道属性图表在哪的可以查看图片说明)，仅保留需要的数据，保存改数据后查看是否有编码问题，若无问题则保存修改，将保存的数据上传至ThingJS网站CityBuilder的“我的数据”中去(上传数据步骤在第三步中)。

3. 上传地图数据　　

进入CityBuilder，新建CityBuilder项目，在选择区域时找到花家地南街，选择刚刚绘制好的地图区域，进行下一步。当项目新建好之后，选择“进入编辑”，会弹出该项目的CItyBuilder编辑页，进入该页，选择左侧项目名旁边的加号，开始进行数据上传，记得，数据使用的是WGS84坐标系，一定不要弄错了。数据上传好后，会出现在我的数据中第一个，选择“优锘”数据，开始在该项目中使用我们的数据。