吃着火锅唱着歌，我们的课程已经进行了两个月了，现在，我们终于有能力进行真正的软件开发了。
往期学完课程面试归来的同学，都知道有一句话：“面试造航母，实际工作拧螺丝钉”。
很庆幸的是，到目前为止，你已经掌握了大部分拧螺丝钉需要的知识了，这些知识就是：JavaSE+HTML+CSS+JavaScript+JQuery+EasyUI+MySQL。十多年前，我们70后就是用这样的技术开发了一个又一个项目，而现在你们90后，要比我们苦逼一点，后面还有各种框架和分布式的知识要学习。但是，不管怎么样，现有的知识已经满足了我们做一个稍微正式一点、大型一点的项目了，那么，今天我们就来做这样一个项目：**智能水务云平台。
以下的部分内容描述，我将摘自真正的项目需求书。
一：项目概述
在实际的工作中，我们无论是在售前方案书，还是需求设计书中，总能看到“项目概述”，这一般是对项目的整体描述。本项目的项目概述长成这样：
二：平台设计原则
在实际的设计或者需求说明书中，往往还存在着一些正确的废话，比如“设计原则”。这些正确的废话，少了还不行，这是非技术领导们最喜欢看的。那么，满足他们，写的越好看越好：
三：体系架构
体系架构，用于描述系统的部署场景，一般适用于图示。可复杂、可简单。它用于指导开发人员，开发出来的软件运行在哪里，通信协议用的是什么等。以本项目为例，其体系架构描述成这样：
四：需求设计
从这部分开始，是真正到了我们开发人员需要细看的地方了。以下不再特别框出来。
平台功能模块分为站点监控、运行报表、警报和站点管理、个人中心及权限认证模块，总体体系结构图如下：
本次，我们迭代开发（一次迭代在时间上一般指一周到一个月）我们实现的功能是：站点监控、站点维护、地图模块。
1.站点维护
2.站点监控之运行监控
3.站点监控之运行监控之回流泵设置
4.地图模块
五：百度地图API
关于地图的显示，初学者可能会觉得非常的神秘。其实事情远比你想象的简单。
我们都知道，js能创建html元素，所以，我们无非做的就是调用百度的一个js文件，然后输入一些参数，百度的js就会帮我们在自己的网页上创建地图。
来看一个完整的例子吧：
<!doctype html> <html> <head> <meta charset="u"> <title>示例</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=u5CNodaA3rFoWqcKcEhlpfDz"></script> </head> <body> <div class="map"> <div style="1100px;height:400px" id="map"></div> </div> <script type="text/javascript"> function initMap() { createMap(); //初始化地图 addMapControl();//加载地图控件，非必须 addMapOverlay();//向地图添加覆盖物 } function createMap() { map = new BMap.Map("map"); //设置地图中心点经度、纬度、缩放比例 map.centerAndZoom(new BMap.Point(121.491,31.233), 16); map.enableScrollWheelZoom(); map.enableKeyboard(); map.enableDragging(); map.enableDoubleClickZoom() } function addClickHandler(target, window) { target.addEventListener("click", function () { target.openInfoWindow(window); }); } function addMapOverlay() { var markers = [ { content: "备注", title: "我在这里", imageOffset: { 0, height: 3 }, position: { lat: 31.237 , lng:121.491 } }, // 纬度 经度 { content: "备注", title: "TMD你在这里", imageOffset: { 0, height: 3 }, position: { lat: 31.234 , lng:121.493 } } // 纬度 经度 ]; for (var index = 0; index < markers.length; index++) { var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat); var marker = new BMap.Marker(point, { icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), { imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height) }) }); var label = new BMap.Label(markers[index].title, { offset: new BMap.Size(25, 5) }); var opts = { 200, title: markers[index].title, enableMessage: false }; var infoWindow = new BMap.InfoWindow(markers[index].content, opts); marker.setLabel(label); addClickHandler(marker, infoWindow); map.addOverlay(marker); }; var labels = [ ]; for (var index = 0; index < labels.length; index++) { var opt = { position: new BMap.Point(labels[index].position.lng, labels[index].position.lat) }; var label = new BMap.Label(labels[index].content, opt); map.addOverlay(label); }; } function addMapControl() { var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); scaleControl.setUnit(BMAP_UNIT_IMPERIAL); map.addControl(scaleControl); var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(navControl); var overviewControl = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: true }); map.addControl(overviewControl); } var map; initMap(); </script> </body> </html>
这是一个标准的示例。运行它，我们会看到：
假设我们需要做的就是将地点在地图上显示出来，那么，我们唯一需要做的就是改这几个地方：
1：你的开发者标识
这个开发者标识要去百度地图申请，地址在这里：http://lbsyun.baidu.com/。当然你也可以用我的。
2：设置地图中心点：
3：设置我们要显示的点：
然后，一切交给百度地图就行了。
六：视频监控
有了上面的百度地图的知识，视频监控还神秘吗？道理都是一样一样滴。
视频监控并不需要大家去实现，但是还是决定给大家讲讲原理。
如果我们要在网页上看到视频监控的画面，那么我们首先得去购买一套视频监控的设备。而我们在买视频监控设备的同时，厂商会给我们一套开发包，这个开发包中一般都会有DEMO什么的。我们根据demo，在网页中嵌入开发包中的一个控件后或嵌入一段js，设置好摄像头的IP地址，就可以实现监控了。
样例代码如下：
怎么样，是不是神秘感破除？这个时候，如果设备在线，你就会在网页中看到摄像头中的一切哦，如下：
真是绿油油的一片草啊~~
七：作业要求
华丽分割线
===========================================================
最课程JavaEE+互联网分布式新技术开班进行中，来http://www.zuikc.com
看看吧。你想参加不一样的培训班，并且一毕业就NB，那就来加入我们吧；
更多技术文章和开班信息请加入，
QQ群：
