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

Posted on by hackdl

目录

前言

一、数据库设计

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  3.5 && 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集成，同时讲解在样式显示过程中，根据不同的震级显示不同的文本颜色的过程。

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用

服务器托管

咨询：董先生

电话13051898268 QQ/微信93663045！

上一篇:
下一篇: