使用Leaflet-canvas-label进行个性化标注实践详解

2024-06-10 15:12
文章标签 进行 使用 实践 详解 个性化 canvas label leaflet 标注

本文主要是介绍使用Leaflet-canvas-label进行个性化标注实践详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

前言

一、leaflet-canvas-label属性

1、地图展示属性

2、Canvas文本标注属性

3、事件列表

二、属性设置实战

1、标注放大比例

2、字体颜色和方向偏移

3、标注文字透明色设置

4、标注显示层级

三、事件绑定

1、颜色改变

2、事件绑定解析

3、标记初始化的一个小问题

 四、总结

前言

        今天是端午节，首先祝大家端午安康，节日快乐，记得要吃粽子。

        众所周知，在地理信息工作过程中，标注就是在地图中的地图要素上或者地图要素旁边加上描述性文字的过程。在WebGIS中，标注主要是特指自动生成并放置地图要素的描述性文字的过程。一个标注是地图上的一段文本，它由一个或多个要素属性产生。

        标注这一操作有助于为地图上的许多要素添加描述性的文本。标注是向地图上添加文本的一种较为快捷的方式，它避免了手动地为每个要素逐个添加文本。另外，WebGIS能够自动地进行标注，自动地生成并放置文本。如果用户的数据可能发生变化，或者用户要在不同的空间尺度上制作地图的时候，这种标注的方法就会非常地实用。

        在之前的博客中，我们对leaflet-canvas-label进行了简单的介绍，也讲解了如何使用leaflet-canvas-label来进行数据免切片数据标注。但是对于这款组件常见的属性如何使用，没有进行详细的说明，有一些属性还是要进一步的使用才能熟练掌握。本文将重点介绍leaflet-canvas-label这款组件的基本属性的使用，通过实例来详细展示不同的效果，同时基于leaflet-canvas-label介绍它的事件机制，掌握通过事件来重新设置属性。

        本文详细介绍leaflet-canvas-label的属性以及事件，首先介绍它的参数列表，然后根据不同的属性进行实例的讲解，最后给出一个完整的演示示例。如果您当前也有这种标注需求，不妨来这里看看。

一、leaflet-canvas-label属性

        为了详细介绍leaflet-canvas-label的属性，知道这款组件有什么属性可以独立设置。我们首先详细的介绍其属性。虽然在前面的博客中，曾经介绍过相关属性，但是没有进行详细的案例讲解。因此在这里再一次回顾一下这些属性，如果是第一次看博客的朋友刚好可以掌握，如果是第二次以上的朋友，则可以熟悉一下相关参数。

        leaflet-canvas-label这款组件的参数主要分为两个部分，第一部分是地图展示的属性，第二部分是Canvas的标注属性。下面将详细介绍这两个部分的每个属性。

1、地图展示属性

        首先介绍一下地图展示部分的属性：

序号参数说明默认值
1offsetX横坐标偏移(像素)0
2offsetY纵坐标偏移(像素)0
3scale放大比例1
4rotation旋转角度（弧度），可能会导致碰撞检测不准确0
5text标注文本内容null
6minZoom最小显示级别null
7maxZoom最大显示级别null
8collisionFlg碰撞检测true
9center标注位置，默认为null,会自动计算几何中心null
10zIndex排序0
11defaultHeight文本高度,无法自动计算,所以直接传参手动调整20

        上面的参数是用于在地图中展示标注的属性设置时跟地图相关的。下面来介绍文本的设置。

2、Canvas文本标注属性

        然后介绍一下地图文本部分的属性，这些属性其实与地图无关，仅用于使用Canvas来进行实际的文本标注，因此更多的是Canvas的属性，这里列几个常见的属性（如果增加属性，需要在源码中进行修改），更多的属性可以参考Canvas的相关教学网站：

序号参数说明默认值
1font设置或返回文本内容的当前字体属性。"10px sans-serif",
2fillStyle设置或返回用于填充绘画的颜色、渐变或模式。"rgba(0,0,0,1)"
3lineCap设置或返回线条的结束端点样式。round
4strokeStyle设置或返回用于笔触的颜色、渐变或模式。"rgba(0,0,0,1)"
5textAlign设置或返回文本内容的当前对齐方式。textAlign的值必须是start，end，left，center，right中的一个！center
6textBaseline设置或返回在绘制文本时使用的当前文本基线。textBaseline的值必须是middle，top，hanging，bottom，alphabetic中的一个！middle
7lineWidth设置或返回当前的线条宽度1

3、事件列表

        在组件中允许进行事件绑定，绑定事件后可以实现一些自定义的业务逻辑，比如在点击后修改相应的属性。这里来看下组件允许绑定什么事件。

序号事件说明
1click点击事件
2mousemove鼠标悬浮事件
3mousedown鼠标按下事件
4mouseup鼠标抬起事件

二、属性设置实战

        在了解了上述的属性和事件配置信息之后，本节将重点讲述实战，将重点演示每个属性的设置，通过截图对比区别。

1、标注放大比例

        标注文本比例主要是通过scale这个属性来实现，默认是1，也就是1：1保持一致。这里我们可以不同的场景，比如需要重点警示的需要加大标记或者根据不同的类型设置不同的标注字体大小。文中的示例中是随机创建1000个随机点，前300个随机点是默认大小，300到600个是1.1，最后的是1.3。

        首先需要指定一个经纬度范围，在指定范围内生成1000个随机点。关键代码如下：

var count = 1000;
for (let i = 0; i < count; i++) {let latlng = L.latLng(23.95 + Math.random() * 10, 112.40034 + Math.random() * 15);var content = "<strong>名称:</strong>城市"+i + "<br/><strong>级别:</strong>"+ i;content += "<br/><strong>所属行政区划:</strong>"+ i + "/" ;content += "<br/><strong>评定时间:</strong>"+ i ;var title = "重要城市" + Math.random();var scaleSize = 1;if(i > 300 && i <= 600){scaleSize = 1.1;title = "1.1倍" + title;}if(i > 600){scaleSize = 1.3;title = "1.3倍" + title;}let c = L.circleMarker(latlng, {radius: 5,labelStyle: {text: title,rotation: 0,scale: scaleSize,zIndex: 1,font: "14px Microsoft YaHei",fillStyle:"white",textBaseline: "top" ,minZoom: 5}}).addTo(showGroup);c.bindPopup(content);
}
map.addLayer(showGroup);

        我们来看一下文本缩放的实际效果：

        需要注意的是，这里的放大比例是在原始设置的font之上的，比如

font: "14px Microsoft YaHei",

         字体的放大也是在14px的基础上进行放大或者缩小的。

2、字体颜色和方向偏移

        在canvasLabel中不仅可以设置字体的大小，还可以设置字体的颜色，还可以设置标注的偏移方向，比如顺时针旋转，逆时针旋转。演示依然是上述例子的数据，按照1/3进行分割，进行颜色和方向的设置。

var color = "white";
var diyRota = 0;
var scaleSize = 1;
if(i > 300 && i <= 600){color = "yellow";diyRota =  -0.30;scaleSize = 1.1;title = "1.1倍" + title;
}
if(i > 600){color = "red";diyRota =  -0.45;scaleSize = 1.3;title = "1.3倍" + title;
}let c = L.circleMarker(latlng, {radius: 5,labelStyle: {text: title,rotation: diyRota,scale: scaleSize,zIndex: 1,font: "14px Microsoft YaHei",fillStyle: color,textBaseline: "top" ,minZoom: 5}
}).addTo(showGroup);

        再来看一下上面代码运行的效果：

3、标注文字透明色设置

        组件支持文字的背景颜色为透明色设置，strokeStyle: "#ffffff00", //透明色通过设个属性来设置即可。

//矢量文本标签渲染器
var canvasLabel = new L.CanvasLabel({defaultLabelStyle: {collisionFlg: true,//碰撞检测，默认truescale: 1,strokeStyle: "#ffffff00", //透明色fillStyle: "#fff",lineWidth:3}
});

4、标注显示层级

        有时候，我们需要控制标注在某一些级别才能展示，比如根据实际的范围，在至少5级以上的地图才展示出来。在低于5级下，标注不会在界面上展示。

let c = L.circleMarker(latlng, {radius: 5,labelStyle: {text: title,rotation: diyRota,scale: scaleSize,zIndex: 1,font: "14px Microsoft YaHei",fillStyle: color,textBaseline: "top" ,minZoom: 5}
}).addTo(showGroup);

三、事件绑定

         事件绑定机制允许我们对页面显示的空间进行交互和控制，然后通过属性API来操作属性信息，让标注按照我们的预想进行展示。这里举一个例子，抛砖引玉，大家可以琢磨出更有意思的场景出来。本例子以标注被点击为例，我们来设置标注的颜色。

1、颜色改变

        要想实现上述需求，首先要绑定点击事件，然后获取点击的标注信息，再通过API修改相应的属性。下面结合代码来讲解：

//定义事件
canvasLabel.addOnClickListener(function (e, data) {//console.log("click", data);console.log(data[0].layer.options.labelStyle.fillStyle);data[0].layer.options.labelStyle.fillStyle = "#fe57a1";canvasLabel._draw();
});

        来看一下实际的效果：

2、事件绑定解析

        为了熟悉事件操作机制，我们来看一下源码中事件的绑定和处理逻辑的，下面是事件注册器，源代码如下，在31行：

getEvents: function () {var events = {viewreset: this._reset,zoom: this._onZoom,moveend: this._update,zoomend: this._onZoomEnd,click: this._executeListeners,mousemove: this._executeListeners,mousedown: this._executeListeners,mouseup: this._executeListeners,};if (this._zoomAnimated) {events.zoomanim = this._onAnimZoom;}return events;},

        我们主要来看click及下面的几个事件，

 /*** 执行侦听器*/_executeListeners: function (event) {if (!this._textBounds) return;var me = this;var ret = this.getTextByEvent(event);if (ret && ret.length > 0) {me._map._container.style.cursor = "pointer";if (event.type === "click") {me._onClickListeners.forEach(function (listener) {listener(event, ret);});}if (event.type === "mousemove") {me._onHoverListeners.forEach(function (listener) {listener(event, ret);});}if (event.type === "mousedown") {me._onMouseDownListeners.forEach(function (listener) {listener(event, ret);});}if (event.type === "mouseup") {me._onMouseUpListeners.forEach(function (listener) {listener(event, ret);});}} else {me._map._container.style.cursor = "";}},

        最后需要将时间的监听器注册到上下文中，

/*** 添加click侦听器*/addOnClickListener: function (listener) {this._onClickListeners.push(listener);},/*** 添加hover侦听器*/addOnHoverListener: function (listener) {this._onHoverListeners.push(listener);},/*** 添加mousedown侦听器*/addOnMouseDownListener: function (listener) {this._onMouseDownListeners.push(listener);},/*** 添加mouseup侦听器*/addOnMouseUpListener: function (listener) {this._onMouseUpListeners.push(listener);},

3、标记初始化的一个小问题

        大家在进行页面开发的时候，第一次加载页面时一定会发现，由于我们加上了碰撞检测，因此界面的文字效果比较难看，有的标注被截断了尤其在边界的位置处，如下图所示：

         那么这种问题应该怎么解决呢？首先我们发现在碰撞检测中有以下代码：

 // 碰撞检测
var textWidth =ctx.measureText(labelStyle.text).width * labelStyle.scale;
var textHeight = labelStyle.defaultHeight * labelStyle.scale;let textBounds = { minX, minY, maxX, maxY, layer };
if (!(labelStyle.collisionFlg == true &&this._textBounds.collides(textBounds))
) {//绘制标注ctx.strokeText(labelStyle.text, 0, 0);ctx.fillText(labelStyle.text, 0, 0);this._textBounds.insert(textBounds);
}

        也就是说碰撞检测时依赖了组件的宽度，同时我们发现到了界面上进行地图拖动和放大缩小也触发了组件重绘，可以解决这个问题。因此我们模拟进行地图缩放，

map.setZoom(map.getZoom());//调用层级，防止初始展示时都挨在一起

        再来看以下的效果（请注意边界的位置标注）：

        可以发现在边界处，标注不再被截断，而是正常展示。

 四、总结

        以上就是本文的主要内容，本文详细介绍leaflet-canvas-label的属性以及事件，首先介绍它的参数列表，然后根据不同的属性进行实例的讲解，最后给出一个完整的演示示例。通过本文您可以掌握leaflet-canvas-label的个性化标注如何实现，包括自定义颜色、字体大小、标注方向、事件的绑定，如何解决标注边界被截断的问题。行文仓促，定有不足之处，欢迎各位专家朋友在评论区批评指正，不甚感激。

这篇关于使用Leaflet-canvas-label进行个性化标注实践详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1048514。

相关文章

Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
大模型研发全揭秘：客服工单数据标注的完整攻略

大模型研发全揭秘：客服工单数据标注的完整攻略

在人工智能（AI）领域，数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者，掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中，工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注，不仅能够帮助提升客服自动化系统的智能化水平，还能优化客户服务流程，提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行
阅读更多...
基于MySQL Binlog的Elasticsearch数据同步实践

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展，我们的业务数据越来越多，单纯使用 MySQL 已经不能满足我们的数据查询需求，例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后，随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步，我们目前的解决方案是建立数据中间表。把需要检索的业务数据，统一放到一张M
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2