当前位置: 首页 > news >正文

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.mrgr.cn/news/62580.html

相关文章:

  • 绿色智慧冻结 专精深地空间:全国冻结法施工技术交流研讨会即将在京召开
  • 操作系统-第三章(3.1内存管理概念)
  • Linux_03 Linux 常用命令——find、ls
  • Efficient Adaptive Matching for Real-Time City Express Delivery
  • Linux 宝塔安装(各操作系统命令合集)
  • 通过不当变更导致 PostgreSQL 翻车的案例分析与防范
  • 论文中涉及的数学定义
  • 新闻列表以及详情页面梳理
  • Java基础面试题--
  • 特征提取:AI 挖掘数据关键信息的技巧
  • 分类算法——XGBoost 详解
  • JAVA开源项目 学生宿舍管理系统 计算机毕业设计
  • AFSim 基础总结一 代码总结(1)
  • TVB被嘲讽工资低,张兆辉得体且高情商的回应,赢得网友赞赏
  • 新能源行业必会基础知识---电力现货问答---第11问---什么是实物合约和金融合约?什么是差价合约?
  • o1背后的秘密:6种推理模式解析!
  • SL3038 降压恒压150V恒压芯片 60V 72V 90V降压IC 电动车控制器芯片
  • Kubernetes(K8s)相关漏洞介绍
  • Java常用设计模式
  • 01背包模板 | 学习总结
  • “无法定位程序输入点kernel32.dll”的错误要怎么处理?一键修复kernel32.dll
  • 算法2(C++实现)
  • React + SpreadJS 开发时常见问题
  • GNN
  • sed awk 第二版学习(八)—— awk 函数
  • socket