三维城市

组件说明

三维城市组件可实现对街市街景的真实建模、特效添加、镜头移动路径设置等效果。

组件对接了51world云渲染平台的相关服务支持。该组件主要以三维形式展现城市建筑群及相应地理信息数据，支持通过渲染口令的方式修改三维模型，可在三维城市基础上叠加散点、场景特效等地理信息子组件。

效果案例

组件结构

三维城市组件主要由「父组件」及「子组件」两部分组成，可根据实际场景分别定义对应配置项。每个组件都对应样式、数据、交互三部分。

父组件配置

子组件管理

组件创建时，系统会默认携带常用子组件，使用者可根据实际场景对子组件进行新增或编辑。

样式

①基本属性

位置尺寸：

图表位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

图表尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

旋转角度包括组件的宣传角度，单位为deg

②服务设置

服务设置中三维可切换城市底板地图服务，可自定义三维城市地图。将复制的渲染口令粘贴至服务设置中，即可完成三维城市底图的替换。

渲染口令及场景简介一览

场景名称：城市大脑_4.0

场景介绍：“城市大脑_4.0”案例基于51AES技术方案，使用GIS数据自动生成上海全域三维场景。 打造更精细、更完善、更科学、更智慧、更高效的“一张网”，让城市管理像绣花针一样精细。

渲染口令：e3DF5C11

场景名称：园区_4.0

场景介绍：“园区_4.0”案例基于51AES技术方案，使用GIS数据还原接近真实世界的三维场景.在此基础上完整还原园区内部建筑，实现数字孪生智慧园区。

渲染口令：C52E828b

场景名称：景区_4.0

场景介绍：“景区_4.0”案例基于51AES技术方案，使用GIS数据还原接近真实世界的三维场景，在此基础上完整还原景区建筑，实现数字孪生智慧景区。

渲染口令：12E0299D

场景名称：广州_4.0

场景介绍：“广州_4.0”案例基于51AES技术方案，使用GIS数据自动生成接近真实世界的三维场景。

渲染口令：DF96469D

场景名称：新区_4.0

场景介绍：“新区_4.0”案例基于51AES技术方案，自动生成郑州三维场景，实现智慧新区可视化管理。

渲染口令：eB7Ed0b0

场景名称：楼宇_4.0

场景介绍：“楼宇_4.0”使用CAD图纸完整还原了楼体内部结构，用来展示建筑物内部和外部世界的联系。

渲染口令：f1d50eC4

③坐标设置

选择坐标类型为经纬度坐标或CAD坐标。

④镜头设置

控制预览是镜头的运动路径。可以通过配置项调整镜头。

{
    "coord_type": "0",
    "cad_mapkey": "", 
    "center_coord": "113.321874,23.102038",
    "arm_distance": "1151.056519", 
    "arm_distance_max": "2500.0", 
    "arm_distance_min": "50.0", 
    "pitch": "24.75", 
    "pitch_max": "89.0", 
    "pitch_min": "8.0", 
    "yaw": "149.25", 
    "fly": false
}

⑤水晶体设置

默认关闭，开启后可选择水晶体的样式、热区的效果。

⑥测量工具

默认关闭，开启后可显示测量工具。可以测量三维世界中的坐标、距离、面积;

⑦天气设置

默认关闭，开始后可显示天气状态，可设置晴天、阴天、中雨、中雪、雾霾等天气情况。

⑧光照设置

默认关闭，开启后可选择需要显示的光照时间点，可设置8点、12点、16点、20点来实现光照效果。

⑨音效设置

默认关闭，开始后可播放三维场景音效。

数据

三维城市主组件数据一般场景下无需进行编辑操作。

交互

可以设置三维城市的局部事件和数据事件

子组件管理

散点层

散点层是在城市模型基础上，添加不同样式点的图层；除此之外，散点层还可以支持跳转界面的操作。

样式

数据

支持在“数据”中调整子组件连接的数据，支持与动态数据的链接，动态数据需支持莫奈中的静态数据、API、数据库。

数据样例

[
    {"coord":"113.317818,23.102919",
    "coord_z":0,
    "markerInfo":{"markerWidth":100,"markerHeight":228,"normalUrl":"http://superapi.51hitech.com/doc-static/images/static/markerNormal2.png","activateUrl":"http://superapi.51hitech.com/doc-static/images/static/markerActive2.png"},
    "labelInfo":{"labelWidth":200,"labelHeight":80,"bgImageUrl":"http://superapi.51hitech.com/doc-static/images/static/LabelBg.png","labelOffset":"50,200","labelContent":"文本内容","labelSize":30,"labelColor":"#ECC500"},
    "setPopup":{"popupUrl":"https://imonet.jd.com/#/screen?key=d359d5778095469ea88f58fe109344b1","popupWidth":800,"popupHeight":380,"popupOffset":"50,180"}
    }
]

交互

支持子组件与莫奈中的其他组件进行交互。

场景特效

场景特效是指基于城市建模底图中，向三维城市中加入一些特殊动效的图层。

样式

场景特效样式设置可设置特效名称、坐标等基本信息；还可选择不同的场景特效样式以及加上跳转链接实现交互动作。

预设了地标建筑、设备维护、发生事故的19种常见场景。

数据

数据样例

[
    {
    "type":"shield",
    "scale":50,
    "coord":"113.320969,23.104143",
    "coord_z":0,
    "pitch":0,
    "titleStyle":{"titleTextPortrait":false,"titleContent":"防护预警","titleSize":50,"titleColor":"rgba(173,67,139,0.85)"},
    "setPopup":{"popupUrl":"https://imonet.jd.com/#/screen?key=d359d5778095469ea88f58fe109344b1","popupWidth":800,"popupHeight":380,"popupOffset":"0,0"}
    }
]

交互

支持子组件与莫奈中的其他组件进行交互。