整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

使用浏览器访问PLC的自定义网页

日常使用西门子S7-1200系列PLC时，需要查看PLC内部数据，通常都是用触摸屏或者上位机监控，或者直接使用博途在线查看。但是当遇到触摸屏或者上位软件未关联的变量，且本机未安装博途的情况，问题就会比较复杂了，通常需要重新配置上位机参数，或者借助第三方工具，甚至需要重新安装博途来解决。这时候，如果在PLC程序设计的时候，启用了Web服务器，问题就会比较简单了。

首先，使用博途打开PLC源代码，选中CPU模块，点击右键，点击属性，弹出设置界面，在”常规“窗口左侧列表框中选择”Web服务器“，勾选"在此设备的所有模块上激活Web服务器"，同时取消“仅允许通过HTTPS访问”。重新编译后下载。

打开计算机上的网页浏览器，在地址栏输入http://ww.xx.yy.zz（此处为PLC的实际IP地址，如192.168.1.10，所有符号为英文状态输入），打开 S7-1200的 标准 Web 页面，如下图 所示。

变量状态页面可以查看任何 CPU 中的 I/O 或者存储器数据，可以输入绝对地址（例如：MB0、I0.0、Q1.0等）、PLC 变量名或者数据块中的变量。可以选择显示的数据类型的格式；可以显示或者更改当前值。如下图所示。

到此为止，基本已经解决了之前遇到的问题，但是，进一步探索后，会发现“Web服务器”还有更强大的功能，可以创建融入 PLC 数据的特定的 HTML 页面。

选择一款HTML编辑器，如Microsoft Frontpage，Dreamweaver或VScode等，创建用户定义的 Web 页面，使用AWP 命令包含在 HTML 代码的 HTML 注释中（AWP 命令是西门子提供用于访问 CPU 信息的固定命令集）。

如需显示变量，语法为 :=<Varname>: ，Varname为 PLC 变量，使用双引号将变量名称括起来即可，如下图所示。

<p>Actual Value: :="VarName1":</p>

如需写入变量，则首先需要在HTML注释中添加。

<!-- AWP_In_Variable Name='"VarName1"' -->

然后添加输入框和确认按钮等元素即可。

<input type="text" id="value1" name='"VarName1"' size="5">
<input type="submit" value="Set a new Value" style="width: 200px">

页面编辑完成后，打开博途，在 Web 服务器的"用户自定义页面"中进行配置。注意需要点击生成块方可生效。



执行 WWW 指令，在主程序直接调用，也可通过程序逻辑可控制何时启用自定义页面。

用户定义的 Web 页面块后和其它的程序块一样，将成为程序的一部分，按照正常过程将下载到 CPU即可。再次打开浏览器，输入PLC的IP地址后，即可看到用户编写的HTML页面。由于采用了标准的HTML协议，用户自定义的页面也可以使用处于同一网段下的手机访问，如果局域网配置了VPN，甚至可以通过外网，远程操作，因此，为了防止 PLC 被恶意攻击，或者出现未经授权的操作，官方还是建议勾选“仅允许通过 HTTPS 访问”。

一个典型的HTML页面示例

<!-- AWP_In_Variable Name='"VarName1"' -->

<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
		<title>Web page demo - Login - Main page</title>
		<!-- Via "<link...>" a CSS file is referenced which contains all information on the optical design of the web -->
		<!-- <link rel="stylesheet" type="text/css" href="/CSS/S7Web.css"> -->  <!-- S7Web.css is used in S7-1500 CPUs and S7-1200 FW2.2 -->
	</head>
	<body onload="loginCheck()">  <!-- check login with each refresh of the website -->

		<!-- example for write value to CPU -->
		<form method="post" action="" onsubmit="">
			<p> </p>
			<p>
			<input type="text" id="value1" name='"VarName1"' size="5">
			<input type="submit" value="Set a new Value" style="width: 200px">
			</p>
		</form>

		<p>Actual Value: :="VarName1":</p>

		<!-- BEGIN Login Area -->
		<iframe id="WebserverIFrame" name="WebserverIFrameName" src="/Portal/Portal.mwsl" style="display:none"></iframe>

		<!-- area for login -->
		<div id="loginBox" class="Login_Area"></div>	<!-- "Login_Area" is defined in S7Web.css for S7-1500 CPUs and S7-1200 FW2.2-->

<!-- function for check login -->
<script type="text/javascript">

function loginCheck() {
	var iFrameElement = document.getElementById('WebserverIFrame');
	var loginForm = iFrameElement.contentWindow.document.getElementById('loginForm'); //S7-1200 FW4.0
	if (loginForm == null) {
		loginForm = iFrameElement.contentWindow.document.getElementById('Login_Area_Form'); //S7-1200 FW2.2 and S7-1500 FW1.5
	}
	if(loginForm) {
		loginForm.setAttribute("data-ajax", "false");
		document.getElementById('loginBox').innerHTML = loginForm.parentNode.innerHTML;
		document.getElementsByName("Redirection")[0]["value"] = window.location.href.split("?")[0];
	}

	var logoutForm = iFrameElement.contentWindow.document.getElementById('logoutForm'); //S7-1200 FW4.0
	if(logoutForm == null) {
		logoutForm = iFrameElement.contentWindow.document.getElementById('logout_form'); //S7-1200 FW2.2
	}
	if(logoutForm == null) {
		logoutForm = iFrameElement.contentWindow.document.getElementById('Logout_Area_Form'); //S7-1500 FW1.5
	}
	if(logoutForm) {
		logoutForm.setAttribute("data-ajax", "false");
		document.getElementById('loginBox').innerHTML = logoutForm.parentNode.innerHTML;
		document.getElementsByName("Redirection")[0]["value"] = window.location.href.split("?")[0]; // use the current webpage as redirection - remove additonal post values attached by "?" if necessary
	}
}
</script>
<!-- END Login Area -->

	</body>

</html>

（来源于西门子官方文档）


合理利用Web服务器，结合前端开发技术，可以将自定义页面设计成组态界面，替代组态软件和触摸屏，将逻辑代码和操作界面全部下载存储到PLC，只需要浏览器，即可实现任意客户端对PLC设备的操控。

言

使用 API 网关作为内部服务面向客户端的单一入口，是一种普遍采用的架构模式。企业组织通过良好定义的 API 将内部系统向内部和外部用户公开，通常都会采用 API 网关来处理横向的关注点，包括访问控制、速率限制、负载均衡等等，来实现安全可控的 API 开放。而被广泛实践的微服务架构在提供高度灵活性和弹性的同时，也给 API 网关带来了更多的挑战。

阿里云云服务总线（Cloud Service Bus）新推出微服务网关服务（CSB Micro Gateway），针对微服务架构下 API 开放的特点，提供能与微服务环境的治理策略无缝衔接的网关服务，实现高效的微服务 API 开放。

API 网关的作用

API 网关典型作用

相信许多人都熟悉 API 网关的概念。作为内部服务面向客户端的单一入口，API 网关有两个最典型的作用：

1、内外解耦：对客户端屏蔽内部服务的动态多样化实现细节，如技术框架、拆分粒度、接口结构、实例状态等

2、切面控制：让内部服务能专注在业务逻辑上，集中处理横向的关注点，如路由、安全、限流、日志、监控等

API 网关使用类型

实际使用中，对应 API 网关所在位置和针对场景的不同，可分成两种类型：

1、企业级网关：位于企业组织的外围，面对外部的 API 消费者或服务提供者。通常将企业自身的数据和能力 API 化，对外开放，也有允许外部服务入驻的情况。总的来说，以支撑服务入驻、服务运营和服务门户场景为主，侧重解决管理和运营挑战。

2、微网关：位于企业组织内部，面对内部的 API 消费者，可以看做是内部服务之前的最后一道防线。通常按内部服务的业务划分、物理环境以及技术形态的差异，设立多个微网关来分别负责。总的来说，以提供快捷开放、策略控制、服务适配能力为主，侧重提升开发和运维效率。

实际上，企业级网关和微网关只是两种使用类型，在关注的网关特性上有不同侧重，实践上并非一定需要不同的产品或两套独立的部署。

API 网关流量特征

企业级网关处理的一定是 API 消费方和后端服务之间的流量，也称为南北流量；微网关一般也只是处理南北流量，当负责的服务本身缺乏注册发现机制，例如运行在传统应用服务器上的不同应用，当相互调用需要一个切面管控时，可以用微网关来统一处理服务间流量，也称为东西流量。

微服务网关定义

在这里我们做个定义：用于微服务环境的微网关，称作微服务网关。开源产品中，Kong、Netflix Zuul、Spring Cloud Gateway、Ambassador 等都可以用来作为微服务网关，其中 Ambassador 是基于 Envoy 构建的，属于 K8s 原生微服务网关。那么，微服务网关有什么特别的地方，需要解决什么问题呢？

API 网关在微服务架构下面临的挑战

服务治理诉求

在微服务架构模式下，小型化、自包含、相对隔离、随时可运行的应用形态，带来了极大的灵活性和弹性。但是微服务架构高度动态的服务分布和复杂依赖的特点也带来了很多挑战：链路复杂，定位故障点困难；一个服务的故障可能带来雪崩效应；端到端的测试难以实施等等。对应这些问题，出现了一系列典型的服务治理手段：

  • 链路压测 - 端到端实际流量特征的测试，尽可能多暴露问题与风险，好针对制定保障策略
  • 监控报警 - 实时监控各个服务、组件的状态指标，即时报警
  • 链路追踪 - 追踪用户请求产生的服务调用路径，分析瓶颈风险，快速定位问题
  • 日志分析 - 搜集分散的日志，提供快速准确查询，配合链路追踪分析问题
  • 访问控制 - 实施权限检查，规范调用控制
  • 服务发现 - 动态注册发现，同步服务状态和可用性
  • 流量管理 - 结合服务发现，实施灵活的负载策略和流量调度
  • 熔断降级 - 核心业务失效快速响应，避免请求堆积，非核心业务降级处理，保证核心业务流畅
  • 配置中心 - 集中管理配置，高效高可用推送，保护敏感配置信息

在实现上，这些横向的治理能力大都需要微服务应用配合对接，这些公共机制的实现可以通过微服务框架（例如 Spring Cloud、Dubbo）来提供，让应用开发能专注在业务逻辑上。或者采用服务网格（Service Mesh）模式，从应用实现解耦，付出一定性能代价，在应用本地的反向代理组件（Sidecar）中转发流量并处理所有这些逻辑。

微服务网关的配合

由于微服务的调用方可能在微服务环境内部，也可能在微服务环境外部，这些横向的治理能力，有时也需要同时作用到微服务环境与外部之间的南北流量上。这时就需要网关的配合。

以服务发现和流量管理这两个策略为例，考察两个非常普遍的典型场景：

场景一：流量正确路由到可用的微服务实例

场景二：同步在网关上执行金丝雀发布灰度规则

当一个微服务的实例增加、减少，或者不可用时，网关要能把流量正确地路由到可用的微服务实例上；当微服务更新版本，采用金丝雀发布的时候，灰度策略不但需要在微服务环境内的东西流量上生效，在网关上也要执行相同的灰度策略。

很明显，网关进行这样的配合，如果采用人工操作的方式的话，会带来很多问题：首先是实时性差，导致网关流量路由的失效和错误几率增大；其次是运维和管理的压力，对应关系容易错乱，操作可能失误错漏，带来很大风险。

设想一下，要校对实例的可用状态，然后在网关或网关后的负载上挂载、卸载对应端点；或在金丝雀发布、中断、回滚时，在网关上进行对应的灰度判定和路由配置。如果微服务稍微多些，运维和管理的难度、风险都是显而易见的。

因此，微服务的网关，需要能够和微服务环境的治理能力自动化联动。对应上面的例子，就是要求：能够自动基于微服务环境的服务发现策略，将服务请求动态地路由到可用的微服务实例上；能够在微服务环境进行金丝雀发布时，自动同步配合执行对应的灰度策略。

也就是说，需要微服务网关和微服务环境在服务治理策略上能够无缝衔接，自动配合生效。对这个要求的支持，也正是新发布的微服务网关服务（CSB Micro Gateway）的核心特性之一。

微服务网关云服务

使用阿里云云服务总线（Cloud Service Bus）新发布的微服务网关服务（CSB Micro Gateway），用户可以为目标微服务环境快速创建微服务网关。指定注册中心后，微服务网关就可以动态感知微服务节点的变更，将 API 请求动态路由到后端微服务。通过控制台可以基于注册中心的服务列表快速发布 API，支持服务路由规则的动态变更生效，可以方便地管理限流、鉴权、后端负载均衡等控制策略，提供完整的 API 访问日志和统计报告，并且支持和后端微服务治理策略的联动，例如配合微服务应用的升级发布自动执行灰度路由策略。

新发布的微服务网关服务：https://help.aliyun.com/document_detail/156009.html

微服务亲和特性

  • 关联微服务环境，快捷创建、扩容缩容微服务网关
  • 基于微服务环境注册中心的服务列表，方便地选取服务开放为 API
  • 动态感知微服务节点的变更，将 API 请求路由到可用微服务实例上
  • 支持服务路由、限流、鉴权、后端负载均衡等各种控制策略，动态生效无需重启
  • 支持与微服务治理策略的无缝联动，例如无需用户干预，自动配合执行灰度路由策略等

现状与规划

微服务网关服务（CSB Micro Gateway）是阿里云上的托管式微服务网关服务，提供高度的可用性和稳定性，基于开源引擎，支持开源配置方式。将陆续提供多种微服务网关引擎的托管服务，以满足不同场景的侧重需求和使用偏好。

公测首先推出基于 Zuul 的服务版本，支持 Eureka 注册中心以及 Spring Cloud 微服务框架。将很快支持基于 Kong、Ambassador 等引擎的托管服务将很快推出 Nacos 等多种微服务注册中心的支持，将陆续支持 Dubbo、gPRC 等多种微服务框架将陆续提供丰富的控制策略，包括各种鉴权方式、流量控制、安全防护、服务组装变换等等，以及支持用户自定义实现的策略将陆续补充企业级网关所侧重的一些开放管控能力，例如 API 标准规范定义、API 文档、API 测试调用、多版本管理等

欢迎试用

欢迎试用，敬请密切关注微服务网关的发布更新！

微服务网关控制台入口（无需开通，直接使用）：https://microgw.console.aliyun.com/

微服务网关使用说明 ：https://help.aliyun.com/document_detail/156009.html

. 概述

前段时间，给大家介绍了WeServer在内网中离线发布全国影像及高程DEM数据并在OsgEarth中调用的方法和在开源三维地球Cesium中如何离线加载卫星影像及高程DEM数据的方法。

其中，OsgEarth是一个基于桌面端的三维地球开源平台，而Cesium则是基于Web端的三维地球开源平台。

同样地，我们也可以基于二维的开源平台并结合WeServer在内网中离线发布全国卫星影像。

关于二维的WebGIS开源平台，我们推荐OpenLayers和MapBox两种。

其中，二维开源平台OpenLayers在内网中离线加载卫星影像的方法已经作过分享了，现在我们再来分享一下MapBox在内网中加载显示WeServer发布的离线卫星影像的方法。

2. 准备工作

在开始之前，需要先准备离线数据发布软件、离线卫星影像示例数据、MapBox开发源码和本机IP地址等。

地图发布软件：需要在内网发布离线卫星影像，请确保地图发布服务中间件版本为4.0.5以上，如果低于该版本，请通过私信回复"中间件"免费获取最新版本安装包，也可以直接在官网下载。

离线示例数据：本文提供的离线示例数据包括墨卡托投影和WGS84投影的卫星影像与地名标签数据，由于这里主要是为了进行功能性演示，因此只提示前10级影像数据。

卫星影像示例数据


另外，由于MapBox默认仅支持墨卡托投影数据，不支持WGS84坐标系经纬度正投的影像数据，因此这里只需要从百度网盘的共享数据中下载"SatelliteForMercator"和"LabelFroMercator"文件夹中的数据即可。

私信“示例数据”获取示例数据。

MapBox开发源码：MapBox源码可以从MapBox官网下载最新版，但由于下载的方法略微有点复杂（后面会介绍方法），因此也可以通过私信回复"MapBox"获取MapBox开发源码文件。

本机IP地址：由于会用到本机IP作为访问地址，可以通过在DOS窗口中运行"IPConfig"命令或其它方式获取本机IP地址以备用，如下图所示。

获取本机IP地址


3. MapBox源码下载

由于MapBox的源码下载略微有点复杂，我们有必要在这里为大家分享一下它的下载的方法，如果你已经从百度网盘下载了MapBox源码，请略过本节。

首先打开MapBox官网，然后点击"Documentation\Mapbox GL js"，如下图所示。

MapBox官网


在显示的页面点击"Install"按钮，如下图所示。

开始下载安装


从显示的提示可以看出，这里下载代码需要执行一个CMD命令"npm install mapbox-gl --save"进行下载，如下图所示。

下载方法


打开CMD命令窗口，并进入到需要下载保存的目录路径，这里我们将下载内容保存到"F:\MapBox"目录，如下图所示。

执行下载


执行下载后的结果，如下图所示。

下载结果


CMD命令窗口中的警告信息提示缺少"package.json"文件，我们可以通过执行"npm init -f"命令，将会在目录中自动生成该文件，如下图所示。


生成PACKAGE文件


成功生成了"package.json"文件之后，又提示缺少了描述信息和"repository"字段，如下图所示。

警告提示信息


我们打开"package.json"文件，发现"description"字段为空，且没有"repository"字段，如下图所示。

PACKAGE原文件内容


为了避免出现警告信息，可以为"description"添加描述内容，并添加"repository"字段。

"repository"用于指定你的代码存放的地方，这个对希望贡献的人有帮助。

如果git仓库在github上，那么npm docs命令能找到你，如下所示。

"repository" :

{ "type" : "git"

, "url" : "http://github.com/isaacs/npm.git"

}

URL应该是公开的（即便是只读的）能直接被未经过修改的版本控制程序处理的url。不应该是一个html的项目页面，因为它是给计算机看的。

这里，我们只需要将项目设置为私有即可，即在文档中添加"private"字段并设置为"true"，如下图所示。

修改PACEAGE文件


在"package.json"文件中设置完成并保存后，我们再次执行"npm install mapbox-gl --save"命令，就不会再显示警告信息了，如下图所示。

执行结果


以上就是MapBox源码下载的全过程，后面我们会专门说明如何在IIS中部署MapBox源码的方法。

4. WGS84卫星影像离线发布

软件的安装与离线卫星影像的发布方法，请参阅"全球卫星影像离线发布神器《水经注地图发布服务中间件4.0》正式发布"一文。

由于MapBox是二维应用，因此这里不需要发布高程。

但需要注意的是，要将投影设置为"Web_Mercator"，且确保设置的端口号没有被其它程序占用，如下图所示。

安装配置


安装完成后，会显示如下图所示信息。

安装完成


打开Windows任务管理器，如果WeServer服务的状态显示"正在运行"，则说明中间件服务安装成功并已经正常运行，如下图所示。

服务运行正常


WeServer成功发布后，接下来我们需要将下载的MapBox在本地进行部署。

5. MapBox源码的本地离线部署

我们通过IIS对MapBox源码进行本地化部署，如果你对IIS网站部署非常熟悉，请略过本节。

MapBox源码解压之后，如下图所示。

MapBox源码目录


在Windows控制面板中打开"管理工具"，如下图所示。

管理工具


打开IIS网站管理器，如下图所示。

打开IIS


在"网站"树节点单击鼠标右键，然后选择"添加网站"菜单，如下图所示。

添加网站


网站名称可以任意取，这里我们取名为"MapBox"，物理路径设置为MapBox源码的"node_modules\mapbox-gl"文件目录，并将端口号设置为没有被其它程序或Web站点所占用的端口号，这里默认为"80"，如下图所示。

配置网站参数


配置完成并点击"确定"按钮之后完成MapBox源码的本地网站配置，如下图所示。

完成配置


现在，MapBox源码在本地就离线部署好了，但还需要新建一个卫星影像的离线加载显示页面才可以进行访问。

6. 卫星影像的离线加载显示

在MapBox源码目录"F:\MapBox\node_modules\mapbox-gl"中新建一个"SampleForMercator.html"Web页面页文件，如下图所示。

新建Web页面文件


在"SampleForMercator.html"网站页面文件中添加卫星影像与地名标签加载代码，如下图所示。

添加影像加载代码


通过关注私信回复"MapBox"可获取MapBox源码文件，解压后在目录中，已经为你提供了"SampleForMercator.html"源码文件，但需要特别注意的是需要将IP地址改为本机IP地址，前文我们已经提到过了获取本机IP的方法。

打开网址"http://192.168.0.5/SampleForMercator.html"，可以显示加载本地影像如下图所示。

WGS84卫星影像加载效果


至此，MapBox在内网中加载显示WeServer发布的离线地图的目的就达到了。

这样一来，当前这台电脑在内网中就是一台标准地图服务器，内网中任何一台电脑都可以通过打开网址离线查看地图，但需要注意的是需要将网址中的IP改为本机IP地址。

7. 总结

最后再次申明，由于本文中提供的数据为示例数据，旨在说明地图发布服务中间件的内网离线发布功能，因此卫星影像数据和地名标签都仅仅提供全球前10级数据。

你可以通过私信回复"免费数据"，领取一个省的高清卫星影像数据，然后更新到对应的数据目录即可！


在线咨询
上一篇：html5重力感应效果-摇一摇
下一篇：农业银行申请WPF用户界面框架生成HTML界面的方法及装置专利，提高代码迁移效率

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 乳山 新市区 天河区 江都市 文成县 崇义县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服