惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

aimingoo的专栏
aimingoo的专栏
宝玉的分享
宝玉的分享
J
Java Code Geeks
Martin Fowler
Martin Fowler
博客园 - Franky
I
InfoQ
Stack Overflow Blog
Stack Overflow Blog
Blog — PlanetScale
Blog — PlanetScale
S
SegmentFault 最新的问题
B
Blog
The Cloudflare Blog
F
Fortinet All Blogs
量子位
腾讯CDC
博客园 - 司徒正美
D
Docker
大猫的无限游戏
大猫的无限游戏
Microsoft Azure Blog
Microsoft Azure Blog
T
The Blog of Author Tim Ferriss
V
Visual Studio Blog
IT之家
IT之家
Last Week in AI
Last Week in AI
D
DataBreaches.Net
小众软件
小众软件

又见苍岚

COLMAP PatchMatch Stereo 算法详解 事件驱动的状态机框架:从理论到工程实践 Git 在国内网络环境下无法 Push 的排查与修复 —— 配置 Clash 代理 分段五次多项式插值原理详解 路径插值方法深度对比研究 Claude Code 使用指南 OpenClaw 记忆管理与技能创建指南 CBS(Conflict-Based Search)算法详解 A* 算法及其变种详解 OpenClaw 配置多 Agents Windows Powershell 无法加载文件,因为在此系统上禁止运行脚本问题的解决方案 MaxClaw 安装流程 大模型 AI 名词介绍 AList 网盘聚合工具简介 Protobuf 简介与测试 Claude Code 简介以及 GLM 4.7 模型接入 Github 歌词下载工具 163MusicLyrics Python __getattr__ 懒加载 Python TypedDict 机器人仿真平台 Gazebo 安装记录 机器人仿真平台 Gazebo 简介 多机器人路径规划问题(Multi-Agent Path Finding, MAPF)简介 Python exifread 读取修改过的 jpeg 信息错误问题修复 3D 坐标系变换的理解 3D 旋转矩阵基本概念 MongoDB Compass 介绍 Python 环境管理工具 uv Flutter 开发指南 Snipaste 安装下载与黑屏问题解决方案 全局路径规划算法记录
结合 Planetary 和 IP 定位绘制访问者坐标
Yiwei Zhang · 2023-01-19 · via 又见苍岚

Planetary.js 是一款生成可交互地球模型的插件,可以将指定坐标标注在模型上,尝试将 IP 定位与之结合获绘制访问者位置。

目标

  • 获取访问者位置,绘制在地球模型上展示出来 ~

实现思路

  • 我们已经掌握了使用 Planetary 绘制地球模型 的方法,并可以在上面绘制点响应。

  • 我们已经掌握了 根据 IP 定位坐标 的方法

  • 那么在后端根据访问 http 包头中的 IP 信息查询该 IP 地址经纬坐标

  • 将该坐标返回给 Planetary,让其绘制在地球模型上基本上就达到目的了

核心代码

  • 后端根据 IP 获取经纬度等信息:
1
2
3
4
5
def ip_locate(self, ip_str):
url = 'https://api.ipdatacloud.com/v2/query?ip=' + ip_str + '&key=<your-key-to-ip-data-cloud>'
res = requests.get(url=url, data=json.dumps({}), headers=self.header)
res_dict = json.loads(res.text)
return res_dict
  • flask 路由代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

@app.route("/locate", methods=['GET','POST'])
def locate():

try:
IP_address = request.access_route[0]
res_dict = statis_obj.ip_locate(IP_address)
date_time_obj = datetime.datetime.strptime(res_dict['data']['local_time'], '%Y-%m-%d %H:%M')
seconds = int(time.mktime(date_time_obj.timetuple()))
data_dict = dict()
data_dict['time'] = seconds
data_dict['lat'] = float(res_dict['data']['latitude'])
data_dict['lng'] = float(res_dict['data']['longitude'])
data_dict['mag'] = 3
res_str = json.dumps(data_dict)
except:
data_dict = dict()
data_dict['time'] = 0
data_dict['lat'] = 0
data_dict['lng'] = 0
data_dict['mag'] = 0
res_str = json.dumps(data_dict)

return res_str

  • 此时访问 该路由可以获取我自己的位置信息:
1
{"time": 1674112620, "lat": 31.231706, "lng": 121.472644, "mag": 3}
  • 前端抓取该 json 字符串并转为字典对象:
1
2
3
4
5
6
7
8
9
var httpRequest = new XMLHttpRequest();    
httpRequest.open('GET', 'https://uipv4.zywvvd.com:33030:6101/locate', true); httpRequest.setRequestHeader("Content-type","application/json"); httpRequest.send("");
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
//验证请求是否发送成功
var testJson = httpRequest.responseText;//获取到服务端返回的数据    
testJson = $.parseJSON(testJson);
}
}
  • 向 Planetary 加入该 json 携带的信息:
1
2
3
4
5
6
7
planet.plugins.pings.add(testJson.lng, testJson.lat, {
// Here we use the `angles` and `colors` scales we built earlier
// to convert magnitudes to appropriate angles and colors.
angle: angles(testJson.mag),
color: colors(testJson.mag),
ttl: ttls(testJson.mag)
});

效果展示

当前访问者

  • 根据访问者 IP 展示位置:

历史访问者

  • 根据历史访问者 IP 展示位置:

参考资料

文章链接:
https://www.zywvvd.com/notes/tools/planetary-js/location-show/