在SpringBoot中基于CanvasLabel的地震基础信息展示实践
目录
前言
一、数据库设计
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 List selectList(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集成，同时讲解在样式显示过程中，根据不同的震级显示不同的文本颜色的过程。