最课程阶段大作业05：污水处理系统以及百度地图

2018-09-18 06:35:50来源：博客园阅读 ()

吃着火锅唱着歌，我们的课程已经进行了两个月了，现在，我们终于有能力进行真正的软件开发了。

往期学完课程面试归来的同学，都知道有一句话：“面试造航母，实际工作拧螺丝钉”。

很庆幸的是，到目前为止，你已经掌握了大部分拧螺丝钉需要的知识了，这些知识就是：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>