按图索数-WinCC中的“地图 数据”

原文作者：

胡世川 - 西门子数字化工业集团自动化部

---

先看个WinCC运行画面的录屏视频

---

实现原理：

由于百度的API是基于Javascript的，无法直接在WinCC V7.5的环境中调用。

这里采用了一个变通的方式来实现，架构如下图，在WinCC本机部署一个Web服务器，由其向百度地图API服务器索取地图，同时获取WinCC的数据，将地图和数据在HTML页面合成，最后在WinCC中采用WebBrowser控件呈现在画面中。

---

具体的过程

• 编写前端代码

1. 进入百度地图进入百度地图API官网,申请一个密钥（AK），并在html文件中使用AK码，引入地图API文件。

   

2. html中创建一个<div>元素，作为地图的容器：<div id='container'></div>

   

3. 在html中创建自己的自 定义的元素

   

4. 将自定义的元素添加至地图中。

   自定义一个构造函数，关键一步需将其prototype属性设为地图API提供的Overlay的实例，其它细节如下：
   

   

5. 利用上一步定义的类（构造函数），将自定义的元素添加至地图中

   

6. 编写获取WinCC数据的Javascript代码，此例的数据源为txt文件。将获取的数据，处理，给相应的标签元素赋值 

   

---

• 部署web服务器

1. 本例为简化流程，采用node js，使用Express框架模版快速搭建Web服务器

   

2. 将前面编写好的前端代码（ index.html+myjs.js等）放到该views文件夹下。

   此时，当启动webserver后，此前端代码的URL被定义为：

   http://127.0.0.1:4000/views/index.html

   

   ---

• 组态WinCC

1. 组态WinCC画面，插入WebBrowser浏览器控件，并在控件的MyPage属性中链接到上面的URL。

   

2. 利用WinCC脚本，将变量值写入到一个txt文件中，作为地图数据的动态数据源。

   

3. 用记事本编写启动web服务器(加载前面的app.js)的批处理文件runNode.bat：

   cmd /k 'cd /d 路径&&node app.js'

4. 在启动WinCC的同时，启动web服务器

   

5. 运行WinCC，即如前面视频所示。

   

除地图外，可借鉴这个思路，通过Javascrip前端与Web Server后端相结合，可实现更广泛的应用可能，如：在WinCC中调用上图的仪表盘（E-Chart），甚至加载3D容器。

---