From 839836d7bbf3a3c6e8a3fc3dbe27d98475b43f6d Mon Sep 17 00:00:00 2001
From: zhangxiaohui <1090239782@qq.com>
Date: Thu, 13 May 2021 14:18:14 +0800
Subject: [PATCH] update
---
智慧交通/公路项目建设可视化进度管理.md | 71 ++++
...城市交通的要素：路口监管可视化系统的解决方案.md | 400 ++++++++++++++++++
...慧城市大数据运营中心 IOC 之 Web GIS 地图应用.md | 159 +++++++
.../综合性智慧城市之朔州开发区 3D 可视化.md | 104 +++++
4 files changed, 734 insertions(+)
create mode 100644 智慧交通/公路项目建设可视化进度管理.md
create mode 100644 智慧交通/智慧城市交通的要素：路口监管可视化系统的解决方案.md
create mode 100644 智慧城市/智慧城市大数据运营中心 IOC 之 Web GIS 地图应用.md
create mode 100644 智慧城市/综合性智慧城市之朔州开发区 3D 可视化.md
diff --git a/智慧交通/公路项目建设可视化进度管理.md b/智慧交通/公路项目建设可视化进度管理.md
new file mode 100644
index 0000000..9b3196f
--- /dev/null
+++ b/智慧交通/公路项目建设可视化进度管理.md
@@ -0,0 +1,71 @@
+- [公路项目建设可视化进度管理](https://zhuanlan.zhihu.com/p/337929257)
+
+
+
+新基建项目的开展将聚焦于城市轨道交通和城际高速铁路，新一代智能化高速铁路系统将广泛运用云计算、大数据、物联网、移动互联、北斗导航和BIM等新技术。我国已成为高铁运营里程最长的国家，但勘察设计、建设、运营管理所依赖的媒介还主要以二维图为主。将管理手段由二维提升为三维，并在三维环境下实现多源异构海量数据的综合展示与分析，将在大规模的高速铁路勘察设计、建设管理与运营维护中发挥巨大的支持与推动作用。
+
+本文以福厦漳高铁为例，HT for Web 基于三维数字信息技术搭建出的一个高速铁路工程展示平台，为项目在策划、实施等各个阶段提供工程信息，实现工程信息互通，达到彻底消除信息孤岛的目的，确保了工程建设的高效性、准确性，达到项目增值最大化的目的。
+
+## **界面简介及效果预览**
+
+**载入动画：**
+
+界面由远及近展示了完整的福建铁路线路图；90°旋转的科技环大大地提升了渲染效果；随着画面的加载完毕，我们也可以清楚的看到福建省内的各条铁路，以及在每条线路上的各个站点一目了然。
+
+
+
+
+
+
+
+两侧为2D面板，左边是具有标注功能的按钮，下方输入框中可展示标注目标的地理位置信息。右侧为福厦漳高铁信息及沿线各个站点的在建信息。
+
+## **系统分析**
+
+在高铁建设中，采用数字信息化技术，就是将施工全周期的所有信息建设可参化数字模型，同时施工方案模拟优化、施工管理过程系统协调统一等一系列功能，改善在传统项目管理过程无法实现的这些弊端，是各参见单位、参建者均能高效地协同沟通，为高速铁路实现“高标准、高质量、高效率、零误差”的目标，提供了新的数字化管理模式。
+
+**1、完成进度展示**
+在展示平台上，我们应用 HT for Web 的数据化建模模拟呈现了福厦漳高铁施工线路图，通过平台可以直观的了解到高铁当前的完成进度。
+
+
+
+
+
+**2、施工点位标注功能**
+
+界面左上角的起点、隧道、终点、桥梁和路线五个施工目标按钮可以灵活使用，工程人员可以根据需求将工程点目标摆放在施工点位上。
+
+
+
+
+
+
+
+**3、工程点的经纬度查询功能**工程人员可以通过点击地图上的工程点来获取相应的名称、编号和经纬度信息；同样的，在输入框中输入精确的经纬度信息也可以在地图中找到相应的工程点。这个功能省去了复杂的换算工作，并且极大的提高了工程人员的工作效率，同时也给施工人员明确的施工目标，确保施工目标的准确度与提高施工质量。
+
+****
+
+**4、每个站点建设情况**
+
+在界面右上角，我们可以清晰地看到福厦漳高铁的全线长度、设计时速、站点数以及每个站点的建设情况。我们可以看到，3D可视化改变了传统依靠二维图纸和报表为主的管理模式。
+
+
+
+## **实现价值**
+
+围绕人员、机械、物料、方法、环境等现场施工的关键要素，在高铁建设过程中应用3D可视化技术，不仅能够提升工程施工现场作业工作效率，并且可以实时监控工程进度。该项目拓宽了可视化模型的应用空间及应用价值：
+**1.工程项目信息管理**
+通过BIM、GIS技术、云计算、大数据、物联网、移动应用和智能应用等先进技术的综合应用，让施工现场感知更透彻、互通互联更全面、智能化更深入，大大提升现场作业人员的工作效率。
+而 HT 的轻量化方式在与传统的 GIS 和 BIM 技术上有了全新的改变：
+
+- HT的轻量化、低成本，使企业不再需要购置笨重昂贵的 GIS 和 BIM 软件；
+- 起点低、效果好，传统 Web 开发人员即可上手，借力 HT 强大的 3D 渲染效果既可制作出高仿真道路场景
+- 跨平台性，任何桌面和移动终端都可以打开，方便现场运维人员直接手机进行现场查看、编辑和管理
+
+**2.施工过程管理**
+便于施工管理人员更加准确地掌握构件设计和施工过程信息，做好过程控制工作，消除差错漏洞。实现精细化管理，最终达到减少施工成本、保障施工安全、保护环境等目的，实现保质保量完成施工任务。
+**3、施工成本管理**
+有助于实现施工现场“人、机、料、法、环”、各关键要素实时、全面、智能的监控和管理，有效支持了现场作业人员、项目管理者各层协同和管理工作，提高施工质量、安全、成本和进度的管理水平，减少浪费。
+**4、安全质量管理**
+通过3D可视化技术的应用，及时发现安全隐患，规范质量检查、检测行为，保障工程质量，实现质量溯源和劳务实名制管理，有效支撑主管部门对工程现场的质量、安全、进度、人员的监管。
+
diff --git a/智慧交通/智慧城市交通的要素：路口监管可视化系统的解决方案.md b/智慧交通/智慧城市交通的要素：路口监管可视化系统的解决方案.md
new file mode 100644
index 0000000..6fac9b5
--- /dev/null
+++ b/智慧交通/智慧城市交通的要素：路口监管可视化系统的解决方案.md
@@ -0,0 +1,400 @@
+- [智慧城市交通的要素：路口监管可视化系统的解决方案](https://zhuanlan.zhihu.com/p/141193605)
+
+
+
+## **前言**
+
+随着信息时代的发展变迁，荧幕里呈现的 **智慧城市** 慢慢出现了在现实生活中，很大程度上便利了日常的管理和维护。在智慧城市的大背景下，**智慧交通监管可视化系统** 是其重要的组成部分，通过一条条道路监控的串联，引申出一座智慧城市的管控，而在众多数据的维护中，**实时数据** 、**设备状态** 以及 **视频监控** 是极为重要的。其中视频监控一直是作为主体的部分，而在 **互联网** 和 **物联网** 齐头并进的形式下,**“中国天网”**应运而生，这其实是一项城市监控系统，但它不是个仅一台摄像头的设备，而是足足有1.7亿个监控摄像头，而在未来三年内，还将再安装4亿个摄像头。交通作为城市发展的动脉，与人们下日常息息相关，而在这一系列的监管作用下，成为了一个“公安治安视频监控系统”，关乎人们日常的安全治安管理。
+
+城市交通的主要方式体现在城市道路、公交、轨道交通等设施上，但随着城市化进程的加快和经济社会发展的推动下，机动车保有量迅速增加，城市交通问题日益严峻。面对这一现状，为了缓和城市交通的各种问题，采取了多种解决方案，例如建设一系列信号灯控制，路口卡口监控、视频监控等多种方法的系统维护，有着一定程度上的效果，但是各个系统都独立着解决其对应的问题，无法从整体的交通态势上进行综合掌控，而实现城市化智慧交通的管理系统可以很好地应对这一问题。介于 2D 组态和 3D 组态上，**Hightopo**（以下简称 HT ）的 **HT for Web** 产品上的有着丰富的组态化可供选择，本文将介绍如何运用 HT 丰富的 **2/3D 组态**搭建出一个路口监控系统的解决方案。
+
+
+本文将从一下几个方面介绍智慧交通可视化监控系统的实现过程：
+**1、**车辆生成以及在红绿灯控制下的运行；
+**2、**摄像头的仿真和实景监控；
+**3、**路口监控信息的实时数据以及维护；
+
+
+## **界面简介及效果预览**
+
+在智慧交通监控系统里，呈现了拟真的红绿灯控制下实时车辆行驶的场景，搭配上可控制的天气环境切换面板，可以模拟在各种天气下的路口运行状态；还实现了路口摄像头的监控状态，点击路口的每个摄像头可以查看此摄像头监控范围内路口的实时运行，提供仿真和实景两种状态的切换；其次还添加了许多实时数据的监控面板，对接真实接口数据起到实时路口监控的最大效益化。
+
+
+
+
+
+
+
+## **系统分析**
+
+HT 通过丰富的 2D 组态和 3D 组态的交融结合使用上，整理出许多工业互联网上的解决方案，在智慧城市推动的背景下，智慧交通管理系统可视化决策系统也是极为重要的部分，对于道路以及路口的监测中，面向交管智慧中心大屏环境，其三维场景上可通过 **HT for Web** 产品轻量化 HTML5/WebGL 建模的方案，实现快速建模、运行时轻量化到甚至手机终端浏览器即可 3D 可视化运维的良好效果；二维图纸上拥有矢量图标在放大后图像不会失真，支持大屏、多屏、超大分辨率等显示情景。
+
+**1、综合态势监测**
+集成地理信息系统、视频监控系统、交管部门各业务系统数据，对交通路况车流量、事故处理报告等要素进行综合监测，并支持点选查看具体警力、机动目标、交通事件、监控视频等详细信息，帮助管理者实时掌握交通整体运行态势。
+
+
+
+**2、交通基础资源监测**
+
+支持对摄像头、流量检测设备、交通信号灯等交通基础资源的数量、空间位置分布、实时状态等信息进行监测和可视化管理，支持设备详细信息查询，支持对未正常工作的设备进行告警，加强管理者对设备状态的监测与感知，提升交通基础设施的运维管理效率。
+
+
+
+**3、视频巡检监测**
+支持集成前端视频巡检系统，有效结合视频智能分析、智能定位、智能研判技术，对道路拥堵点位、隐患点位、事故点位等情况进行可视化监测，实现异常事件的实时告警、快速显示，并可智能化调取异常点位周边监控视频，有效提升接处警效率。
+
+
+
+
+
+**4、路口信号灯监测**
+支持集成路口信号灯、视频监控等系统数据，对路口交通流量、流速、车辆及道路异常事件、信号灯状态等信息进行实时监测，并可结合专业的模型算法，比对历史最佳通行速度及最佳通行量，对路口交通态势进行可视化分析研判，为信号配时调优和路口交通组织优化提供科学的决策依据，有效提升交通运行效率。
+
+
+
+
+
+**5、违法违章案件分析**
+充分整合交管部门现有数据资源，提供多种可视化分析、交互手段，对海量历史违法违章案件数据进行可视化串并分析，深度挖掘案件时空分布规律，为交管部门进行原因分析、主动防范等业务应用提供支持。
+
+
+
+## **代码实现**
+
+**1、车辆生成以及在红绿灯控制下的运行**
+
+在路口的仿真的运行系统下，场景中有这许许多多来往运行的车辆，是通过动态加载车辆模型并且设置管道运行动画，而这些车辆当然需要符合信号灯的运行规则，需要运用一些控制手段，让这些车辆遵纪守法。
+
+
+
+
+
+以下是通过设置一些车辆的基础属性以及根据 type 类型判断加载对应的车辆模型的伪代码：
+
+```js
+loadCar(type) {
+ // 创建车辆新节点
+ let car = new ht.Node();
+ // 根据车辆类型创建加载对应车辆模型
+ switch (type) {
+ case 'familyCar':
+ car.s('shape3d', 'models/HT模型库/交通/车辆/家用车.json');
+ break;
+ case 'truck':
+ car.s('shape3d', 'models/HT模型库/交通/车辆/卡车.json');
+ break;
+ case 'jeep':
+ car.s('shape3d', 'models/HT模型库/交通/车辆/吉普车.json');
+ break;
+ ...
+ default:
+ console.log('NO THIS TYPE CAR!');
+ break;
+ }
+ // 设置车辆不可选择和不可移动
+ car.s({
+ '3d.selectable': false,
+ '3d.movable': false
+ });
+ // 设置锚点 --- 车的头部
+ car.setAnchor3d(1, 0, 0.5);
+ // 设置初始位置
+ car.setPosition3d(0, 100000, 0);
+
+ let typeIndex = 1;
+ // 判断是否此前生成了这种类型的车辆
+ this.g3dDm.each(data => {
+ if (data.getTag() === type + typeIndex) {
+ typeIndex++;
+ }
+ })
+ // 设置车辆节点标签
+ car.setTag(type + typeIndex);
+ // 设置车辆节点的名字
+ car.setDisplayName(type);
+ // 将车辆节点添加到数据模型中
+ this.g3dDm.add(car);
+}
+```
+
+通过管道动画的驱使，生成的车辆在信号灯的控制下行驶着，首先要通过 ht.Polyline 绘制出一条车辆的运行管道，其实现上有二维形式与三维的形式，是继承于 ht.Shape，当 shape3d 设置为 cylinder 时则显示为立体的三维管线效果。而当车辆加载以及管道绘制的完成，我们就可以通过 HT 封装的动画函数 ht.Default.startAnim() 来趋势车辆沿着管道运行，实现管道动画的效果。
+
+
+
+
+
+而关于管道动画的实现上，基于 ht.Default.startAnim() 封装了一个 move 的动画函数是节点沿着路径平滑移动的封装函数，主要参数为：
+
+- **node：**动画节点；
+- **path：**运行路径；
+- **duration：**动画执行调度时间;
+- **animParams：**动画参数；
+
+通过绘制一条运行路线的管道，ht.Default.getLineCacheInfo() 得到这条管道的点位和分割信息 cache，然后管道信息通过 ht.Default.getLineLength() 得到管道的长度，并且通过 ht.Default.getLineOffset() 来获取连线或者管道指定比例的偏移信息，从而达到移动的效果，是为了通过 node.lookAtX() 来获取节点下一个面对的朝向的位置信息，并设置节点此时的位置，从而达到节点沿着路径平滑移动的效果。
+
+```js
+move(node, path, duration = 20000, animParams) {
+ // path._cache_ 里面存着管道的节点信息
+ let cache = path._cache_;
+ // 如果没有缓存信息，则获取 path._cache_ 里面存着管道的节点信息
+ if (!cache) {
+ cache = path._cache_ = ht.Default.getLineCacheInfo(path.getPoints(), path.getSegments());
+ }
+ // 获取管道缓存信息的长度
+ const len = ht.Default.getLineLength(cache);
+ // 设置动画对象初始化
+ animParams = animParams || {};
+ // 设置 action 为 animParams 的动画执行函数
+ const action = animParams.action;
+ // 动画执行部分
+ animParams.action = (v, t) => {
+ // 获取管道运动的偏移信息
+ const offset = ht.Default.getLineOffset(cache, len * v);
+ // 获取偏移位置上的点
+ const point = offset.point;
+ // 设置节点看向的下一个位置
+ node.lookAtX([point.x, point.y, point.z], "forward ");
+ // 设置节点的位置
+ node.p3(point.x, point.y, point.z);
+ // 判断动画是否执行完
+ if (action) action();
+ };
+ // 循环调用动画执行函数
+ return loop(animParams.action, duration);
+}
+
+// 循环动画函数
+loop(action, duration) {
+ return ht.Default.startAnim({
+ duration: duration,
+ action: action
+ });
+}
+
+```
+
+**2、摄像头的仿真和实景监控**
+
+视频监控作为本系统重要的解决方案之一，提供了仿真和实景的两套风格实现，仿真的意义是通过简单的车辆模型模拟出交通流向然后通过绘制场景并共用一个数据模型来体现，实质意义上可以通过科幻风格突出监控的重点信息，例如设备维护以及一些违法的场景重现；而对于实景风格是通过对接实时的视频数据流，然后展示出路口的运行状态，以真实的原貌重现路口的每一个动态信息。
+
+
+
+
+
+**2.1 拟真摄像头的实现原理**
+
+作为拟真方案的摄像头实现上，通过 HT 的渲染元素 renderHTML 加载出一个弹窗的三维小场景，并且与路口主场景共享一个数据模型 dataModel，实现数据变化以及动画的互通，而现在只需要去获取所点击摄像头的真实视角信息，通过全局事件派发将获取的真实视角，传到摄像头弹窗场景去改变对应视角的 眼睛 eye 和 中心点 center，就能达到获取摄像头在主场景中拟真的视角。为了使摄像头活动的时候具有动画的辨识度，在每个摄像头前绘制了一个锥形的监控区域吸附在摄像头上，界定出摄像头的监控范围，达到智慧监控的效果。
+
+在交互实现上，通过点击选中摄像头后，使这个摄像头的锥形区域变为直线，表示为选中状态同时标记选中的摄像头的选中前后顺序，并且通过派发事件驱使 2D 图纸上显示摄像头弹窗，在弹窗显示的同时，通过计算得到实时变动的中心点位置信息（center），只要实时通过全局派发事件把位置信息传输到摄像头弹窗场景，就能起到摄像头场景视角与主场景中所点击摄像头的视角同步；取消弹窗显示的交互方式是通过双击场景背景，恢复摄像头锥形区域并且派发事件去隐藏 2D图纸上的摄像头弹窗：
+
+```js
+// 全局事件派发器
+var G = {}
+window.G = G;
+G.event = new ht.Notifier();
+
+handleInteractive(e) {
+ const {kind, data} = e;
+ if(kind === 'clickData') {
+ // 判断点击节点是否带有标签，没有标签则 return
+ let tag = data.getTag();
+ if(!tag) return;
+ // 判断标签名为摄像头
+ if(tag.indexOf('camera') >= 0) {
+ // 设置指定上一个点击的摄像头和当前点击的摄像头
+ this.lastClickCamera = this.nowClickCamera;
+ this.nowClickCamera = data;
+ // 如果之前有点击摄像头，则初始化摄像头锥体的大小
+ if (this.lastClickCamera !== null) {
+ let clickRangeNode = this.lastClickCamera.getChildren()._as[0];
+ clickRangeNode.s3(300, 150, 500);
+ }
+ // 如果有点击摄像头，则设定所点击摄像头锥体的大小
+ if (this.nowClickCamera !== null) {
+ let clickRangeNode = this.nowClickCamera.getChildren()._as[0];
+ clickRangeNode.s3(5, 5, 500);
+ }
+ // 获取点击摄像头的位置信息
+ var cameraP3 = nowClickCamera.p3();
+ // 获取点击摄像头的旋转信息
+ var cameraR3 = nowClickCamera.r3();
+ // 获取点击摄像头的大小信息
+ var cameraS3 = nowClickCamera.s3();
+ // 当前锥体起始位置
+ var realP3 = [cameraP3[0], cameraP3[1] + cameraS3[1] / 2, cameraP3[2] + cameraS3[2] / 2];
+ // 将当前眼睛位置绕着摄像头起始位置旋转得到正确眼睛位置
+ var realEye = getCenter(cameraP3, realP3, cameraR3);
+ // 全局事件派发至摄像头场景改变视角的眼睛 eye 和中心点 center
+ G.event.fire({
+ type: 'videoCreated',
+ eye: realEye,
+ center: getCenter(realEye, [realEye[0], realEye[1] ,realEye[2] + 5], cameraR3)
+ });
+
+ // 视频弹窗显示派发
+ event.fire(SHOW_VIDEO, {g3dDm: this.g3dDm, cameraName:tag});
+ }
+ }
+ // 双击背景隐藏摄像头场景窗口，并初始化摄像头锥体的大小
+ if(kind === 'doubleClickBackground') {
+ // 视频弹窗隐藏派发
+ event.fire(HIDE_VIDEO);
+ // 如果之前有点击摄像头，则初始化摄像头锥体的大小
+ if (this.nowClickCamera !== null) {
+ let clickRangeNode = this.nowClickCamera.getChildren()._as[0];
+ clickRangeNode.s3(300, 150, 500)
+ }
+ // 设置当前点击摄像头为空
+ this.nowClickCamera = null;
+ }
+}
+```
+
+以上所涉及到方法 getCenter()，实际上是通过去获取每个摄像头节点在场景中对应的旋转角度，简化理解就是一个点 A 围绕着另外一个点 B 旋转，即中心点位置（center）围绕着眼睛位置（eye）旋转，而我们则需要去计算点 A 的位置（中心点位置 center），这里通过封装一个 getCenter 方法用于获取 3d 场景中点 A 绕着点 B 旋转 angle 角度之后得到的点 A 在 3d 场景中的位置，方法中采用了 HT 封装的 ht.Math 下面的方法，以下为实现的代码：
+
+
+
+
+
+
+实现代码如下：
+
+```js
+ // pointA 为 pointB 围绕的旋转点
+// pointB 为需要旋转的点
+// r3 为旋转的角度数组 [xAngle, yAngle, zAngle] 为绕着 x, y, z 轴分别旋转的角度
+const getCenter = function(pointA, pointB, r3) {
+ const mtrx = new ht.Math.Matrix4();
+ const euler = new ht.Math.Euler();
+ const v1 = new ht.Math.Vector3();
+ const v2 = new ht.Math.Vector3();
+
+ mtrx.makeRotationFromEuler(euler.set(r3[0], r3[1], r3[2]));
+
+ v1.fromArray(pointB).sub(v2.fromArray(pointA));
+ v2.copy(v1).applyMatrix4(mtrx);
+ v2.sub(v1);
+
+ return [pointB[0] + v2.x, pointB[1] + v2.y, pointB[2] + v2.z];
+};
+
+```
+
+**2.2 实景摄像头的实现原理**
+
+对于实景的实现上，我们可以通过对接实时的视频数据流，现在主要常用的流媒体传输协议有：**RTMP**、**RTSP**、**HLS** 和 **HTTP-FLV**。
+
+- **RTMP** (Real Time Messaging Protocol)：实时消息传输协议，RTMP 协议中，视频必须是 H264 编码，音频必须是 AAC 或 MP3 编码，且多以 flv 格式封包。因为 RTMP 协议传输的基本是 FLV 格式的流文件，必须使用 flash 播放器才能播放。
+- **RTSP** (Real-Time Stream Protocol)：RTSP 实时效果非常好，适合视频聊天、视频监控等方向。
+- **HLS**(Http Live Streaming)：由 Apple 公司定义的基于 HTTP 的流媒体实时传输协议。传输内容包括两部分：1.M3U8 描述文件，2.TS 媒体文件。TS 媒体文件中的视频必须是H264编码，音频必须是 AAC 或 MP3 编码。数据通过 HTTP 协议传输。目前 video.js 库支持该格式文件的播放。
+- **HTTP-FLV**：本协议就是 http+flv，将音视频数据封装成FLV格式，然后通过http协议传输到客户端，这个协议大大方便了浏览器客户端播放直播视频流.目前 flv.js 库支持该格式的文件播放。
+
+例如通过一个简单的 RTMP 视频流的对接就可以明白其实现的原理。对于的视频的载入，需要用到 video.js 的插件进行展示，所以先引入插件，然后对接视频流后，也是同样通过全局事件派发到 HT 的渲染元素 renderHTML 将视频流渲染到场景图纸中，以下是实现的伪代码：
+
+```js
+// 引入 video.js 插件
+
+
+// 通过全局事件派发到渲染元素 renderHTML 去渲染视频到场景图纸中
+G.event.add(function(e){
+ if(e.type==='videoCreated'){
+ var div=e.div;
+ div.innerHTML='';
+ window.player = videojs('video');
+ }
+});
+```
+
+
+**3、路口监控信息的实时数据以及维护**
+
+对于一些路口的关键数据可以通过接口对接的形式展示出来，通过实时数据变动的监控，即时反馈道路路口的信息数据，包含一些事故统计、车流量分析、设备维护状态以及车辆违章。这些数据依赖展示的载体是通过 HT 的 2D 组态矢量图来实现的，矢量图适用于很多场合，其特点是放大后图像不会失真，可以适应不同分辨率的屏幕都不会模糊，使得整个系统适用与不同的屏幕下，包括在大屏的监控系统上也得心应手。而通过矢量图的信息展示上，对比以往一些单纯数据展示的页面，本系统则是通过一些自定义的动画交互，可以使得整个页面的上效果呈现上有一种沉浸式的体验，整体的客户体验可以大大地提升。
+
+
+
+
+
+
+
+数据的展示形式有着多种多样的方式，可以通过一些图表插件，例如 eEcharts，HT 也有机制可以让我们使用它们，当然我们也可以自定义封装一些组件，示例中的表格和圆环进度条就是一种很好地呈现方式，而在许多效果呈现上，HT也是拥有自己一套功能丰富的 UI 组态，如果感兴趣的话可以通过 [HT主页](https://link.zhihu.com/?target=https%3A//www.hightopo.com/index.html) 上来了解使用。
+
+对于数据接口的获取，可以运用一些主流的方法：
+
+- **ajax：**使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象 XMLHttpRequest；
+- **axios：**基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中；
+- **WebSocket：**HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议；
+
+ajax 和 axios 要实时获取接口数据得通过轮询调用接口的形式进行传输，而 WebSocket 可以双向进行数据传输，在选择运用上可以匹配自己的实现需求。本系统是采用通过 axios 调用接口获取实时数据。
+
+示例中的柱状图和折线图，是通过 HT 里的机制下去使用 eEcharts 上一些图表进行自定义配置而实现的，继而通过对 axios 接口轮询调用载入数据，展现了实时的路口监控数据信息：
+
+```js
+loadData() {
+ // 获取图纸的数据模型
+ let dm = this.g2d.dm();
+ // 获取车流量接口的数据
+ axios.get('/traffic').then(res => {
+ // 接入日车流量折线图的数据
+ this.lineChart1.a({
+ 'seriesData1': res.lineChartData1,
+ 'axisData' : res.axisData
+ });
+ // 接入车辆运行高峰折线图的数据
+ this.lineChart2.a({
+ 'seriesData1': res.lineChartData2,
+ 'axisData' : res.axisData
+ })
+ // 采用数字跳动的方式载入一些数据内容
+ setBindingDatasWithAnim(dm, res, 800, v => Math.round(v));
+ // 接入运行峰值的时刻
+ this.peakTime.s('text', res.peakTime);
+ });
+ // 载入设备运行状态的数据
+ axios.get('/equipmentStatus').then(res => {
+ setBindingDatasWithAnim(dm, res, 800, v => Math.round(v));
+ });
+ // 载入事故统计的数据
+ axios.get('/accident').then(res => {
+ setBindingDatasWithAnim(dm, res, 800, v => Math.round(v));
+ // 接入每月事故柱状图的数据
+ this.accidentBar.a({
+ axisData: res.axisData,
+ seriesData1: res.seriesData1
+ })
+ });
+}
+```
+
+关于表格的绘制，实际上是封装了一个组件来实现的，而其中的交互动画，主要还是运用了 HT 自带的动画函数 ht.Default.startAnim()，横向通过滚动 100 宽度并数据透明度慢慢浮现，纵向采用向下偏移一行表格行高 54 来添加新的警报信息。
+
+```js
+addTableRow() {
+ // 获取表格节点
+ let table = this.table;
+ // 通过 axios 的 promise 请求接口数据
+ axios.get('getEvent').then(res => {
+ // 获取表格节点滚动信息的数据绑定
+ let tableData = table.a('dataSource');
+ // 通过向 unshift() 方法可向滚动信息数组的开头添加一个或更多元素
+ tableData.unshift(res);
+ // 初始化表格的纵向偏移
+ table.a('ty', -54);
+ // 开启表格滚动动画
+ ht.Default.startAnim({
+ duration: 600,
+ // 动画执行函数 action
+ action: (v, t) => {
+ table.a({
+ // 通过添加数据后，横向滚动 100
+ 'firstRowTx': 100 * (1 - v),
+ // 第一行行高出现的透明度渐变效果
+ 'firstRowOpacity': v,
+ // 纵向偏移 54 的高度
+ 'ty': (v - 1) * 54
+ });
+ }
+ });
+ });
+}
+```
+
diff --git a/智慧城市/智慧城市大数据运营中心 IOC 之 Web GIS 地图应用.md b/智慧城市/智慧城市大数据运营中心 IOC 之 Web GIS 地图应用.md
new file mode 100644
index 0000000..6d26ad8
--- /dev/null
+++ b/智慧城市/智慧城市大数据运营中心 IOC 之 Web GIS 地图应用.md
@@ -0,0 +1,159 @@
+- [智慧城市大数据运营中心 IOC 之 Web GIS 地图应用](https://zhuanlan.zhihu.com/p/363956860)
+
+
+
+## **前言**
+
+IOC（Intelligent Operations Center）——智慧城市智能运营中心就是智慧城市的大脑，是建立在各个智慧应用系统之上的系统。通过对政府各职能部门的业务信息共享与整合，聚焦城市运行监测、分析决策、可视化指挥、应急管理等环节，对人口统计、民生服务、信访举报、产业经济、突发事件等一系列综合指标进行有效监控，并围绕网格化管理、综合执法、环境卫生、园林绿化等重点领域，提升城市运行管理水平和突发事件的处置效率。打造智慧市政、智慧城管、智慧社区等智慧型城市。
+
+**HT for Web GIS** 产品的定位在于运用产品强大的可视化技术，将地理信息系统（Geographic Information System，GIS）的数据进行丰富的可视化展示。以城市为基础，对城市各类基础设施数据以更加多样化形式进行可视化展示；将 GIS 数据和云计算、大数据、物联网等技术相结合，构建真正的数字经济，数字城市，数字中国；以时空为基础，通过可视化分析技术，对城市的规划、布局、分析和决策提供技术支撑，推进城市数字化转换和建设。
+
+
+
+
+**图扑软件（Hightopo）**总部正位于美丽的鹭岛厦门，厦门是一个集文化、生态、旅游、高新技术于一身的美丽城市，并被誉为“国家生态园林城市”、“中国人的海上花园”。智慧城市智能运营中心（IOC）案例以厦门为基点，使用 Hightopo 的 2D、 3D 和 GIS 可视化技术进行搭建。市面上的 GIS 系统常见的是基于 ArcGIS API for JavaScript、百度地图API、高德地图 API 、Cesium、Mapbox、Leaflet、Openlayers 等技术进行实现。HT for Web GIS 产品支持对不同地图瓦片服务或数据、航拍倾斜摄影实景的 3DTiles 格式数据以及城市建筑群等不同的 GIS 数据的加载，同时，结合 HT 矢量、BIM 数据轻量化、三维视频融合以及2D 和 3D 的无缝融合等技术优势，在 GIS 系统中对海量的 POI 数据、交通流量数据、规划数据，现状数据等进行多样化的可视化展示。HT for Web GIS 产品颠覆传统的 GIS 系统的开发，让 2D GIS 系统和 3D GIS 系统的开发变得更加便捷，数据更加直观，展现更加多样化。
+
+
+
+
+
+## **效果展示**
+
+IOC 智慧城市智能运营中心大屏结合 GIS 地图，以城市地图为背景，辅以左右两侧 2D 面板进行展示。分别从城市综合、生态文明、社会治理、文化旅游四个方面对整座城市进行运营整合，全方位掌控城市运行状况，及时做出运营策略调整。
+
+其中对于城市建筑模型，如果直接采用地图供应商提供的白模，展示效果相对普通，因此还需要通过烘焙 AO 贴图来增加模型之间的阴影关系。其次建筑群作为一个模型不可逐一进行处理，制作过程中难免容易崩溃，因此需要将模型一分为多来分开处理。最终将分出来的每个区块都会附带一个较大的 AO 贴图，再对 AO 贴图进行烘焙，就需要对模型进行展UV，最终完成城市级建筑群建模工作。
+
+
+
+
+
+
+
+## **系统分析**
+
+**城市综合管理可视化**
+通过对接城市行政系统数据库，来实现以下数据展示：
+**人口统计与增长趋势**
+对接统计局系统，通过三年人口数量与增长趋势可以清晰的展示城市人口数量与构成。通过折线图可以对比不同年份的人口增长趋势，结合地图上的人口密度散点图，可以分析未来人口发展及分布趋势。
+
+
+
+
+
+
+**民生服务**
+对接信访系统和效能系统，关注城市内民生服务及信访举报两个领域，通过事件数量和处理率来体现政府部门的办事效率，对于提升城市管理效能、提升监管力度和行政效率有明显的促进作用。
+
+
+
+
+**生态环境监测**
+对接气象系统，通过对气象环境、污染指数等数据，结合生态文明可视化界面，可保持对生态环境的监测并在必要的时刻及时采取生态反应措施。
+
+
+
+
+
+
+**产业经济分析**
+对接税务系统，将城市主要经济产值、产业结构等数据进行多维度监测分析，全方位体现城市产业经济运行态势，为未来城市经济规划、产业结构调整等提供决策方向。
+
+
+
+
+
+
+**紧急事件处理趋势**
+可以随时调取对应突发事件的视频监控，并能实时显示在城市地图上。为城市应急管理的预防、准备、响应、恢复等阶段工作提供高效的数据支持，提升决策人员对事故、自然灾害的处置效率。
+
+
+
+
+
+
+
+**生态管理可视化**
+通过与气象局、水务局、矿产局进行数据联动，实现以下功能：
+**生态信息展示**
+监控近期天气情况，AQI指标，水资源及其他可开采资源，整合气象、空气质量、地质灾害、水源安全、降水面积、矿产资源等信息资源，对城市生态环境进行实时监测与可视分析。相对于传统管理上信息庞杂且无法融合交流，导致数据毫无规律可循的痛点，我们可以从根本上打破信息壁垒，为管理者解决突出环境问题提供科学的决策依据，增强生态保护力度。
+
+
+
+
+**生态预警**
+界面还展示了台风路径图的实时动画并且提供了实时信息交互功能，HT 的 3D 引擎支持画面的动态矢量数据，客户只需要轻轻点击路径图，便可以获取实时台风动态信息。在此基础上还可以调取应急指挥知识库，选择合适的方案进行部署。
+
+
+
+
+
+
+
+
+
+**安防可视化**
+对接公安系统、消防系统、医疗系统，全方面支持对城市公共安全各领域运行态势进行实时监测与可视分析。为雪亮工程、天网工程、公安数字运维、社区安全管理等行业提供可视化管理工具。
+
+**出警情况**
+直观展示包括案件数量、案件种类、完成数量、出警类型在内的实时数据，同时能够查看各区域不同出警力量执行的任务，可以大幅度提高指挥调度效率、增强处置突发事件的能力和水平。
+
+
+
+
+**综合执法**
+横向打通公安，消防数据的同时，把执法综合情况反映在数据面板里，并对案件数量进行趋势分析。帮助管理者更好的对接共享数据，维护社会稳定。
+
+
+
+
+
+
+**交通状况**
+通过交通系统，可实时展示高峰车速情况，同步预测未来时间内的交通拥堵情况。在违章事故方面，加入了多画面视频监控系统以及实时调取事件周边监控视频功能，帮助管理者对重点人员、车辆、告警事件等治安要素进行可视化监测。
+
+
+
+
+
+
+
+
+
+**文旅可视化**
+厦门作为一座旅游城市，在397.84平方千米的岛面积上拥有着丰富的旅游资源，需要不断调整服务策略和引导游客。通过对接旅游部门系统数据，可以实现以下功能：
+**旅游资源分布**
+通过对不同景点、不同种类的旅游资源统计，可以帮助城市运营中心更好的合理优化资源分布，缓解旅游服务压力，提供更好的旅游服务质量。
+
+
+
+
+**旅游经济分析**
+实时展示景点消费情况及消费倾向分析，可以更好的优化当前的旅游商业结构，并提供用于预测未来旅游发展趋势的基础数据。
+
+
+
+
+**游客统计**
+通过年、月、周客流量的统计以及日客流量的实时统计，全方面展示城市各区域景点客流量发展态势，并与历年及全国发展趋势对比，找出可以发展和优化的措施，成为城市旅游文化发展的决策依据。
+
+
+
+
+
+
+
+
+
+
+**游客人脸搜索**
+提供了人脸搜索功能，在此之上对游客数量按男女老少进行监测与可视分析。有效保证游客安全的同时，也为城市治安管理提供了坚实基础。
+
+
+
+
+
+
+**实现价值**
+IOC 智慧城市智能运行中心以城市数字基础设施、通过数据汇聚和分析，结合 GIS 地图的可视化展现形式，以生态化的服务为运营模式，利用“实时、全样、精准”的城市数据建立全程在线、全域覆盖、实时反馈的“城市运行态势地图”，从而快速有效的感知、预警、调度、处置全市网络安全风险，提高管理决策的科学性和精准性，提升管理效率和应急响应能力，助力城市的数字化转型和数字经济发展。
+
+HT for Web GIS 产品意在于解决用户 GIS 类项目的实现，减少用户对 GIS 的学习和投入成本。结合 HT for Web 强大的可视化引擎技术，实现不同的地图瓦片数据、倾斜摄影实景、三维精细化人工建模模型、POI 等数据的叠加展示；结合 HT for Web BIM 产品，实现 BIM 模型和 GIS 结合的可视化展现；结合 HT for Web 三维视频融合产品，实现 GIS 场景中的实时视频融合展示。HT for Web GIS 产品让 GIS 数据的可视化展示形式更加丰富，更加清晰直观，让即使不清楚具体业务的人也能一眼看懂数据意义。
\ No newline at end of file
diff --git a/智慧城市/综合性智慧城市之朔州开发区 3D 可视化.md b/智慧城市/综合性智慧城市之朔州开发区 3D 可视化.md
new file mode 100644
index 0000000..83acce1
--- /dev/null
+++ b/智慧城市/综合性智慧城市之朔州开发区 3D 可视化.md
@@ -0,0 +1,104 @@
+- [综合性智慧城市之朔州开发区 3D 可视化](https://zhuanlan.zhihu.com/p/354615299)
+
+
+
+## **前言**
+
+近几年，我国智慧城市建设步伐也不断加快，党中央和国务院也更加注重智慧园区的建设与发展，智慧园区建设与园区产业发展相结合，向着创新化、生态化发展，更加注重高新技术、绿色环保型等产业的发展，将管理创新与园区智能化相结合。
+
+园区的发展更新换代，集合如：云计算，物联网，大数据，人工智能，GIS等新兴技术，通过对园区内外的数据和资源进行检测、分析、集成和响应，实现对园区管理信息化、信息传递即时化、基础设施智能化、公共服务便捷化、产业发展现代化、社会治理精细化等，以提高园区产业聚集能力、企业竞争力，并且以园区可持续发展为目标的先进园区发展模式和理念。
+
+今天将介绍图扑软件 Hightopo 自主研发的 HT 引擎协助打造三维可视化的智慧朔州开发区，通过未来科幻的建筑风格多维度展示开发区，以360度全景可视化结合数据场景联动，建立一个控制智慧综合型的智慧城市项目。
+
+## **效果展示**
+
+
+
+
+
+
+
+整体场景由地球视角动态下钻至中国版图，对山西省轮廓进行特效光边沿立体描绘，并在此下钻至朔州开发区整体三维场景。其中重点对科创商务园区进行漫游动画查看朔州新产品展销馆。
+
+
+
+
+
+
+
+智慧朔州开发区以展会大屏的整体设计形式，页面中展示全区的三维场景，左右两侧辅以数字化智慧城市监测常见的技术观念里尼指标进行展示，提升业务人员数据分析可视化效率，提升管理决策成功率，辅助领导层进行管理预测。
+
+## **系统分析**
+
+**全场景漫游**
+
+除了初始化的园区全场景漫游、定点漫游外，也提供了单个园区的漫游线路，让用户以第一人称的视角按照指定线路对开发区进行全场景漫游，在制定线路的时候可以参考重点区域或智能化水平较高的区域进行制定，给用户呈现开发区重点发展区域以及智能化发展成效。
+
+
+
+
+
+
+
+**园区信息可视化**
+
+园区信息可视化主要包含园区 GDP、财政数据、工业总产值、固定资产、产出强度、企业汇总、投资要素成本、招商引资。通过园区基本数据信息可对整体园区基本现状有直观的了解。数据的展示信息可根据项目的实际需求进行调整，以满足园区信息的数据可视化。
+
+
+
+
+
+**沙盘布局可视化**
+
+整合了朔州开发区内的各项重要信息如园区道路信息、园区水系分布、西山生态林景观分布等进行全方位展示。传统的园区管理在成本和投入上都耗费很多精力。通过互联网多样化的可视化系统管理方案，整理出一套园区模块统一在线可视化管理集合，智慧园区通过智能化的监测控制与管理系统，促进信息应用的智慧化和深度化，有效节省了园区运行所需的能源和人工成本的消耗，提升土地监测、布局监控的效率和准确度，解决最根本的环节，提高工作效率、增强园区服务质量和建筑环境的利用率，保障园区安全、稳定、持久的发展。
+
+
+
+
+
+
+
+**管网分布可视化**
+
+可通过多级检索功能菜单实现给水管道、污水管道、雨水管道、再生水管道、电力管道、通信管道、燃气原道、供热管道等展示。管网分布可视化可帮助管理者实现对综合管线以标准化的方式进行管理，以三维可视化的形式展现地下管线的埋深、形状、走向、周边环境。
+
+同平面管网相比，管道 3D 可视化更方便运维人员进行地下管道对应查找。也为后期地下管线资源的统筹利用和科学布局提供参考依据标准。为管线占用审批等工作提供了准确、直观、高效的参考。于此同时，对于新增的管网管理，图扑提供了结合管网拐点立体坐标信息实现三维管网自动渲染生成的功能，为后续的生产和延续性使用带来极大便利。
+
+
+
+
+
+
+
+**土地布局可视化**
+
+随着大数据、BIM、GIS 等新的技术理念兴起，土地规划也有了更新换代，而三维形式的可视化展现更能让土地规划可知可控，便于运维人员对的土地进行集中化、科学化管理统筹。打破土地占用数据分散的局面，提高园区土地使用率，高效管理 。图扑软件提供基于 WebGL 渲染的三维特效，也让平台中的土地分布数据表达更酷炫多彩容易区分。
+
+****
+
+
+**交通布局可视化**
+
+通过不同颜色的高亮展示了交通快速路、主干路、次干路。线路可视化可以知道开发区的交通线路布局，方便运维人员及时有效的对交通路线进行调整部署、获取交通轨迹数据信息。辅助园区管理部门综合掌控全区大范围的线路运行管控。在交通布局上，图扑可视化也可延申融合更多功能如综合态势监测：集成地理信息系统、视频监控系统、交管部门各业务系统数据，对交通路况车流量、事故处理报告等要素进行综合监测，帮助管理者实时掌握交通整体运行态势等等。
+
+
+
+
+
+
+
+## **园区可视化实现价值**
+
+**一、 园区全景视角精细化展现**
+
+园区内建筑物，管网设施，机动目标等基本建筑信息可在系统上全方位进行展示。例如园区内各种电力设施，交通枢纽，地标建筑，园区内地下管线，机动目标等位置数据实时展现。
+
+**二、园区信息数字化展现**
+
+原先的园区就像一个信息孤岛，各部门、各条管理线之间，在信息资源上无法做到交流共享和互通，独自运营各自的信息管理系统，通过图扑软件的可视化，在充分利用、整合和挖掘信息技术和信息资源的基础上，对园区达到精细化管理，那么图扑可视化系统就是园区智慧成果和价值的集中体现，让智慧园区变得可知可感。
+
+**三、园区管理集中化展现**
+
+图扑可视化园区管理系统支持融合多部门、不同平台的数据对接显示，管理者可以全方位掌控园区综合态势，不同运营管理者也可以互联互通相关联信息。包括支持了：政务、警务、交通、电力等实时数据信息；包括支持集成地理信息、GPS 数据、建筑物三维数据、统计数据、园区视频监控采集画面等多类型数据。
+
+图扑可视化是基于 HTML5 打造的纯 Web 页面，只要有浏览器就可以打开访问，客户可以根据当下使用场景，监控态势，自定义布局想要显示的内容。既可以重点显示专项事件，也可以全局掌控园区整体态势。快速实现现代化的、高性能的、跨平台的（桌面 Mouse/移动 Touch/虚拟现实 VR）图形展示效果及交互体验，并且还能在手机端或者PAD端对大屏进行页面显示和监控模式等交互控制。
\ No newline at end of file