最课程培训

最课程阶段大作业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群:

posted @ 2018-09-13 14:58 陆敏技 阅读(...) 评论(...) 编辑 收藏
Web Counter
Coupon for Contacts