前言 在上一篇博客中,对于在Leaflet中进行矢量数据进行中文自动标注的实现进行了深入的介绍,基于CanvasLabel的Leaflet矢量数据免切片属性标注实践。 本文将讲解在SpringBoot中如何进行Leaflet.CanvasLabel组件集成,从数据库设计到后台MVC集成,同时讲解在样式显示过程中,根据不同的震级显示不同的文本颜色的过程,根据展示过程当中数据量的大小 2、最终效果总结 以上就是本文的主要内容,本文将讲解在SpringBoot中如何进行Leaflet.CanvasLabel组件集成,从数据库设计到后台MVC集成,同时讲解在样式显示过程中,
二、前端可视化展示 前端空间数据展示使用Leaflet组件展示,静态标注使用Leaflet.canvaslabel.js,图例组件采用leaflet.legend.js。 1、主体地图定义 //矢量文本标签渲染器 var canvasLabel = new L.CanvasLabel({ defaultLabelStyle: -180), L.latLng(90, 180)); //构建视图限制范围 第一个参数是左上角经纬度 第二个参数是右下点经纬度var mymap = L.map('mapid',{renderer: canvasLabel
将震中位置和行政村点位进行直线连接,然后使用Leaflet.canvaslabel.js组件进行标注展示。3、功能实现 在明确的相关的调用组件后,我们来进行功能实现。