最课程阶段大作业05：污水处理系统以及百度地图
吃著火鍋唱著歌，我們的課程已經進行了兩個月了，現在，我們終于有能力進行真正的軟件開發了。
往期學完課程面試歸來的同學，都知道有一句話：“面試造航母，實際工作擰螺絲釘”。
很慶幸的是，到目前為止，你已經掌握了大部分擰螺絲釘需要的知識了，這些知識就是：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="width: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: { width: 0, height: 3 }, position: { lat: 31.237 , lng:121.491 } }, // 緯度 經度{ content: "備注", title: "TMD你在這里", imageOffset: { width: 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 = {width: 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群：
轉載于:https://www.cnblogs.com/luminji/p/9640533.html
總結
以上是生活随笔為你收集整理的最课程阶段大作业05：污水处理系统以及百度地图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 阿里云服务器Docker及Docker
- 下一篇： CentOS7.5 -- Ansible