基于canvas和ol的点标注的避让实现

2024-03-07 23:30
文章标签 实现 canvas 标注 ol 避让

本文主要是介绍基于canvas和ol的点标注的避让实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

概述

在做地图的时候,点的标注展示是一个非常常见的功能,但是十几种点在某些区域比较密集是非常常见的,但是业务表达中却需要将之展示出来。基于此需求,本文结合canvas和ol做一简单的实现。

效果

image.png

image.png

实现:

  1. 密集区点的标注通过牵引线的方式引出展示;
  2. 地图放大的时候更新展示;

思路

image.png

实现代码

const points = [{ "properties": {"name":"测试名称应该"}, "geometry": { "type": "Point", "coordinates": [ 110.15558, 19.91038 ] } },{ "properties": {"name":"测试名称应"}, "geometry": { "type": "Point", "coordinates": [ 113.52309, 22.21177 ] } },{ "properties": {"name":"测试名称应该"}, "geometry": { "type": "Point", "coordinates": [ 114.23454, 22.21177 ] } },{ "properties": {"name":"测该很长"}, "geometry": { "type": "Point", "coordinates": [ 119.35695, 26.06293 ] } },{ "properties": {"name":"测试名称应该称应该"}, "geometry": { "type": "Point", "coordinates": [ 120.11582, 30.07927 ] } },{ "properties": {"name":"测试名称应"}, "geometry": { "type": "Point", "coordinates": [ 121.49129, 31.14058 ] } },{ "properties": {"name":"测试名称应该"}, "geometry": { "type": "Point", "coordinates": [ 117.03289, 23.5228 ] } }
]
let canvasFunction = function (extent, resolution, pixelRatio, size, projection) {const canvasWidth = size[0]const canvasHeight = size[1]const [w, h] = map.getSize()const xoff = canvasWidth - w,yoff = canvasHeight - hconst canvas = document.createElement('canvas');canvas.width = canvasWidthcanvas.height = canvasHeightconst context = canvas.getContext('2d');// 数据聚类处理,根据上下和左右的距离进行判断function clusterData(data) {let res = {}let clusterTest = function (pixel, tolrance = [200, 30]) {let r = pixel.join(',')const [x, y] = pixelfor (let key in res) {const [_x, _y] = key.split(',').map(Number)const dx = Math.abs(x - _x),dy = Math.abs(y - _y)if(dx < tolrance[0] && dy < tolrance[1]) {r = keybreak}}return r}for (let i = 0; i < data.length; i++) {const d = data[i]const coords = ol.proj.fromLonLat(d.geometry.coordinates)let pixel = map.getPixelFromCoordinate(coords)pixel = [pixel[0]  + xoff / 2, pixel[1] + yoff / 2].map(p => Math.round(p))d.pixel = pixellet key = pixel.join(',')const width = 26 * 2 + 6 + context.measureText(d.properties.name).widthkey = clusterTest(pixel, [width, 30])if(!res[key]) res[key] = []res[key].push(d)}return res}// 绘制两边为圆的矩形function drawRoundRect (ctx, x, y, width, height = 24, fillStyle = 'rgba(14,77,137,0.75)') {const r = height / 2ctx.fillStyle = fillStylectx.beginPath()ctx.moveTo(x + r, y)ctx.lineTo(x + width - r, y)ctx.arc(x + width - r, y + r, r, Math.PI * 1.5, Math.PI * 0.5)ctx.lineTo(x + r, y + height)ctx.arc(x + r, y + height - r, r, Math.PI * 0.5, Math.PI * 1.5)ctx.closePath()ctx.fill()}// 绘制featurefunction drawFeature (ctx, x = 10, y = 10, text, notCluster = true, index = 0) {let height = 26, width = height * 2 + 6,  r = height / 2if(notCluster) width += ctx.measureText(text).widthctx.save()// 如果有聚类,则避让绘制文字,放在前面是为了让指引线在下面if(!notCluster && map.getView().getZoom() > 4) {const radius = 60const ang  = (-index * 40 - 115) / 180 * Math.PI ;const cx = x + r, cy = y + height - rconst px = cx + Math.sin(ang) * radius,py = cy + Math.cos(ang) * radius// 绘制牵引线ctx.beginPath()ctx.strokeStyle = 'rgba(14,77,137,0.75)'ctx.lineWidth = 2ctx.moveTo(cx, cy)ctx.lineTo(px, py)ctx.stroke()// 绘制牵引线终点小圆圈ctx.beginPath()ctx.fillStyle = 'rgba(14,77,137,1)'ctx.arc(px, py, 2, 0, Math.PI * 2)ctx.fill()// 绘制矩形const h = 18const w = ctx.measureText(text).width + 12drawRoundRect(ctx, px - w - 2, py - h / 2 - 1, w, h, 'rgba(14,77,137,0.5)')// 绘制文字ctx.fillStyle = 'rgb(255,255,255)'ctx.beginPath()ctx.textAlign = 'right'ctx.textBaseline = 'middle'ctx.fillText(text, px - 7, py)}// 绘制矩形drawRoundRect(ctx, x, y, width, height)// 绘制左边的图标ctx.beginPath()const radialLeft = ctx.createRadialGradient(x + r, y + height - r, 0, x + r, y + height - r, r)radialLeft.addColorStop(0, '#fff')radialLeft.addColorStop(1, 'rgba(255,255,255,0)')ctx.fillStyle = radialLeftctx.arc(x + r, y + height - r, r, 0, Math.PI * 2)ctx.fill()// 绘制右边的图标ctx.beginPath()const radialRight = ctx.createRadialGradient(x + width - r, y + r, 0, x + width - r, y + r, r)radialRight.addColorStop(0, '#fff')radialRight.addColorStop(1, 'rgba(255,255,255,0)')ctx.fillStyle = radialRightctx.arc(x + width - r, y + r, r, 0, Math.PI * 2)ctx.fill()// 如果没有聚类,则绘制文字if(notCluster) {ctx.fillStyle = '#fff'ctx.beginPath()ctx.textAlign = 'left'ctx.textBaseline = 'middle'ctx.fillText(text, x + height + 3, y + height - r)}ctx.restore()}const cluster = clusterData(points)for (let key in cluster) {const data = cluster[key]const showText = data.length === 1data.forEach((d, index) => {const [x, y] = d.pixeldrawFeature(context, x, y, d.properties.name, showText, index)})}return canvas;
}
const layer = new ol.layer.Image({source: new ol.source.ImageCanvas({canvasFunction: canvasFunction})
});
map.addLayer(layer);
script>

这篇关于基于canvas和ol的点标注的避让实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

golang版本升级如何实现

《golang版本升级如何实现》:本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型(范围、哈希、列表、键值),主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区(Range Partitioning1、新建分区表:2、分

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后,有时候会需要自动创建分区。比如,一些表数据量非常大,有些数据是热点数据,按照日期分区MululbU