最课程阶段大作业05：污水处理系统以及百度地图
吃著火鍋唱著歌，我們的課程已經(jīng)進(jìn)行了兩個月了，現(xiàn)在，我們終于有能力進(jìn)行真正的軟件開發(fā)了。
往期學(xué)完課程面試歸來的同學(xué)，都知道有一句話：“面試造航母，實際工作擰螺絲釘”。
很慶幸的是，到目前為止，你已經(jīng)掌握了大部分?jǐn)Q螺絲釘需要的知識了，這些知識就是：JavaSE+HTML+CSS+JavaScript+JQuery+EasyUI+MySQL。十多年前，我們70后就是用這樣的技術(shù)開發(fā)了一個又一個項目，而現(xiàn)在你們90后，要比我們苦逼一點，后面還有各種框架和分布式的知識要學(xué)習(xí)。但是，不管怎么樣，現(xiàn)有的知識已經(jīng)滿足了我們做一個稍微正式一點、大型一點的項目了，那么，今天我們就來做這樣一個項目：**智能水務(wù)云平臺。
以下的部分內(nèi)容描述，我將摘自真正的項目需求書。
?
一：項目概述
在實際的工作中，我們無論是在售前方案書，還是需求設(shè)計書中，總能看到“項目概述”，這一般是對項目的整體描述。本項目的項目概述長成這樣：
?
二：平臺設(shè)計原則
在實際的設(shè)計或者需求說明書中，往往還存在著一些正確的廢話，比如“設(shè)計原則”。這些正確的廢話，少了還不行，這是非技術(shù)領(lǐng)導(dǎo)們最喜歡看的。那么，滿足他們，寫的越好看越好：
?
?
三：體系架構(gòu)
體系架構(gòu)，用于描述系統(tǒng)的部署場景，一般適用于圖示。可復(fù)雜、可簡單。它用于指導(dǎo)開發(fā)人員，開發(fā)出來的軟件運行在哪里，通信協(xié)議用的是什么等。以本項目為例，其體系架構(gòu)描述成這樣：
?
四：需求設(shè)計
從這部分開始，是真正到了我們開發(fā)人員需要細(xì)看的地方了。以下不再特別框出來。
平臺功能模塊分為站點監(jiān)控、運行報表、警報和站點管理、個人中心及權(quán)限認(rèn)證模塊，總體體系結(jié)構(gòu)圖如下：
本次，我們迭代開發(fā)（一次迭代在時間上一般指一周到一個月）我們實現(xiàn)的功能是：站點監(jiān)控、站點維護(hù)、地圖模塊。
?
1.站點維護(hù)
?
2.站點監(jiān)控之運行監(jiān)控
?
?
3.站點監(jiān)控之運行監(jiān)控之回流泵設(shè)置
?
?
4.地圖模塊
?
五：百度地圖API
關(guān)于地圖的顯示，初學(xué)者可能會覺得非常的神秘。其實事情遠(yuǎn)比你想象的簡單。
我們都知道，js能創(chuàng)建html元素，所以，我們無非做的就是調(diào)用百度的一個js文件，然后輸入一些參數(shù)，百度的js就會幫我們在自己的網(wǎng)頁上創(chuàng)建地圖。
來看一個完整的例子吧：
<!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"); //設(shè)置地圖中心點經(jīng)度、緯度、縮放比例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 } }, // 緯度 經(jīng)度{ content: "備注", title: "TMD你在這里", imageOffset: { width: 0, height: 3 }, position: { lat: 31.234 , lng:121.493 } } // 緯度 經(jīng)度 ];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>?
這是一個標(biāo)準(zhǔn)的示例。運行它，我們會看到：
假設(shè)我們需要做的就是將地點在地圖上顯示出來，那么，我們唯一需要做的就是改這幾個地方：
1：你的開發(fā)者標(biāo)識
這個開發(fā)者標(biāo)識要去百度地圖申請，地址在這里：http://lbsyun.baidu.com/。當(dāng)然你也可以用我的。
2：設(shè)置地圖中心點：
3：設(shè)置我們要顯示的點：
然后，一切交給百度地圖就行了。
?
六：視頻監(jiān)控
有了上面的百度地圖的知識，視頻監(jiān)控還神秘嗎？道理都是一樣一樣滴。
視頻監(jiān)控并不需要大家去實現(xiàn)，但是還是決定給大家講講原理。
如果我們要在網(wǎng)頁上看到視頻監(jiān)控的畫面，那么我們首先得去購買一套視頻監(jiān)控的設(shè)備。而我們在買視頻監(jiān)控設(shè)備的同時，廠商會給我們一套開發(fā)包，這個開發(fā)包中一般都會有DEMO什么的。我們根據(jù)demo，在網(wǎng)頁中嵌入開發(fā)包中的一個控件后或嵌入一段js，設(shè)置好攝像頭的IP地址，就可以實現(xiàn)監(jiān)控了。
樣例代碼如下：
怎么樣，是不是神秘感破除？這個時候，如果設(shè)備在線，你就會在網(wǎng)頁中看到攝像頭中的一切哦，如下：
真是綠油油的一片草啊~~
?
七：作業(yè)要求
?
?
華麗分割線
===========================================================
最課程JavaEE+互聯(lián)網(wǎng)分布式新技術(shù)開班進(jìn)行中，來http://www.zuikc.com
看看吧。你想?yún)⒓硬灰粯拥呐嘤?xùn)班，并且一畢業(yè)就NB，那就來加入我們吧；
更多技術(shù)文章和開班信息請加入，
QQ群：
轉(zhuǎn)載于:https://www.cnblogs.com/luminji/p/9640533.html
總結(jié)
以上是生活随笔為你收集整理的最课程阶段大作业05：污水处理系统以及百度地图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 阿里云服务器Docker及Docker
- 下一篇： windowserver2012 R2