leaflet矢量瓦片vetorgrid显示聚合和图标裁剪显示不全的问题

1、问题现象

使用leaflet显示矢量瓦片会出现图片挤压的问题和图片裁剪显示不全的问题

2、解决办法和思路

1)数据抽稀

方法一:在createTile方法通过控制feature在单张瓦片里面显示的数量,在小层级的时候进行筛选过滤,对点数据类型,代码如下:

//判断当期瓦片里面的features,然后对数据进行抽稀,显示的数量不超过5个//小于14层的瓦片,抽稀,显示的数量不超过5个,大于14级全部显示if ((coords.z <= 14 && layer.features.length > 5 && feat.id % Math.ceil(layer.features.length / 5) == 0) ||layer.features.length <= 5 ||coords.z > 14 ||feat.type != 1) {var featureLayer = this._createLayer(feat, pxPerExtent)for (var j = 0; j < styleOptions.length; j++) {var style = L.extend({}, L.Path.prototype.options, styleOptions[j])featureLayer.render(renderer, style)renderer._addPath(featureLayer)}if (this.options.interactive) {featureLayer.makeInteractive()}if (storeFeatures) {renderer._features[id] = {layerName: layerName,feature: featureLayer}}}

方法二:通过设置矢量瓦片vectorTileLayerStyles的样式,可以获取到当前的层级和数据信息,设置一个空的占位图标解决抽稀问题:

vectorTileLayerStyles[layerStyle.layername] = function (properties: any, zoom: number) {if (options && options.length > 0) {let style = {} //返回的数据格式options.forEach((item: any) => {//如何当前的层级落在option的zoom数组范围内if (zoom >= item.zoom[0] && zoom <= item.zoom[1]) {let icon = L.icon({iconUrl: `/static/images/Iconpoint/${item.iconName}.svg`,iconSize: item.iconSize})//点的数据抽稀设置if (item.sliceCount && item.fieldname) {let data = properties[item.fieldname]//测试用// data = data.split('.')[1]//取余数if (data && Number(data) % Number(item.sliceCount) == 0) {style = {icon: icon}} else {style = {icon: defaultIcon}}}}})return style

 

 options配置如下:

         options: [{zoom: [1, 10], //不同层级下的显示最小值和最大值sliceCount: 70, //抽稀的数量iconSize: [23, 30],iconName: 'monitorvideo',fieldname: 'gbindexcode'//抽稀属性字段},{zoom: [11, 12], //不同层级下的显示sliceCount: 20, //抽稀的数量iconSize: [23, 30],iconName: 'monitorvideo',fieldname: 'gbindexcode'},{zoom: [13, 15], //不同层级下的显示sliceCount: 10, //抽稀的数量iconSize: [23, 30],iconName: 'monitorvideo',fieldname: 'gbindexcode'},{zoom: [16, 20], //不同层级下的显示sliceCount: 1, //抽稀的数量iconSize: [23, 30],iconName: 'monitorvideo',fieldname: 'gbindexcode'}]

2)图片边缘裁切的问题处理

在gridlayer绘制的时候判断当前的数据是否会超出绘制边界,超出绘制边界后不予显示(可能会存在数据丢失的问题),也可以移动绘制的位置让其显示完全

_updateIcon: function (layer) {if (!this._drawing) {return}var icon = layer.options.icon,options = icon.options,size = L.point(options.iconSize),anchor = options.iconAnchor || (size && size.divideBy(2, true)),p = layer._point.subtract(anchor),ctx = this._ctx,img = layer._getImage()if (img.complete) {if (p.x + size.x > 256 || p.x < 0 || p.y + size.y > 256 || p.y < 0) {console.log('图像超出画板边界!')} else {ctx.drawImage(img, p.x, p.y, size.x, size.y)}} else {L.DomEvent.on(img, 'load', function () {if (p.x + size.x > 256 || p.x < 0 || p.y + size.y > 256 || p.y < 0) {console.log('图像超出画板边界!')} else {ctx.drawImage(img, p.x, p.y, size.x, size.y)}})}this._drawnLayers[layer._leaflet_id] = layer}
})

3、解决结果

4、参考资料

Leaflet.VectorGrid API reference

https://gis.stackexchange.com/questions/448812/leaflet-vectorgrid-circle-markers-cut-off-at-border-in-custom-implementation

Rendering errors (symbol clipping) at vector tile edges · Issue #149 · Leaflet/Leaflet.VectorGrid · GitHub

canvas 绘制图片 - ctx.drawImage()-CSDN博客

leaflet瓦片图层缩放级别外不隐藏_leafeft marker按照zomm显示隐藏-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/462066.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Gitee push 文件

1、背景 想将自己的plecs仿真放到git中管理&#xff0c;以防丢失&#xff0c;以防乱改之后丢失之前版本仿真。此操作说明默认用户已下载git。 2、操作步骤 2.1 开启Git Bash 在文件夹中右键&#xff0c;开启Git Bash。 2.2 克隆文件 在Git Bash中打git clone git地址&#…

gitee 使用 webhoot 触发 Jenkins 自动构建

一、插件下载和配置 Manage Jenkins>Plugin Manager 搜索 gitee 进行安装 插件配置 1、前往Jenkins -> Manage Jenkins -> System -> Gitee Configuration -> Gitee connections 2、在 Connection name 中输入 Gitee 或者你想要的名字 3、Gitee host URL 中…

【JavaEE初阶 — 多线程】Thread类的属性

目录 Thread类的属性 1.Thread 的常见构造方法 2.Thread 的几个常见属性 2.1 前台线程与后台线程 2.2 setDaemon() 2.3 isAlive() Thread类的属性 Thread 类是JVM 用来管理线程的一个类&#xff0c;换句话说&#xff0c;每个线程都有一个唯一的Thread 对象与之关联&…

yocto是如何收集recipes,如何加入现有的bb文件

yocto通常是如何收集recipes: 在Yocto中&#xff0c;通过以下方式收集recipes&#xff1a; 层&#xff08;Layers&#xff09; Yocto项目使用层来组织recipes。层是包含配置文件、recipes和其他相关文件的目录结构。每个层有自己的目录&#xff0c;其中 recipes-* 目录用于存…

原生鸿蒙的竞争力到底如何?

目录 1. 崛起与挑战2. 安全机制3. 自动化检测前移4. 深入探讨开发者服务优势 1. 崛起与挑战 长期以来&#xff0c;移动操作系统市场被IOS和安卓所垄断&#xff0c;一直都难以推出完整的自主系统&#xff0c;面临诸多挑战&#xff0c;如推广困难、应用适配难度大&#xff0c;以及…

sublime Text中设置编码为GBK

要在sublime Text中设置编码为GBK&#xff0c;请按照以下步骤操作 1.打开Sublime Text编辑器, 2.点击菜单栏中的“Preferences”(首选项)选项&#xff0c;找打Package Control选项。 3.点击Package Control&#xff0c;随后搜索Install Package并点击&#xff0c;如下图 4.再…

KPRCB结构之ReadySummary和DispatcherReadyListHead

ReadySummary: Uint4B DispatcherReadyListHead : [32] _LIST_ENTRY 请参考 _KTHREAD *__fastcall KiSelectReadyThread(ULONG LowPriority, _KPRCB *Prcb)

Python爬虫:揭开淘宝商品描述的神秘面纱

在这个信息爆炸的时代&#xff0c;我们每天都在和时间赛跑。作为一名Python开发者&#xff0c;你是否曾梦想拥有超能力&#xff0c;能够瞬间揭开淘宝商品描述的神秘面纱&#xff1f;今天&#xff0c;就让我们一起化身为代码界的“福尔摩斯”&#xff0c;使用Python爬虫技术&…

HTML 多媒体标签详解:<img>、<object> 与 <embed>

文章目录 1. `<img>` 标签主要属性示例注意事项2. `<object>` 标签概述主要属性示例注意事项3. `<embed>` 标签概述主要属性示例注意事项小结在现代网页设计中,多媒体内容的使用变得越来越重要,因为它能够有效增强用户体验、吸引注意力并传达信息。HTML 提…

台式电脑如何改ip地址:全面解析与实操指南

有时候&#xff0c;由于IP地址冲突、网络安全、隐私保护或特定应用需求&#xff0c;我们可能需要更改台式电脑的IP地址。然而&#xff0c;对于不熟悉网络设置的用户来说&#xff0c;这一过程可能显得复杂而陌生。本文将通过全面解析与实操指南&#xff0c;帮助大家轻松掌握台式…

跟着红队笔记学习 tmux:渗透测试中的多终端利器

内容预览 ≧∀≦ゞ 跟着红队笔记学习 tmux&#xff1a;渗透测试中的多终端利器进入 tmux 前的准备tmux 概念简介tmux 基础操作会话管理命令会话管理快捷键会话内和会话外命令的区别 tmux 窗口和面板管理新建和管理窗口分割窗口为面板切换面板面板放大与恢复调整面板大小关闭面板…

【机器学习】24. 聚类-层次式 Hierarchical Clustering

1. 优势和缺点 优点&#xff1a; 无需提前指定集群的数量 通过对树状图进行不同层次的切割&#xff0c;可以得到所需数量的簇。树状图提供了一个有用的可视化-集群过程的可解释的描述树状图可能揭示一个有意义的分类 缺点&#xff1a; 计算复杂度较大, 限制了其在大规模数据…

移植 AWTK 到 纯血鸿蒙 (HarmonyOS NEXT) 系统 (2) - 移植 nanovg

AWTK 使用 nanovg 作为显示的后端&#xff0c;能否将 nanovg 成功移植到 HarmonyOS 上是一个关键问题&#xff0c;所以我们先尝试移植 nanovg&#xff0c;不过实际情况比预想的要简单&#xff0c;整个过程没有遇到任何意外的问题。 1. 将 AWTK 的代码取到 entry/src/main/cpp …

函数调用方法背后的原理

编译器实现函数调用时所遵循的一系列规则称为函数的“调用约定&#xff08;Calling Convention&#xff09;”&#xff0c;x86-64平台上的编译器随着操作系统的不同而有不同的约定。Windows上采用的是Wx64/Vector的标准,而类unix上采用systemV AMD64 ABI的调用标准。统一的调用…

Pinpoint(APM)进阶--插件开发

接上文 pinpoint支持编写插件来扩展监控的覆盖范围 这里重申下pinpoint一个trace的基本构成&#xff08;最小单元为span&#xff09; 插件结构 pinpoint插件由type-provider.yml 和实现组成 type-provider.yml 定义给插件使用的ServiceTypes和AnnotationKeys&#xff0c;并…

qt QPalette详解

1、概述 QPalette是Qt框架中用于管理颜色组和角色的一种机制。它允许开发者为应用程序中的不同组件&#xff08;如窗口、按钮、文本框等&#xff09;定义一套统一的颜色方案。QPalette通过定义颜色角色&#xff08;如背景色、前景色、选择色等&#xff09;和颜色组&#xff08…

什么是FUSE用户态文件系统

零. 文件系统 1. 为什么要有文件系统 文件系统是操作系统中管理文件和目录的一种机制。它提供了组织、存储、检索和更新文件的方法&#xff0c;主要如下&#xff1a; 数据组织&#xff1a;文件系统将数据组织成文件和目录&#xff0c;使用户能够更方便地管理和查找文件。每个…

<HarmonyOS第一课>应用/元服务上架的课后习题

善者&#xff0c;吾善之&#xff1b; 不善者&#xff0c;吾亦善之&#xff0c;德善。 信者&#xff0c;吾信之&#xff1b; 不信者&#xff0c;吾亦信之&#xff0c;德信。 圣人在天下&#xff0c;歙歙焉为天下浑其心&#xff0c;百姓皆注其耳目&#xff0c;圣人皆孩之。 通过&…

从源码到成品应用:互联网医院系统与在线问诊APP的开发全解析

今天将全面解析互联网医院系统和在线问诊APP的开发过程&#xff0c;从源码到成品应用&#xff0c;帮助您理解其中的关键技术和实施策略。 一、系统架构设计 互联网医院系统和在线问诊APP的开发首先需要一个合理的系统架构。通常&#xff0c;系统架构分为前端和后端两个部分。…

2024年【危险化学品生产单位安全生产管理人员】考试内容及危险化学品生产单位安全生产管理人员作业考试题库

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 危险化学品生产单位安全生产管理人员考试内容是安全生产模拟考试一点通生成的&#xff0c;危险化学品生产单位安全生产管理人员证模拟考试题库是根据危险化学品生产单位安全生产管理人员最新版教材汇编出危险化学品生…