解决Thymeleaf的地震震中距离展示[[]]双引号报错的问题

2024-02-13 11:04

本文主要是介绍解决Thymeleaf的地震震中距离展示[[]]双引号报错的问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

前言

一、问题场景还原

1、需求场景

2、系统设计

3、功能实现

4、线数据标注展示

5、页面出错

 二、解决Thymeleaf报错

1、错误说明

2、参数改造

3、问题修复 

总结 


前言

        今天是2024年2月12日,农历正月初三,还是农历龙年春节。在这里首先给各位朋友们拜年,衷心祝福所有从事IT的技术朋友以及身边所有亲人好友新春快乐,欢度春节,祝福朋友们新年所愿皆所成,工作顺利,万事如意。

        言归正传,之前在博客中介绍了如何基于SpringBoot环境下进行地震影响范围的可视化展示,基于SpringBoot和PostGIS的震中影响范围可视化实践,在这个技术框架中,前端和后端暂时没有分离,采用的是传统的单体化架构,前端渲染引擎采用的是Thymeleaf框架。关于Thymeleaf的知识,这里不想占用过多篇幅,对于Thymeleaf不熟悉的,可以自行某度进行查找相关资料。如果在项目中,您用不到Thymeleaf框架,那么您可以忽略本文。

        本文主要讲解在使用SpringBoot单体化框架开发时,前端渲染引擎采用Thymeleaf时,在展示[[]]等二维数组时,遇到的后台解析错误的问题,以及怎么解决这种问题的办法。如果您也碰到此类问题,不妨看看博主的这篇博文。

一、问题场景还原

        本节主要介绍问题的使用场景,以及如何进行相关功能的设计与开发,采用什么组件进行可视化,最后介绍在开发的过程中遇到的实际问题。

1、需求场景

        在之前的博客中,我们已经将震中位置,以及震中5公里范围内的行政点位按照距离进行红色、黄色、绿色三色标记,在地方各应急部门进行应急救灾是可以有一个明显的参考。根据不同级别进行抢险救灾,如下图所示:

        但是上图少年宫却存在一个明显的问题,即没有将震中与行政点位的距离进行直观的标注。应急管理部门需要将震中位置与行政村点位进行直线连接,以及直线距离的标注。那么满足以上的需求需要如何实现呢?

2、系统设计

        为了满足上述需求,我们依然需要使用canvas的文本标注组件,这里与点位不同,还需要进行线即Polyline的矢量动态标注与展示。将震中位置和行政村点位进行直线连接,然后使用Leaflet.canvaslabel.js组件进行标注展示。

3、功能实现

        在明确的相关的调用组件后,我们来进行功能实现。在之前的代码中,我们将所有的地震信息以及5公里范围的行政村点位信息进行了返回。后台接口如下:

/*** 震中位置5公里分析* @param lng 经度* @param lat 纬度* @return*/@PostMapping("/villageinfo")@ResponseBodypublic AjaxResult earthinfo(String lng,String lat){List<EarthquakeVillageVo> list = earthquakeInfoService.findListByLngLat(lng, lat);AjaxResult ar = AjaxResult.success();ar.put("data", list);return ar;}

        接口返回数据参考如下:

{"dist": 4205.20185904,"address": "山西省忻州市繁峙县繁城镇三祝村委会","villageName": "三祝村委会","lng": "113.254811799999999","lat": "39.233503960000000"
}

4、线数据标注展示

        关于如何在Leaflet中展示线数据,网上或者Leaflet的官网有很多成熟的例子,因此这里不再进行赘述。这里重点讲解相关代码的实现,关键代码如下:

        线数据的定义以及添加到LayerGroup中:

L.polyline([[[lat, lng],[info.lat, info.lng]]], {labelStyle: {text: _dist + "千米",zIndex: 0,collisionFlg: false,textAlign:'center',strokeStyle :strokeStyleSet},//color: '#fe57a1',color : strokeStyleSet}).addTo(showLayerGroup);

        在正常情况,将上述代码添加到地图后,即可实现相关数据的可视化展示。我们来看下效果吧。

5、页面出错

         将程序部署运行起来后,再次打开页面,我们发现页面出现了空白,如下所示:

        然后按F12打开控制台,我们发现如下错误:

        同时在程序后台我们也能发现如下错误:

        我们发现后台的控制台也报错了,异常信息如下:

23:05:34.087 [http-nio-8080-exec-24] ERROR o.a.c.c.C.[.[.[.[dispatcherServlet] - [log,175] - Servlet.service() for servlet [dispatcherServlet] in context with path [/earthqadmin] threw exception [Request processing failed; nested exception is org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates/earthquake/mapview/map.html]")] with root cause
org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as expression: "[lat, lng],[info.lat, info.lng" (template: "earthquake/mapview/map" - line 305, col 23)at org.thymeleaf.standard.expression.StandardExpressionParser.parseExpression(StandardExpressionParser.java:131)at org.thymeleaf.standard.expression.StandardExpressionParser.parseExpression(StandardExpressionParser.java:62)at org.thymeleaf.standard.expression.StandardExpressionParser.parseExpression(StandardExpressionParser.java:44)at org.thymeleaf.engine.EngineEventUtils.parseAttributeExpression(EngineEventUtils.java:220)at org.thymeleaf.engine.EngineEventUtils.computeAttributeExpression(EngineEventUtils.java:207)at org.thymeleaf.standard.processor.AbstractStandardExpressionAttributeTagProcessor.doProcess(AbstractStandardExpressionAttributeTagProcessor.java:125)at org.thymeleaf.processor.element.AbstractAttributeTagProcessor.doProcess(AbstractAttributeTagProcessor.java:74)at org.thymeleaf.processor.element.AbstractElementTagProcessor.process(AbstractElementTagProcessor.java:95)at org.thymeleaf.util.ProcessorConfigurationUtils$ElementTagProcessorWrapper.process(ProcessorConfigurationUtils.java:633)at org.thymeleaf.engine.ProcessorTemplateHandler.handleOpenElement(ProcessorTemplateHandler.java:1314)at org.thymeleaf.engine.OpenElementTag.beHandled(OpenElementTag.java:205)

         由于篇幅有限,这里不将所有异常贴出,让各位看到的是,在这里出现了模板引擎渲染时解析问题。在Thymeleaf中,对线等位置信息进行展示时抛出了异常。

 二、解决Thymeleaf报错

        这里将重点介绍如何解决Thymeleaf报错的问题,实现Leaflet中Polyline对象的时空位置加载可视化。将震中位置和行政村位置进行展示。

1、错误说明

        众所周知,在Thymeleaf当中,[[]]中的[]通常表示参数解析的意思,因此其默认会调用后台的模板引擎进行参数的渲染,而这里并不想调用解析过程,只是将Polyline对象正确的构造出来,保留数组的独立性。所以,问题的根源在于Thymeleaf的渲染机制问题,对于[]的解析。

        在遇到问题之后,大致搜集了一些解决办法,有的是有用的,有一些是没有作用。这里将本文实践可用的一种方案进行展示。

2、参数改造

        这里博主采用一种将[[]]拆开展示的方法,由于Thymeleaf会将[]进行解析渲染,故而将其分而治之,不将两个[[]]放在一行,即可规避这种问题。具体代码如下所示:

L.polyline([[[lat, lng],[info.lat, info.lng]]], {labelStyle: {text: _dist + "千米",zIndex: 0,collisionFlg: false,textAlign:'center',strokeStyle :strokeStyleSet},//color: '#fe57a1',color : strokeStyleSet}).addTo(showLayerGroup);

3、问题修复 

        将上述代码进行改造后,再次刷新页面运行以下功能,发现页面正常运行,如下所示:

        最后给一张动图展示效果:

总结 

        以上就是本文的主要内容,本文主要讲解在使用SpringBoot单体化框架开发时,前端渲染引擎采用Thymeleaf时,在展示[[]]等二维数组时,遇到的后台解析错误的问题,以及怎么解决这种问题的办法。如果您在实践中发现有更好的办法,欢迎在评论区告知,行文仓促,难免有不当之处,如有不足,欢迎各位朋友在评论区批评指正。

参考:

1、Thymeleaf中使用二维数组[[]]报错

2、thymeleaf 会对 js 的字符转义,包括 for 循环里的字符,导致报错

3、thymeleaf 使用javascript定义数组报错

这篇关于解决Thymeleaf的地震震中距离展示[[]]双引号报错的问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/705370

相关文章

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

Spring事务中@Transactional注解不生效的原因分析与解决

《Spring事务中@Transactional注解不生效的原因分析与解决》在Spring框架中,@Transactional注解是管理数据库事务的核心方式,本文将深入分析事务自调用的底层原理,解释为... 目录1. 引言2. 事务自调用问题重现2.1 示例代码2.2 问题现象3. 为什么事务自调用会失效3

mysql出现ERROR 2003 (HY000): Can‘t connect to MySQL server on ‘localhost‘ (10061)的解决方法

《mysql出现ERROR2003(HY000):Can‘tconnecttoMySQLserveron‘localhost‘(10061)的解决方法》本文主要介绍了mysql出现... 目录前言:第一步:第二步:第三步:总结:前言:当你想通过命令窗口想打开mysql时候发现提http://www.cpp

SpringBoot启动报错的11个高频问题排查与解决终极指南

《SpringBoot启动报错的11个高频问题排查与解决终极指南》这篇文章主要为大家详细介绍了SpringBoot启动报错的11个高频问题的排查与解决,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一... 目录1. 依赖冲突:NoSuchMethodError 的终极解法2. Bean注入失败:No qu

springboot报错Invalid bound statement (not found)的解决

《springboot报错Invalidboundstatement(notfound)的解决》本文主要介绍了springboot报错Invalidboundstatement(not... 目录一. 问题描述二.解决问题三. 添加配置项 四.其他的解决方案4.1 Mapper 接口与 XML 文件不匹配

MySQL新增字段后Java实体未更新的潜在问题与解决方案

《MySQL新增字段后Java实体未更新的潜在问题与解决方案》在Java+MySQL的开发中,我们通常使用ORM框架来映射数据库表与Java对象,但有时候,数据库表结构变更(如新增字段)后,开发人员可... 目录引言1. 问题背景:数据库与 Java 实体不同步1.1 常见场景1.2 示例代码2. 不同操作

Python中ModuleNotFoundError: No module named ‘timm’的错误解决

《Python中ModuleNotFoundError:Nomodulenamed‘timm’的错误解决》本文主要介绍了Python中ModuleNotFoundError:Nomodulen... 目录一、引言二、错误原因分析三、解决办法1.安装timm模块2. 检查python环境3. 解决安装路径问题

如何解决mysql出现Incorrect string value for column ‘表项‘ at row 1错误问题

《如何解决mysql出现Incorrectstringvalueforcolumn‘表项‘atrow1错误问题》:本文主要介绍如何解决mysql出现Incorrectstringv... 目录mysql出现Incorrect string value for column ‘表项‘ at row 1错误报错

如何解决Spring MVC中响应乱码问题

《如何解决SpringMVC中响应乱码问题》:本文主要介绍如何解决SpringMVC中响应乱码问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring MVC最新响应中乱码解决方式以前的解决办法这是比较通用的一种方法总结Spring MVC最新响应中乱码解

Java报NoClassDefFoundError异常的原因及解决

《Java报NoClassDefFoundError异常的原因及解决》在Java开发过程中,java.lang.NoClassDefFoundError是一个令人头疼的运行时错误,本文将深入探讨这一问... 目录一、问题分析二、报错原因三、解决思路四、常见场景及原因五、深入解决思路六、预http://www