基于 eCharts 的百度地图学生籍贯统计

最新推荐文章于 2025-05-07 14:38:51 发布

程序员奇奇

最新推荐文章于 2025-05-07 14:38:51 发布

阅读量330

点赞数 1

分类专栏： python实战100例文章标签： python

本文链接：https://blog.youkuaiyun.com/pythonyanyan/article/details/129059564

版权

python实战100例专栏收录该内容

48 篇文章

订阅专栏

1. 需求分析

设计一个在百度地图上统计学生籍贯所在地。实现在百度地图上的显示，学生的 jiguan 显示在地图等功能，具体要求如下：

1.1. 显示百度地图

打开网页显示百度

1.2. 显示学生

每个来自不同地区的学生会显示在百度地图上面如图 1-1，每一个在百度地图上的点都代表一个学生，每个点会显示学生的信息如图 1-2。

图 1-1：需求界面

图 1-2：学生信息

2. 系统设计

2.1. 用例图

例如下图 2-1 所示：

					![](https://www.writebug.com/myres/static/uploads/2021/10/30/f350fcc24170a3f24f0ebdbf336fb469.writebug) ![](https://www.writebug.com/myres/static/uploads/2021/10/30/6b1f363f6631ba3155fcca1a8e608d3f.writebug)

图 2-1 用例图

2.2. ER 图

数据库设计 1 张表与 ER 图如图 2-2 所示：

图 2-2 数据库设计表和数据库 ER 图

2.3. UML 类图（Class Diagram）

对于用户功能模块，共设计如下 6 个类。

n 控制层类 SydController 类：前端控制器。

n Commonceng 的 R 类：返回的结果

n mapper 层接口 SydMapper：主要定义数据操作的接口

n config 层的 MybatisPulsConfig 类：配置 MyBatis

n service 层 SydService 接口：业务逻辑层的接口

n 应用开关 DituApplication 类：启动 Spring boot 开发的启动类。

n 各类的结构及类之间的关系如图 2-3 所示：

图 2-3：UML 类图

2.4. UML 时序图（Sequence Diagram）

2.5. UML 活动图（Activity Diagram）

用户会打开网页会看到百度地图，学生数据会在百度地图上形成一个散点图，具体活动图 2-4 所示。

图 2-4 显示流程图

3. 系统实现

3.1. 项目结构

项目结构如下图 3-1 所示：

图 3-1：系统结构

3.2. 配置文件

3.2.1. application.properties 文件

该配置文件主要是配置数据库连接用户名和密码、MyBatis 配置检索路径和文件

# 数据源
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url= jdbc:mysql://localhost:3306/hw1?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=

mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
mybatis-plus.configuration.map-underscore-to-camel-case=true
mybatis-plus.type-aliases-package=com.test.ditu.entity
mybatis-plus.mapper-locations=classpath:mapper/*.xml

3.2.2.SydController.java 文件

前端控制器

4.packagecom.test.ditu.controller;importcom.test.ditu.common.R;importcom.test.ditu.entity.Syd;importcom.test.ditu.service.SydService;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Controller;importorg.springframework.web.bind.annotation.GetMapping;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.ResponseBody;importorg.springframework.web.bind.annotation.RestController;importjava.util.List;/*<p>*前端控制器*</p>**@author关注公众号：MarkerHub*@since2020-12-17*/@Controller@RequestMapping("/syd")publicclassSydController{@AutowiredprivateSydServicesydService;@GetMapping("/all")@ResponseBodypublicRall(){List<Syd>syds=sydService.getBaseMapper().selectList(null);returnR.fail(200,"操作成功",syds);}@GetMapping("/")publicStringto(){return"hw";}}

3.2.3. common 层的 R.java

packagecom.test.ditu.common;importlombok.AllArgsConstructor;importlombok.Data;importlombok.NoArgsConstructor;importlombok.experimental.Accessors;importjava.io.Serializable;/*这里我们用到了一个Result的类，这个用于我们的异步统一返回的结果封装。*一般来说，结果里面有几个要素必要的*<p>*是否成功，可用code表示（如200表示成功，400表示异常）*结果消息*结果数据*/@Data@Accessors(chain=true)@AllArgsConstructor@NoArgsConstructorpublicclassRimplementsSerializable{privateintcode;//200是正常  非200表示异常
privateStringmsg;privateObjectdata;publicstaticRsucc(intcode,Stringmsg,Objectdata){Rr=newR().setCode(code).setData(data).setMsg(msg);returnr;}publicstaticRfail(inti,Stringmessage,Objectdata){Rr=newR().setCode(i).setData(data).setMsg(message);returnr;}}

3.2.4. Mapper 层 Mapper 接口

packagecom.test.ditu.mapper;importcom.test.ditu.entity.Syd;importcom.baomidou.mybatisplus.core.mapper.BaseMapper;/*<p>*Mapper接口*</p>**@author关注公众号：MarkerHub*@since2020-12-17*/publicinterfaceSydMapperextendsBaseMapper<Syd>{}

3.2.5.接口映射文件 SydMapper.xml

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mappernamespace="com.test.ditu.mapper.SydMapper"></mapper>

3.2.6.Service 层接口 SydService

5.packagecom.test.ditu.service;importcom.test.ditu.entity.Syd;importcom.baomidou.mybatisplus.extension.service.IService;/*<p>*服务类*</p>**@author关注公众号：MarkerHub*@since2020-12-17*/publicinterfaceSydServiceextendsIService<Syd>{}

3.2.7entity 层 Syd.java

packagecom.test.ditu.entity;importcom.baomidou.mybatisplus.annotation.TableName;importjava.io.Serializable;importlombok.Data;importlombok.EqualsAndHashCode;importlombok.experimental.Accessors;/*<p>**</p>**@author关注公众号：MarkerHub*@since2020-12-17*/@Data@EqualsAndHashCode(callSuper=false)@Accessors(chain=true)@TableName("t_syd")publicclassSydimplementsSerializable{privatestaticfinallongserialVersionUID=1L;privateStringname;privateDoublexvalue;privateDoubleyvalue;privateStringtext;}

3.3 前端配置

hw.Html 的百度 API 调用和 echarts 的组件里的两个脚本文件

<scripttype="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=78hQX88IBEYa78XqOHE52w9ouaYFobrM"></script><scriptsrc="/js/echarts.min.js"></script><scriptsrc="/js/bmap.min.js"></script>
百度自定义
mapStyle: { // 百度地图自定义样式
   styleJson: [{
      "featureType": "land",// 陆地
      "elementType": "all",
      "stylers": {
         "color": "#073763"
      }
   },{
      "featureType": "water",// 水系
      "elementType": "all",
      "stylers": {
         "color": "#073763",
         "lightness": -54
      }
   },{
      "featureType": "highway",// 国道与高速
      "elementType": "all",
      "stylers": {
         "color": "#45818e"
      }
   },{
      "featureType": "boundary",// 边界线
      "elementType": "all",
      "stylers": {
         "color": "#ffffff",
         "lightness": -62,
         "visibility": "on"
      }
   },{
      "featureType": "label",// 行政标注
      "elementType": "labels.text.fill",
      "stylers": {
         "color": "#ffffff",
         "visibility": "on"
      }
   },{
      "featureType": "label",
      "elementType": "labels.text.stroke",
      "stylers": {
         "color": "#444444",
         "visibility": "on"
      }
   }
   ]
}