Baidu MapVGL点聚合 设置点权重

2024-01-19 22:04

本文主要是介绍Baidu MapVGL点聚合 设置点权重,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

百度的聚合图层只能根据点数聚合,不能根据权重展示聚合结果。本次修改文件是:**mapvgl.min.js**
  • 搜索源码,找到类似的下方代码。_w为本次改动(定义和使用两处改动)
function g(a, c) {let _w = a.geometry.weight?a.geometry.weight:1;a = a.geometry.coordinates;return {x: a[0] / 360 + .5,y: n(a[1]),zoom: Infinity,index: c,parentId: -1,weight:_w}
}
  • 修改函数prototype._cluster:下文调用属性weight的地方为本次修改点
w.prototype._cluster = function(a, c) {var b = [], d = this.options, f = d.reduce, h = d.minPoints;d = d.radius / (d.extent * Math.pow(2, c));for (var g = 0; g < a.length; g++) {var k = a[g];if (!(k.zoom <= c)) {k.zoom = c;for (var l = this.trees[c + 1], m = l.within(k.x, k.y, d), p = k.numPoints || k.weight , n = p, q = 0, r = m; q < r.length; q += 1) {var t = l.points[r[q]];t.zoom > c && (n += t.numPoints || t.weight)}if (n >= h) {q = k.x * p;r = k.y * p;p = f && 1 < p ? this._map(k, !0) : null;t = (g << 5) + (c + 1) + this.points.length;for (var v = 0; v < m.length; v += 1) {var u = l.points[m[v]];if (!(u.zoom <= c)) {u.zoom = c;var w = u.numPoints || u.weight;q += u.x * w;r += u.y * w;u.parentId = t;f && (p || (p = this._map(k, !0)),f(p, this._map(u)))}}k.parentId = t;b.push({x: q / n,y: r / n,zoom: Infinity,id: t,parentId: -1,numPoints: n,properties: p})} else if (b.push(k),1 < n)for (k = 0,n = m; k < n.length; k += 1)m = l.points[n[k]],m.zoom <= c || (m.zoom = c,b.push(m))}}return b
}
  • HTML定义地图点时,增加权重字段属性:weight 即可
// 构造数据
while (randomCount--) {var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)]);data.push({geometry: {type: 'Point',coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4],weight: 3},properties: {icon: ['images/marker.png','images/icons/icon-accident.png','images/icons/icon-location.png','images/icons/icon-airplane.png'][randomCount % 4],width: randomCount % 2 === 0 ? 100 / 4 : 30,height: randomCount % 2 === 0 ? 153 / 4 : 30}});
}

这篇关于Baidu MapVGL点聚合 设置点权重的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

MySQL8.0设置redo缓存大小的实现

《MySQL8.0设置redo缓存大小的实现》本文主要在MySQL8.0.30及之后版本中使用innodb_redo_log_capacity参数在线更改redo缓存文件大小,下面就来介绍一下,具有一... mysql 8.0.30及之后版本可以使用innodb_redo_log_capacity参数来更改

Nginx设置连接超时并进行测试的方法步骤

《Nginx设置连接超时并进行测试的方法步骤》在高并发场景下,如果客户端与服务器的连接长时间未响应,会占用大量的系统资源,影响其他正常请求的处理效率,为了解决这个问题,可以通过设置Nginx的连接... 目录设置连接超时目的操作步骤测试连接超时测试方法:总结:设置连接超时目的设置客户端与服务器之间的连接

mybatis和mybatis-plus设置值为null不起作用问题及解决

《mybatis和mybatis-plus设置值为null不起作用问题及解决》Mybatis-Plus的FieldStrategy主要用于控制新增、更新和查询时对空值的处理策略,通过配置不同的策略类型... 目录MyBATis-plusFieldStrategy作用FieldStrategy类型每种策略的作

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

Windows设置nginx启动端口的方法

《Windows设置nginx启动端口的方法》在服务器配置与开发过程中,nginx作为一款高效的HTTP和反向代理服务器,被广泛应用,而在Windows系统中,合理设置nginx的启动端口,是确保其正... 目录一、为什么要设置 nginx 启动端口二、设置步骤三、常见问题及解决一、为什么要设置 nginx

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

电脑密码怎么设置? 一文读懂电脑密码的详细指南

《电脑密码怎么设置?一文读懂电脑密码的详细指南》为了保护个人隐私和数据安全,设置电脑密码显得尤为重要,那么,如何在电脑上设置密码呢?详细请看下文介绍... 设置电脑密码是保护个人隐私、数据安全以及系统安全的重要措施,下面以Windows 11系统为例,跟大家分享一下设置电脑密码的具体办php法。Windo

如何设置vim永久显示行号

《如何设置vim永久显示行号》在Linux环境下,vim默认不显示行号,这在程序编译出错时定位错误语句非常不便,通过修改vim配置文件vimrc,可以在每次打开vim时永久显示行号... 目录设置vim永久显示行号1.临时显示行号2.永www.chinasem.cn久显示行号总结设置vim永久显示行号在li

Linux:alias如何设置永久生效

《Linux:alias如何设置永久生效》在Linux中设置别名永久生效的步骤包括:在/root/.bashrc文件中配置别名,保存并退出,然后使用source命令(或点命令)使配置立即生效,这样,别... 目录linux:alias设置永久生效步骤保存退出后功能总结Linux:alias设置永久生效步骤

Spring MVC如何设置响应

《SpringMVC如何设置响应》本文介绍了如何在Spring框架中设置响应,并通过不同的注解返回静态页面、HTML片段和JSON数据,此外,还讲解了如何设置响应的状态码和Header... 目录1. 返回静态页面1.1 Spring 默认扫描路径1.2 @RestController2. 返回 html2