您的位置：上海毫米网络优化公司 > 网站优化分享 >
相关推荐recommended
- 宝塔 Nginx 设置允许跨域访问 域名IP都可以跨域
- Kubernetes（K8s）与虚拟GPU（vGPU）：实现高效管理和
- 使用SM4国密加密算法对Spring Boot项目数据库连接信息以及y
- Go函数全景：从基础到高阶的深度探索
- 我们该如何看待AIGC（人工智能）
- YOLOv7保姆级教程！（个人踩坑无数）----环境配置
- 网络编程探索系列之——广播原理剖析
- 关于AI与资本市场的一些思考
- 掌握Go语言：Go语言类型转换，解锁高级用法，轻松驾驭复杂数据结构（3
- 已解决com.rabbitmq.client.ShutdownSign
- 用Python手把手教你实现一个爬虫（含前端界面）
- springCloudGateway+Nacos注册与转发Netty+
- 已解决net.dean.jraw.http.NetworkExcept
- Django中的实时通信：WebSockets与异步视图的结合
- nginx: 集群环境配置搭建
- Springboot3.X集成WebSocket完整流程
- 微服务中台架构的设计与实现
- 【STM32项目】基于STM32多传感器融合的新型智能导盲杖设计（完整
- IDEA 2024 配置 Maven 创建 Spring Boot 项
- 前后端分离Springboot 整合使用activiti7教程（一）（
- 快速入门Spring Data JPA
- 华为ensp中链路聚合两种(lacp-static)模式配置方法
- Python爬虫入门
- setTimeout、setInterval、requestAnima
- 在MySQL中存储图片
- 监听Redis中Key值的变化（SpringBoot整合）
- fabricjs控制背景图和画布图片展示
- 【解决】Spring Boot创建项目常见问题
- 部署springboot项目到阿里云服务器(小白包会)
- SpringBoot使用WebSocket
在SpringBoot中基于CanvasLabel的地震基础信息展示实践
作者：mmseoamin日期：2024-02-04
目录
前言
一、数据库设计
1、数据库设计
2、sql脚本
3、数据记录
二、SpringBoot后台设计与实现
1、Mapper访问层及实体定义
2、Service层实现
3、控制层实现
三、地震信息展示
1、展示数据接入
2、最终效果
总结
前言
在上一篇博客中，对于在Leaflet中进行矢量数据进行中文自动标注的实现进行了深入的介绍，基于CanvasLabel的Leaflet矢量数据免切片属性标注实践。在文章中深入的讲解了Leaflet.CanvasLable这款插件。介绍了免切片的矢量标注展示的集成过程。在示例当中数据采用的是模拟数据，今天我们结合具体的地震数据来进行统一展示。
本文将讲解在SpringBoot中如何进行Leaflet.CanvasLabel组件集成，从数据库设计到后台MVC集成，同时讲解在样式显示过程中，根据不同的震级显示不同的文本颜色的过程，根据展示过程当中数据量的大小，采用数据聚类的方式进行展示，如果您刚好有这方面的需要，可以从本文中获取一点思路。
一、数据库设计
这里采集的地震数据，支持从不同的在线平台进行地震信息的搜集和采集。因此需要将建立地震数据库，这里采用PostGIS的数据库进行数据存储。
1、数据库设计
2、sql脚本
/* Navicat Premium Data Transfer Source Server : localhost_dev_pg Source Server Type : PostgreSQL Source Server Version : 120003 Source Host : localhost:5432 Source Catalog : earthqadmin_dev Source Schema : public Target Server Type : PostgreSQL Target Server Version : 120003 File Encoding : 65001 Date: 22/01/2024 21:30:30 */ -- ---------------------------- -- Table structure for biz_earthquake_info -- ---------------------------- DROP TABLE IF EXISTS "public"."biz_earthquake_info"; CREATE TABLE "public"."biz_earthquake_info" ( "id" int8 NOT NULL, "eq_time" timestamp(6) NOT NULL, "eq_lng" varchar(32) COLLATE "pg_catalog"."default" NOT NULL, "eq_lat" varchar(32) COLLATE "pg_catalog"."default" NOT NULL, "eq_depth" varchar(16) COLLATE "pg_catalog"."default" NOT NULL, "eq_level" varchar(8) COLLATE "pg_catalog"."default", "eq_location" varchar(255) COLLATE "pg_catalog"."default", "create_by" varchar(64) COLLATE "pg_catalog"."default", "create_time" timestamp(6), "update_by" varchar(64) COLLATE "pg_catalog"."default", "update_time" timestamp(6) ); COMMENT ON COLUMN "public"."biz_earthquake_info"."id" IS '主键'; COMMENT ON COLUMN "public"."biz_earthquake_info"."eq_time" IS '发震时间'; COMMENT ON COLUMN "public"."biz_earthquake_info"."eq_lng" IS '发震经度'; COMMENT ON COLUMN "public"."biz_earthquake_info"."eq_lat" IS '发震纬度'; COMMENT ON COLUMN "public"."biz_earthquake_info"."eq_depth" IS '震源深度,单位千米'; COMMENT ON COLUMN "public"."biz_earthquake_info"."eq_level" IS '震级'; COMMENT ON COLUMN "public"."biz_earthquake_info"."eq_location" IS '震中位置'; COMMENT ON COLUMN "public"."biz_earthquake_info"."create_by" IS '创建人'; COMMENT ON COLUMN "public"."biz_earthquake_info"."create_time" IS '创建时间'; COMMENT ON COLUMN "public"."biz_earthquake_info"."update_by" IS '修改人'; COMMENT ON COLUMN "public"."biz_earthquake_info"."update_time" IS '修改时间';
3、数据记录
INSERT INTO "biz_earthquake_info"("id", "eq_time", "eq_lng", "eq_lat", "eq_depth", "eq_level", "eq_location", "create_by", "create_time", "update_by", "update_time") VALUES (1, '2023-12-06 20:06:56', '111.99', '40.34', '16', '3.3', '内蒙古呼和浩特市和林格尔县', NULL, '2023-12-06 20:06:56', NULL, '2023-12-06 20:06:56');
INSERT INTO "biz_earthquake_info"("id", "eq_time", "eq_lng", "eq_lat", "eq_depth", "eq_level", "eq_location", "create_by", "create_time", "update_by", "update_time") VALUES (2, '2023-12-06 00:16:38', '83.81', '44.24', '10', '3', '新疆塔城地区乌苏市', NULL, '2023-12-06 00:16:38', NULL, '2023-12-06 00:16:38');
INSERT INTO "biz_earthquake_info"("id", "eq_time", "eq_lng", "eq_lat", "eq_depth", "eq_level", "eq_location", "create_by", "create_time", "update_by", "update_time") VALUES (89, '2023-11-04 02:02:54', '82.10', '28.80', '10', '5.9', '尼泊尔', NULL, '2023-11-04 02:02:54', NULL, '2023-11-04 02:02:54');
INSERT INTO "biz_earthquake_info"("id", "eq_time", "eq_lng", "eq_lat", "eq_depth", "eq_level", "eq_location", "create_by", "create_time", "update_by", "update_time") VALUES (215, '2023-10-02 20:45:20', '90.65', '25.75', '30', '5', '印度', NULL, '2023-10-02 20:45:20', NULL, '2023-10-02 20:45:20');
INSERT INTO "biz_earthquake_info"("id", "eq_time", "eq_lng", "eq_lat", "eq_depth", "eq_level", "eq_location", "create_by", "create_time", "update_by", "update_time") VALUES (1736, '2022-04-23 05:07:48', '18.20', '43.05', '10', '5.7', '波黑', NULL, '2022-04-23 05:07:48', NULL, '2022-04-23 05:07:48');
INSERT INTO "biz_earthquake_info"("id", "eq_time", "eq_lng", "eq_lat", "eq_depth", "eq_level", "eq_location", "create_by", "create_time", "update_by", "update_time") VALUES (1883, '2022-03-16 21:35:27', '75.16', '35.61', '10', '5.5', '克什米尔', NULL, '2022-03-16 21:35:27', NULL, '2022-03-16 21:35:27');
INSERT INTO "biz_earthquake_info"("id", "eq_time", "eq_lng", "eq_lat", "eq_depth", "eq_level", "eq_location", "create_by", "create_time", "update_by", "update_time") VALUES (2139, '2022-01-01 21:15:26', '71.25', '36.65', '240', '5.3', '阿富汗', NULL, '2022-01-01 21:15:26', NULL, '2022-01-01 21:15:26');
INSERT INTO "biz_earthquake_info"("id", "eq_time", "eq_lng", "eq_lat", "eq_depth", "eq_level", "eq_location", "create_by", "create_time", "update_by", "update_time") VALUES (5253, '2019-04-07 05:55:00', '125.07', '-6.90', '540', '6.1', '班达海', NULL, '2019-04-07 05:55:00', NULL, '2019-04-07 05:55:00');
INSERT INTO "biz_earthquake_info"("id", "eq_time", "eq_lng", "eq_lat", "eq_depth", "eq_level", "eq_location", "create_by", "create_time", "update_by", "update_time") VALUES (5900, '2018-08-31 15:12:24', '21.61', '39.38', '20', '5', '希腊', NULL, '2018-08-31 15:12:24', NULL, '2018-08-31 15:12:24');
INSERT INTO "biz_earthquake_info"("id", "eq_time", "eq_lng", "eq_lat", "eq_depth", "eq_level", "eq_location", "create_by", "create_time", "update_by", "update_time") VALUES (6956, '2017-06-12 20:28:39', '26.24', '38.96', '10', '6.4', '爱琴海', NULL, '2017-06-12 20:28:39', NULL, '2017-06-12 20:28:39');
INSERT INTO "biz_earthquake_info"("id", "eq_time", "eq_lng", "eq_lat", "eq_depth", "eq_level", "eq_location", "create_by", "create_time", "update_by", "update_time") VALUES (8849, '2015-05-12 19:21:32', '86.10', '27.81', '11', '3.5', '尼泊尔', NULL, '2015-05-12 19:21:32', NULL, '2015-05-12 19:21:32');
INSERT INTO "biz_earthquake_info"("id", "eq_time", "eq_lng", "eq_lat", "eq_depth", "eq_level", "eq_location", "create_by", "create_time", "update_by", "update_time") VALUES (3, '2023-12-05 21:36:38', '126.85', '9.20', '30', '5.8', '菲律宾棉兰老岛附近海域', NULL, '2023-12-05 21:36:38', NULL, '2023-12-05 21:36:38');
INSERT INTO "biz_earthquake_info"("id", "eq_time", "eq_lng", "eq_lat", "eq_depth", "eq_level", "eq_location", "create_by", "create_time", "update_by", "update_time") VALUES (4, '2023-12-05 17:10:07', '126.85', '9.00', '50', '5.6', '菲律宾棉兰老岛附近海域', NULL, '2023-12-05 17:10:07', NULL, '2023-12-05 17:10:07');
INSERT INTO "biz_earthquake_info"("id", "eq_time", "eq_lng", "eq_lat", "eq_depth", "eq_level", "eq_location", "create_by", "create_time", "update_by", "update_time") VALUES (5, '2023-12-05 16:23:54', '120.65', '13.90', '75', '5.7', '菲律宾', NULL, '2023-12-05 16:23:54', NULL, '2023-12-05 16:23:54');
INSERT INTO "biz_earthquake_info"("id", "eq_time", "eq_lng", "eq_lat", "eq_depth", "eq_level", "eq_location", "create_by", "create_time", "update_by", "update_time") VALUES (6, '2023-12-05 15:31:32', '47.50', '12.20', '10', '5.5', '亚丁湾', NULL, '2023-12-05 15:31:32', NULL, '2023-12-05 15:31:32');
INSERT INTO "biz_earthquake_info"("id", "eq_time", "eq_lng", "eq_lat", "eq_depth", "eq_level", "eq_location", "create_by", "create_time", "update_by", "update_time") VALUES (7, '2023-12-05 08:48:23', '75.36', '38.33', '136', '3.6', '新疆克孜勒苏州阿克陶县', NULL, '2023-12-05 08:48:23', NULL, '2023-12-05 08:48:23');
二、SpringBoot后台设计与实现
后台编程开发语言采用Java，其它的开发语言也是可以的。开发框架使用SpringBoot，数据库访问层采用Mybatis-Plus。下面将逐层进行功能介绍。
1、Mapper访问层及实体定义
数据库访问层采用Mybatis-Plus框架实现，这里将定义Mapper和实体类。
package com.yelang.project.extend.earthquake.domain;
import java.util.Date;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.yelang.framework.aspectj.lang.annotation.Excel;
import com.yelang.framework.web.domain.BaseEntity;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import lombok.ToString;
@TableName(value ="biz_earthquake_info",autoResultMap = true)
@NoArgsConstructor
@AllArgsConstructor
@Setter
@Getter
@ToString
public class EarthquakeInfo extends BaseEntity{
private static final long serialVersionUID = 8595357343827108241L;
/** */
@TableId
@Excel(name = "序号")
private Long id;//主键
@Excel(name = "发震时刻",dateFormat="yyyy-MM-dd HH:mm:ss")
@TableField(value="eq_time")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Date eqTime;//发震时间
@Excel(name = "经度")
@TableField(value="eq_lng")
private String eqLng;
@Excel(name = "纬度")
@TableField(value="eq_lat")
private String eqLat;
@Excel(name = "震源深度(千米)")
@TableField(value="eq_depth")
private String eqDepth;
@Excel(name = "震级(M)")
@TableField(value="eq_level")
private String eqLevel;
@Excel(name = "eqLocation")
@TableField(value="eq_location")
private String eqLocation;
}
2、Service层实现
查询地震列表信息的关键方法如下所示：
@Autowired private EarthQuakeInfoMapper earthQuakeInfoMapper; @Override public ListselectList(EarthquakeInfo entity) { QueryWrapper queryWrapper = new QueryWrapper (); if (StringUtils.isNotBlank(entity.getEqLocation())) { queryWrapper.like("eq_location", entity.getEqLocation()); } if (StringUtils.isNotBlank(entity.getEqLevel())) { queryWrapper.eq("eq_level", entity.getEqLevel()); } queryWrapper.orderByDesc("eq_time"); return earthQuakeInfoMapper.selectList(queryWrapper); }
3、控制层实现
控制层关键代码如下所示：
/**
* 首页地震信息查询
* @param earthquakeInfo 地震信息
* @return
*/
@PostMapping("/home/earthinfo")
@ResponseBody
public AjaxResult earthinfo(EarthquakeInfo earthquakeInfo){
List list = earthquakeInfoService.selectList(earthquakeInfo);
AjaxResult ar = AjaxResult.success();
ar.put("data", list);
return ar;
}
三、地震信息展示
针对地震信息数量较大的展示问题，采用leaflet.markercluster-src.js进行聚类展示，同时进行矢量数据免切片部署。
1、展示数据接入
function initEarthInfo(){
$.ajax({
type: "post",
url: prefix + "/home/earthinfo",
data: {},
success: function(rsData) {
console.log(rsData);
var markers = L.markerClusterGroup();
var earthData = rsData.data;
for (var i = 0; i < earthData.length; i++) {
var info = earthData[i];
var eqLevel = info.eqLevel;
var strokeStyleSet = "green";
if(parseFloat(eqLevel) > 3.5 && parseFloat(eqLevel) <= 5.0){
strokeStyleSet = "yellow";
}
if(parseFloat(eqLevel) > 5.0){
strokeStyleSet = "red";
}
var marker = L.circleMarker(new L.LatLng(info.eqLat, info.eqLng), {radius: 8,
labelStyle: {
text: info.eqLocation,
rotation: 0,
zIndex: i,
strokeStyle :strokeStyleSet
}});
var content = "发震时间:"+info.eqTime + "
震中位置:"+info.eqLocation;
content += "
震源深度（千米）:"+info.eqDepth + "
震级:"+info.eqLevel;
marker.bindPopup(content);
markers.addLayer(marker);
}
mymap.addLayer(markers);
}
});
}
在上述的代码中，在展示数据的同时，根据震级的不同设备不同的颜色。小于等于3.5级的使用绿色进行展示，3.5到5.0采用黄色展示，大于5.0的采用红色展示。
2、最终效果
总结
以上就是本文的主要内容，本文将讲解在SpringBoot中如何进行Leaflet.CanvasLabel组件集成，从数据库设计到后台MVC集成，同时讲解在样式显示过程中，根据不同的震级显示不同的文本颜色的过程。
- 关注我们
- 扫描二维码
- 获取更多信息
- 精彩一手掌握
Copyright © 2014-2019 seo,上海网站优化_网络制作_网站seo排名_网站建设推广_上海网络公司 版权所有
沪ICP备19022315号
沪ICP备19022315号 
