在SpringBoot中基于CanvasLabel的地震基础信息展示实践-天翼云

前言

在上一篇博客中，对于在Leaflet中进行矢量数据进行中文自动标注的实现进行了深入的介绍，基于CanvasLabel的Leaflet矢量数据免切片属性标注实践。在文章中深入的讲解了Leaflet.CanvasLable这款插件。介绍了免切片的矢量标注展示的集成过程。在示例当中数据采用的是模拟数据，今天我们结合具体的地震数据来进行统一展示。

本文将讲解在SpringBoot中如何进行Leaflet.CanvasLabel组件集成，从数据库设计到后台MVC集成，同时讲解在样式显示过程中，根据不同的震级显示不同的文本颜色的过程，根据展示过程当中数据量的大小，采用数据聚类的方式进行展示，如果您刚好有这方面的需要，可以从本文中获取一点思路。

一、数据库设计

这里采集的地震数据，支持从不同的在线平台进行地震信息的搜集和采集。因此需要将建立地震数据库，这里采用PostGIS的数据库进行数据存储。

1、数据库设计

在SpringBoot中基于CanvasLabel的地震基础信息展示实践

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层实现

在SpringBoot中基于CanvasLabel的地震基础信息展示实践

查询地震列表信息的关键方法如下所示：

@Autowired
	private EarthQuakeInfoMapper earthQuakeInfoMapper;

	@Override
	public List<EarthquakeInfo> selectList(EarthquakeInfo entity) {
		QueryWrapper<EarthquakeInfo> queryWrapper = new QueryWrapper<EarthquakeInfo>();
		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<EarthquakeInfo> 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 = "<strong>发震时间:</strong>"+info.eqTime + "<br/><strong>震中位置:</strong>"+info.eqLocation;
	    				    content += "<br/><strong>震源深度（千米）:</strong>"+info.eqDepth + "<br/><strong>震级:</strong>"+info.eqLevel;
	    				marker.bindPopup(content);
	    				
	    				markers.addLayer(marker);
	    			}
	    			mymap.addLayer(markers);
	            }
	        });
	    }

小于等于3.5级的使用绿色进行展示，3.5到5.0采用黄色展示，大于5.0的采用红色展示。

2、最终效果

在SpringBoot中基于CanvasLabel的地震基础信息展示实践

总结

以上就是本文的主要内容，本文将讲解在SpringBoot中如何进行Leaflet.CanvasLabel组件集成，从数据库设计到后台MVC集成，同时讲解在样式显示过程中，根据不同的震级显示不同的文本颜色的过程。

活动

应用商城

合作伙伴

开发者

支持与服务

了解天翼云

在SpringBoot中基于CanvasLabel的地震基础信息展示实践

在SpringBoot中基于CanvasLabel的地震基础信息展示实践

前言

一、数据库设计

1、数据库设计

2、sql脚本

3、数据记录

二、SpringBoot后台设计与实现

1、Mapper访问层及实体定义

2、Service层实现

3、控制层实现

三、地震信息展示

1、展示数据接入

2、最终效果

总结

相关文章

详细数据库中多表查询 | 结果与条件不符的情况

详细分析Oracle数据类型与Java类型对应原则

MySQL数据库索引

详细分析数据库的三级模式

详细分析Oracle中的ALL_TAB_COLUMNS视图语句

Django 数据库迁移：makemigrations 和 migrate 命令详解及常见问题解决

Avue-data数据大屏显示柱状图（附Demo讲解）

一文读懂Mysql的Delete和Drop的概念和差异

详细分析Mysql触发器的基本使用（图文解析）

基于SpringBoot+Vue的宠物领养饲养交流管理平台设计与实现

作者介绍

最新文章

基于SpringBoot的全国风景区WebGIS按省展示实践

位运算在数据库中的运用实践-以MySQL和PG为例

PostGIS空间数据库之空间数据融合实践

基于SpringBoot和Leaflet的全国省会城市风景区分布分析实践

设计与实现个人博客系统的技术架构与最佳实践

Java服务端数据库读写分离：策略与实践

热门文章

MySQL：Windows环境下的编码问题和解决

使用iOS原生sqlite3框架对sqlite数据库进行操作

mysql: [MY-010055] [Server] IP address ‘10.237.0.196‘ could not be resolved

【mysql日常】Mysql客户端安装失败-GPG验证不通过

Oracle 12c数据库优化器统计信息收集的最佳实践

4，公有云实战——数据库上云迁移的实现

热门标签

相关产品

弹性云主机

天翼云电脑（公众版）

对象存储

云硬盘

随机文章

基于SpringBoot和Leaflet的全国省会城市风景区分布分析实践

客户端连接不到服务器上MySQL数据库 解决方法

Redis启动服务器端和客户端的命令（redis-server、redis-cli、--help、kill、ping、切换数据库）

命令行客户端MySQL基本命令的使用（登录、登出、数据库操作的SQL语句、表结构的SQL语句、表数据操作的SQL语句）

Node.js 中的ORM 框架：Sequelize

C#系列-EF扩展框架Serilog.EntityFrameworkCore应用实例（39）

客户端连接不到服务器上MySQL数据库解决方法