javascript/python 笔记: folium feature group自动切换

1 python部分

python部分只能是静态的结果

1.1 导入库

import folium
import math

1.2 数据

cell_lst表示基站位置,location_lst表示 用户实际位置(均为伪数据)

cell_lst=[[1.341505, 103.682498],[1.342751, 103.679604],[1.341505, 103.682498],[1.345168, 103.687161],[1.347958, 103.689354],[1.342021, 103.689783],[1.338171, 103.694606],[1.337896, 103.697054],[1.340481, 103.705090],[1.340481, 103.705090],[1.340481, 103.705090],[1.338239, 103.706240],[1.345306, 103.722383],[1.345306, 103.722383],[1.341542, 103.720950],[1.340013, 103.722994],[1.338471, 103.725120],[1.338471, 103.725120]]
location_lst=[[1.342520, 103.681236],[1.342196, 103.679179],[1.340511, 103.682740],[1.343717, 103.686724],[1.346773, 103.690370],[1.343203, 103.692289],[1.338421, 103.695795],[1.337798, 103.696571],[1.340250, 103.705373],[1.338572, 103.704885],[1.339684, 103.705642],[1.338408, 103.706127],[1.344021, 103.720346],[1.344426, 103.722062],[1.341786, 103.722293],[1.341259, 103.725101],[1.339582, 103.727067],[1.338587, 103.725448]]

1.3 计算距离

def haversine_distance(coord1, coord2):# Convert latitude and longitude from degrees to radianslat1, lon1 = math.radians(coord1[0]), math.radians(coord1[1])lat2, lon2 = math.radians(coord2[0]), math.radians(coord2[1])# Radius of the Earth in kilometersR = 6371.0# Differences in coordinatesdlat = lat2 - lat1dlon = lon2 - lon1# Haversine formulaa = math.sin(dlat/2)**2 + math.cos(lat1) * math.cos(lat2) * math.sin(dlon/2)**2c = 2 * math.atan2(math.sqrt(a), math.sqrt(1-a))# Distance in kilometersdistance = R * creturn distance
distances = [haversine_distance(cell, location) for cell, location in zip(cell_lst, location_lst)]
distances
'''
[0.18005323814683039,0.07772126527309729,0.11375452540404378,0.1684984707279946,0.17354640256402545,0.30802624884824137,0.135066360546843,0.05478715543865002,0.04061373617015469,0.21349087214373924,0.10779293458602432,0.022603780190190007,0.2677538048232246,0.10415494339183841,0.151739164696256,0.2721331959885841,0.24921211581025698,0.03867622572241997]
'''

 1.4 folium绘制Map

1.4.1 绘制地图

m=folium.Map(location=[1.341505, 103.682498],zoom_start=14)

 1.4.2 设置feature map

feature_group1 = folium.FeatureGroup(name='cell station locations')
feature_group3 = folium.FeatureGroup(name='cell station trajectory',show=False)
feature_group2 = folium.FeatureGroup(name='cell station locations with radius',show=False)
feature_group4 = folium.FeatureGroup(name='user locations',show=False)
feature_group5 = folium.FeatureGroup(name='user trajectory',show=False)
feature_group6 = folium.FeatureGroup(name='user POI inference',show=False)#show=False 表示这个FeatureGroup一开始不显现

1.4.3 绘制不同的feature_group内容

for i in range(len(cell_lst)):folium.Marker(cell_lst[i],icon=folium.Icon(icon='wifi',prefix='fa',color='red',icon_color='yellow')).add_to(feature_group1)
#基站的原始位置for i in range(len(cell_lst)):folium.Marker(cell_lst[i],icon=folium.Icon(icon='wifi',prefix='fa',color='red',icon_color='yellow')).add_to(feature_group2)
folium.PolyLine(locations=cell_lst).add_to(feature_group2)
#基站的轨迹for i in range(len(cell_lst)):folium.Marker(cell_lst[i],icon=folium.Icon(icon='wifi',prefix='fa',color='red',icon_color='yellow')).add_to(feature_group3) 
for i in range(len(cell_lst)):    folium.Circle(location=cell_lst[i],radius=distances[i]*1000,color='grey',fill=True,fill_color='lightgreen',fill_opaque=0.6).add_to(feature_group3)
#基站的位置+radiusfor i in location_lst:folium.Marker(i,icon=folium.Icon(icon='phone',color='orange',icon_color='blue')).add_to(feature_group4)
#用户的位置for i in location_lst:folium.Marker(i,icon=folium.Icon(icon='phone',color='orange',icon_color='blue')).add_to(feature_group5)
folium.PolyLine(locations=location_lst,color='yellow').add_to(feature_group5)  
#用户的轨迹 for i in location_lst[:2]:folium.Marker(i,icon=folium.Icon(icon='fa-book',prefix='fa',color='red',icon_color='orange')).add_to(feature_group6)
for i in location_lst[2:9]:folium.Marker(i,icon=folium.Icon(icon='fa-bus',prefix='fa',color='purple',icon_color='pink')).add_to(feature_group6)
for i in location_lst[9:11]:folium.Marker(i,icon=folium.Icon(icon='fa-utensils',prefix='fa',color='beige',icon_color='green')).add_to(feature_group6)
for i in location_lst[11:13]:folium.Marker(i,icon=folium.Icon(icon='fa-train',prefix='fa',color='blue',icon_color='red')).add_to(feature_group6)
for i in location_lst[13:18]:folium.Marker(i,icon=folium.Icon(icon='fa-tree',prefix='fa',color='green',icon_color='blue')).add_to(feature_group6)   
#不同的POI位置 feature_group1.add_to(m)
feature_group2.add_to(m)
feature_group3.add_to(m)
feature_group4.add_to(m)
feature_group5.add_to(m)
feature_group6.add_to(m)folium.LayerControl().add_to(m)
# 添加层控制器m.save('cell_tra.html')

feature1到feature6为(此时需要手动点) 

2 javascript部分

但此时切换featureGroup需要手动点,那有没有自动挡的方法呢?

这就需要javascript部分了

点开html文件,在script的最底下找到feature_group相关的内容

在后面加上这么几行

var featureGroups = [feature_group_8df8517d8a89c6007b42dd2aadea48b0,feature_group_5a58f9ee265eaa471b5e4e7aa586333a,feature_group_6fd24d0e96225627d8854aa735f3fe78,feature_group_4c8deb7bf4c4f7167afe823deac0d581,feature_group_096c62b8f2bcc94692f5ad56ddf740dc,feature_group_9e343a47b18a0d5dd2abcdc211227e69];var currentGroupIndex = 0;function showNextFeatureGroup() {if (currentGroupIndex > 0) {// 隐藏上一个feature groupfeatureGroups[currentGroupIndex - 1].remove();}if (currentGroupIndex < featureGroups.length) {// 显示当前feature groupfeatureGroups[currentGroupIndex].addTo(map_432a4a2a79d3e5bfe322e27360e2c06b);currentGroupIndex++;} else {// 如果所有feature group都已显示,可以停止定时器clearInterval(interval);}}		// 每1秒切换一次feature groupvar interval = setInterval(showNextFeatureGroup, 1000);

那么就会从第1个feature group开始 每隔1秒切换到下一个feature group

但这样的问题是,只能走一遍这样的流程,走完了就没了,如何循环播放呢?

修改一下else部分,其他部分不变

function showNextFeatureGroup() {if (currentGroupIndex > 0) {// 隐藏上一个feature groupfeatureGroups[currentGroupIndex - 1].remove();}if (currentGroupIndex < featureGroups.length) {// 显示当前feature groupfeatureGroups[currentGroupIndex].addTo(map_432a4a2a79d3e5bfe322e27360e2c06b);currentGroupIndex++;} else {currentGroupIndex = 0;//重置计数器showNextFeatureGroup();}}		

这样就可以一直循环了

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

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

相关文章

YCSB and TPC-C on MySQL(避免重复load)

一、编译安装MySQL 下载mysql5.7.28源码 https://downloads.mysql.com/archives/community/ Select Operating System 选择 Source Code Select OS version 选择 All Operating Systems 选择带有boost的版本 安装系统包 apt -y install make cmake gcc g perl bison libai…

虹科分享 | 赋能物流机器人:CANopen通信如何发挥重要作用?

现代物流领域迅速融入了技术进步&#xff0c;特别是随着自主机器人的兴起&#xff0c;这一趋势越发明显。确保这些机器人在复杂的仓库环境中精确运行的一个关键方面是CANopen通信协议。该协议集成了各种组件&#xff08;电机、传感器、摄像头和先进的电池系统&#xff09;&…

vue视频直接播放rtsp流;vue视频延迟问题解决;webRTC占cpu太大卡死问题解决;解决webRTC播放卡花屏问题:

播放多个视频 <div class"video-box"><div class"video"><iframe style"width:100%;height:100%;" name"ddddd" id"iframes" scrolling"auto" :src"videoLeftUrl"></iframe>&l…

轴承寿命相关细节的研究

数据集PHM2012 介绍一下IEEE PHM2012数据集_phm2012轴承数据集-CSDN博客 标签如何设置的? 剩余寿命预测的标签设置_rul 标签_兔子牙丫丫的博客-CSDN博客 参考自刘硕师兄的毕业答辩PPT 图 4.9 训练数据的切分方法 数据段的重叠切分&#xff0c;不仅可以覆盖更多的标签数据…

任务调度框架-如何实现定时任务+RabbitMQ事务+手动ACK

任务调度框架 Java中如何实现定时任务&#xff1f; 比如&#xff1a; 1.每天早上6点定时执行 2.每月最后一个工作日&#xff0c;考勤统计 3.每个月25号信用卡还款 4.会员生日祝福 5.每隔3秒&#xff0c;自动提醒 10分钟的超时订单的自动取消&#xff0c;每隔30秒或1分钟查询…

Redis在分布式场景下的应用

分布式缓存 缓存的基本作用是在高并发场景下对应服务的保护缓冲 – 基于Redis集群解决单机Redis存在的问题 单机的Redis存在四大问题&#xff1a; redis由于高强度性能采用内存 但是意味着丢失的风险单结点redis并发能力有限分布式服务中数据过多 依赖内存的redis 明显单机不…

微信小程序自定义组件及投票管理与个人中心界面搭建

14天阅读挑战赛 人生本来就没定义&#xff0c;任何的价值都是自己赋予。 目录 一、自定义tabs组件 1.1 创建自定义组件 1.2 tabs.wxml 编写组件界面 1.3 tabs.wxss 设计样式 1.4 tabs.js 定义组件的属性及事件 二、自定义组件使用 2.1 引用组件 2.2 编写会议界面内容 …

DTI综述(更新中)

Deep Learning for drug repurposing&#xff1a;methods&#xff0c;datasets&#xff0c;and applications 综述读完&#xff0c;觉得少了点东西&#xff0c;自己写个DTI综述 Databases(包括但不限于文章中的) DATABASEDESCRIBEBindingDB有详细的drug信息和对应的target&a…

推荐《中华小当家》

《中华小当家&#xff01;》 [1] 是日本漫画家小川悦司创作的漫画。该作品于1995年至1999年在日本周刊少年Magazine上连载。作品亦改编为同名电视动画&#xff0c;并于1997年发行播出。 时隔20年推出续作《中华小当家&#xff01;极》&#xff0c;于2017年11月17日开始连载。…

简单秒表设计仿真verilog跑表,源码/视频

名称&#xff1a;简单秒表设计仿真 软件&#xff1a;Quartus 语言&#xff1a;Verilog 代码功能&#xff1a; 秒表显示最低计时为10ms&#xff0c;最大为59:99&#xff0c;超出返回00&#xff1a;00 具有复位、启动、暂停三个按键 四个数码管分别显示4个时间数字。 演示…

LCR 177. 撞色搭配

LCR 177. 撞色搭配 LCR 177. 撞色搭配 迷你游戏之寻找两个单身狗 int* sockCollocation(int* sockets, int socketsSize, int* returnSize) {int* arr (int*)malloc(2 * sizeof(int));int ret 0;for (int i 0; i < socketsSize; i){ret ^ sockets[i];}int pos 0;for…

【七:docken+jenkens部署】

一&#xff1a;腾讯云轻量服务器docker部署Jenkins https://blog.csdn.net/qq_35402057/article/details/123589493 步骤1&#xff1a;查询jenkins版本&#xff1a;docker search jenkins步骤2&#xff1a;拉取jenkins镜像 docker pull jenkins/jenkins:lts步骤3&#xff1a;…

python -pandas -处理excel合并单元格问题

对于合并的单元格&#xff0c;不进行处理情况下&#xff0c;会默认输出nan问题 解决方法&#xff1a; class A(object):def __init__(self, xlsx_file_path, sheet_index):self.xlsx_file FileDataProcesser.read_excel(xlsx_file_path, sheet_index)self.sheet_data self.…

GitLab使用webhook触发Jenkins自动构建

1、jenkins安装gitlab插件 在插件管理中&#xff0c;搜索gitlab安装这个插件。 2、job中配置webhook地址和密钥 进入job设置&#xff0c;构建触发器中就可以看到gitlab的webhook配置&#xff0c;复制URL地址和随机令牌至gitlab中 勾选后&#xff0c;就可以展开设置&#xff…

代码随想录算法训练营第五十五天 | 300.最长递增子序列、674. 最长连续递增序列、718. 最长重复子数组

300.最长递增子序列 视频讲解&#xff1a;动态规划之子序列问题&#xff0c;元素不连续&#xff01;| LeetCode&#xff1a;300.最长递增子序列_哔哩哔哩_bilibili 代码随想录 &#xff08;1&#xff09;代码 674. 最长连续递增序列 视频讲解&#xff1a;动态规划之子序列问题…

YOLOv5-调用官方权重进行检验(目标检测)

&#x1f368; 本文为[&#x1f517;365天深度学习训练营学习记录博客 &#x1f366; 参考文章&#xff1a;365天深度学习训练营-第7周&#xff1a;咖啡豆识别&#xff08;训练营内部成员可读&#xff09; &#x1f356; 原作者&#xff1a;[K同学啊 | 接辅导、项目定制](https…

点云处理【四】(点云关键点检测)

第一章 点云数据采集 第二章 点云滤波 第二章 点云降采样 1.点云关键点是什么&#xff1f; 关键点也称为兴趣点&#xff0c;它是2D图像、3D点云或曲面模型上&#xff0c;可以通过定义检测标准来获取的具有稳定性、区别性的点集。 我们获得的数据量大&#xff0c;特别是几十万…

【MySQL】数据库——表操作

文章目录 1. 创建表2. 查看表3. 修改表修改表名add ——增加modify——修改drop——删除修改列名称 4. 删除表 1. 创建表 语法&#xff1a; create table 表名字 ( 列名称 列类型 ) charset set 字符集 collate 校验规则 engine 存储引擎 ; charset set字符集 &#xff0c;若…

Java设计模式 | 基于订单批量支付场景,对策略模式和简单工厂模式进行简单实现

基于订单批量支付场景&#xff0c;对策略模式和简单工厂模式进行简单实现 文章目录 策略模式介绍实现抽象策略具体策略1.AliPayStrategy2.WeChatPayStrategy 环境 使用简单工厂来获取具体策略对象支付方式枚举策略工厂接口策略工厂实现 测试使用订单实体类对订单进行批量支付结…

景联文科技语音数据标注:AUTO-AVSR模型和数据助力视听语音识别

ASR、VSR和AV-ASR的性能提高很大程度上归功于更大的模型和训练数据集的使用。 更大的模型具有更多的参数和更强大的表示能力&#xff0c;能够捕获到更多的语言特征和上下文信息&#xff0c;从而提高识别准确性&#xff1b;更大的训练集也能带来更好的性能&#xff0c;更多的数据…