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

news2024/10/12 18:18:41

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 radians
    lat1, lon1 = math.radians(coord1[0]), math.radians(coord1[1])
    lat2, lon2 = math.radians(coord2[0]), math.radians(coord2[1])
    
    # Radius of the Earth in kilometers
    R = 6371.0
    
    # Differences in coordinates
    dlat = lat2 - lat1
    dlon = lon2 - lon1
    
    # Haversine formula
    a = math.sin(dlat/2)**2 + math.cos(lat1) * math.cos(lat2) * math.sin(dlon/2)**2
    c = 2 * math.atan2(math.sqrt(a), math.sqrt(1-a))
    
    # Distance in kilometers
    distance = R * c
    
    return 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)
#基站的位置+radius

    
for 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 group
					featureGroups[currentGroupIndex - 1].remove();
					}
				if (currentGroupIndex < featureGroups.length) {
					// 显示当前feature group
					featureGroups[currentGroupIndex].addTo(map_432a4a2a79d3e5bfe322e27360e2c06b);
					currentGroupIndex++;
				} else {
					// 如果所有feature group都已显示,可以停止定时器
					clearInterval(interval);
				}
			}		

			// 每1秒切换一次feature group
			var interval = setInterval(showNextFeatureGroup, 1000);

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

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

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

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

				}
			}		

这样就可以一直循环了

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

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

相关文章

【微信小程序】自定义组件布局会议OA其他页面(附源码)

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《微信小程序开发实战》。&#x1f3af;&#x1f3a…

如何为 Elasticsearch 创建自定义连接器

了解如何为 Elasticsearch 创建自定义连接器以简化数据摄取过程。 作者&#xff1a;JEDR BLASZYK Elasticsearch 拥有一个摄取工具库&#xff0c;可以从多个来源获取数据。 但是&#xff0c;有时你的数据源可能与 Elastic 现有的提取工具不兼容。 在这种情况下&#xff0c;你可…

推荐 3 个国外的自由职业者/兼职网站,大家有空可以去淘淘金

推荐 3 个国外的自由职业者/兼职网站&#xff0c;大家有空可以去淘淘金 1. Upwork 这个是全球最大的外包网站之一,很多知名公司都会在这里找外包员工 upwork.com 2. fiverr.com 这个平台也是侧重于技能变现&#xff0c;除了专业的职业技能&#xff0c;还有很多稀奇古怪的…

SpringCloud之Ribbon负载均衡解读

目录 基本介绍 概述 LoadBalanced理解 简单源码解读 1&#xff09;LoadBalancerIntercepor 2&#xff09;LoadBalancerClient 3&#xff09;负载均衡策略IRule 4&#xff09;总结 负载均衡策略 负载均衡策略 自定义负载均衡策略 基本介绍 概述 Ribbon是Netflix发布…

Nginx集群负载均衡配置完整流程

今天&#xff0c;良哥带你来做一个nginx集群的负载均衡配置的完整流程。 一、准备工作 本次搭建的操作系统环境是win11&#xff0c;linux可配置类同。 1&#xff09;首先&#xff0c;下载nginx。 下载地址为&#xff1a;http://nginx.org/en/download.html 良哥下载的是&am…

浅谈余压监控系统在住宅小区的应用方案

【摘要】&#xff1a; 本文分析了火灾发生时人员伤亡的主要原因——烟雾&#xff0c;并针对该原因提供切实可靠的系统应用解决方案&#xff0c;并通过具体案例&#xff0c;从设计依据、产品选型、系统组网、现场安装等方式介绍余压监控系统&#xff0c;希望可以在火灾发生时较大…

如何使用前端绘图库(D3.js、Chart.js等)?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

紫光同创FPGA实现PCIE测速试验,提供PDS工程和Linux QT上位机源码和技术支持

目录 1、前言免责声明 2、我这里已有的 GT 高速接口解决方案3、设计思路框架PCIE硬件设计PCIE IP核添加和配置驱动文件和驱动安装QT上位机和源码 4、PDS工程详解5、上板调试验证并演示6、福利&#xff1a;工程代码的获取 紫光同创FPGA实现PCIE测速试验&#xff0c;提供PDS工程和…

spring 提前编译:AOT

文章目录 AOT概述GraalvmNative Image演示Native Image构建过程GraalVM安装&#xff08;1&#xff09;下载GraalVM 安装C的编译环境 Native Image构建 AOT概述 JIT与AOT的区别 JIT和AOT 这个名词是指两种不同的编译方式&#xff0c;这两种编译方式的主要区别在于是否在“运行时…

vue源码笔记之——响应系统

vue是一种声明式范式编程&#xff0c;使用vue者只需要告诉其想要什么结果&#xff0c;无需关心具体实现&#xff08;vue内部做了&#xff0c;底层是利用命令式范式&#xff09; 1. reactive为什么只能操作对象&#xff0c;对于基本数据类型&#xff0c;需要用ref&#xff1f; …

Nginx 代理

目录 正向代理 反向代理 负载均衡 负载均衡的工作原理 优势和好处 算法和策略 应用领域 Nginx 的反向代理 应用场景 在网络通信中&#xff0c;代理服务器扮演着重要的角色&#xff0c;其中正向代理和反向代理是两种常见的代理服务器模式。它们在网络安全、性能优化和…

vue3后台管理系统之pinia及持久化集成使用

安装依赖 pnpm i pinia 在src目录下创建store 创建大仓库 //仓库大仓库 import { createPinia } from pinia //创建大仓库 const pinia createPinia() //对外暴露&#xff1a;入口文件需要安装仓库 export default pinia 全局注册pinia 配置用户仓库pinia管理数据 // 创建用…

JavaSE入门---认识Java数组

文章目录 一. 数组的基本概念1.1 为什么要使用数组&#xff1f;1.2 什么是数组&#xff1f;1.3 数组的使用 二. 数组是引用类型三. 数组的应用场景四. 数组中的常用方法五. 二维数组 一. 数组的基本概念 1.1 为什么要使用数组&#xff1f; 想象这样的一个场景&#xff1a;期末…

混淆技术研究笔记(七)Ant扩展介绍

ant 扩展官方文档&#xff1a;https://ant.apache.org/manual/develop.html Writing Your Own Task 编写你自己的任务 1. 创建一个XXTask类 创建一个Java类继承org.apache.tools.ant.Task &#xff0c;实际上不继承也可以&#xff0c;定义一个 execute() 方法就可以&#xf…

【python】制作一个windows端自动化工具!

作为一名自动化工程师&#xff0c;这一章&#xff0c;带大家来看看我是如何制作一个windows端的自动化工具&#xff0c;本章节内容我会从基础的环境配置、基础模块介绍、框架设计、实际运用等方面来讲解&#xff0c;对于想要未来从事该行业的人来说&#xff0c;希望这篇文章能给…

公司重要文件防泄密

公司重要文件防泄密是企业管理中一项非常重要的任务&#xff0c;今天分享几个可以防止公司重要文件泄密的方式&#xff1a; 1、建立完善的文件管理制度 企业应该制定严格的文件管理制度&#xff0c;包括文件分类、加密、访问权限的管理等。确保每个员工都了解文件管理制度并严…

【力扣1528】重新排列字符串

&#x1f451;专栏内容&#xff1a;力扣刷题⛪个人主页&#xff1a;子夜的星的主页&#x1f495;座右铭&#xff1a;前路未远&#xff0c;步履不停 目录 一、题目描述二、题目分析1、Java代码2、C代码 一、题目描述 给你一个字符串 s 和一个长度相同的整数数组 indices。 请你…

GLIP DetCLIP

1 GLIP: 十分钟解读GLIP&#xff1a;Grounded Language-Image Pre-training - 知乎 Grounded Language-Image Pre-training&#xff08;GLIP&#xff09;论文笔记 - 知乎 GLIP的主要贡献如下&#xff1a; 将phrase grounding和目标检测任务统一&#xff0c;将image和text pr…

Docker 快速入门体验

Docker 是什么&#xff1f; Docker 是一个开源项目&#xff0c;它能够自动化部署应用程序&#xff0c;通过所谓的容器来实现。这些容器允许开发者将自己的应用以及依赖打包到一个可移植的容器中&#xff0c;然后发布到任何流行的 Linux 或 Windows 机器上也可以实现虚拟化。Do…

Linux系统中配置系统

在Linux系统中配置系统设置->网络设置代理的详细教程如下&#xff1a; 首先&#xff0c;确保您已经安装了NetworkManager和nmtui。在终端中输入以下命令&#xff1a; sudo apt-get update sudo apt-get install network-manager nmtui 打开系统设置。在桌面上点击“设置”…