ToB企服应用市场:ToB评测及商务社交产业平台

标题: MongoDB+SignalR+Hangfire+Vue2+百度地图实现GPS实时定位 [打印本页]

作者: 何小豆儿在此    时间: 2023-12-2 19:21
标题: MongoDB+SignalR+Hangfire+Vue2+百度地图实现GPS实时定位
MongoDB+SignalR+Hangfire+Vue2+百度地图实现GPS实时定位

一、实现效果


二、安装MongoDB

可以自行参考菜鸟链接:MongoDB 教程 | 菜鸟教程 (runoob.com)
1.下载mongodb数据库安装包:

网盘链接:https://pan.baidu.com/s/4rb1fOkc
2.进入\mongodb-win32-x86_64-windows-5.0.9\bin路径下创建db文件夹


3.启动服务

在bin目录下输入cmd+回车,输入命令:mongod --dbpath+你自己的db文件夹路径
比如我的文件目录为:E:\MongoDB\mongodb-win32-x86_64-windows-5.0.9\bin\db

4.测试是否启动服务

上一个黑框不要关!!!!!!!

在bin目录下再次输入cmd+回车,输入命令:mongo.exe将会看到如下画面2+2=4就证明连接成功了!!!(你太棒了)

三、向MongoDb中添加坐标数据

1.我这里使用是的WindowsForm模拟GPS向mongod添加的数据,大家可以自行克隆源码

git地址:https://gitee.com/ctrlzs/indowsforms.git
2.如何使用程序:



  1.         private void button3_Click(object sender, EventArgs e)
  2.         {
  3.             //文件路径
  4.             //string filePath = @"C:\D盘\新建 文本文档.txt";
  5.             string filePath = @"D:\桌面\代码\winfrom\坐标数据.txt";
  6.             //文本读取器
  7.             using (TextReader reader = new StreamReader(filePath, System.Text.Encoding.UTF8))
  8.             {
  9.                 //一次性读完
  10.                 string textContent = reader.ReadToEnd();
  11.                 //输出读取的内容
  12.                 //Console.WriteLine(textContent);
  13.                 textBox1.Text = textContent;
  14.             }
  15.         }
复制代码
四、打开项目配置MongoDb

我这里是服务器端使用的是ABP项目
1.下载包:MongoDB.Driver


2.引用命名空间

using MongoDB.Bson;
using MongoDB.Driver;
读取mongodb数据代码如下:
这里有个MongoDto,你需要自行创建
  1.         public async Task GetLatService()
  2.         {
  3.             //连接mongodb数据库
  4.             string connectionString = "mongodb://127.0.0.1:27017";
  5.             //创建了一个MongoClient对象 mongoClient,并传入连接字符串作为构造函数参数,以创建与 MongoDB 服务器的连接。
  6.             MongoClient mongoClient = new MongoClient(connectionString);
  7.             //通过GetDatabase方法从mongoClient 获取了一个名为 "myDB06" 的数据库的引用,并将其赋值给 database。
  8.             IMongoDatabase database = mongoClient.GetDatabase("myDB06");
  9.             //定义了一个常量字符串collectionName,表示要查询的集合的名称,这里是 "tutorial0"。
  10.             const string collectionName = "tutorial0";
  11.             //使用 GetCollection<BsonDocument>方法从database 中获取了一个名为 collectionName 的集合的引用,并将其赋值给 collection。这里的 BsonDocument 表示查询结果的文档类型。
  12.             var collection = database.GetCollection<BsonDocument>(collectionName);
  13.             //创建了一个空的 BsonDocument 对象 filter,用作查询的过滤条件。
  14.             var filter = new BsonDocument();
  15.             //使用collection 的 Find 方法,结合 filter 对象执行查询操作,并通过 ToListAsync 方法返回查询结果的一个异步可枚举集合。
  16.             var list = Task.Run(async () => await collection.Find(filter).ToListAsync()).Result;
  17.             var resultList = list.Select(bsonDocument => bsonDocument.ToDictionary()).Select(dictionary => new MongoDto
  18.             {
  19.                 x = dictionary.GetValueOrDefault("x").ToString(),
  20.                 y = dictionary.GetValueOrDefault("y").ToString()
  21.             }).ToList();
  22.             foreach (var item in resultList)
  23.             {
  24.                 //这里是所有配置完后通过SignalR发送消息(所有配置完毕后把注释删掉!!)
  25.                
  26.                 //var a = (item.y).Replace("\r", "");
  27.                 //x:经度 y:纬度
  28.                 //await _hub.Clients.All.SendAsync("ReceiveLog", item.x,a);   
  29.                 //Thread.Sleep(2000);
  30.             }
  31.         }
复制代码
五、配置SignalR实现实时发送消息

1.常规操作下载包ABP项目下载:Volo.Abp.AspNetCore.SignalR


2.进入配置项配置SignalR





像这样:

六、配置Hangfire定时任务

1.下载NuGet包(注意:这里你如果使用的是其他数据库请参阅其他文档,本项目是MySql)



2.配置Hangfire





3.配置完成后运行项目,在地址栏输入/hangfire即可看到如下画面(恭喜你hangfire配置成功!!!)


七、配置前端项目

1.vue2中引入百度地图

百度地图博客地址:vue&百度地图绘制行进路线/路书/路线规划/线路展示_vue 百度地图路书代码-CSDN博客
signalr博客地址:vue +signalR - 飞天猪皮怪 - 博客园 (cnblogs.com)
自行配置这里就不教了
2.各位大佬我代码直接奉上,就不做讲解了(粘过去就能用),觉得移动图片丑的联系我更换QQ:2362933015

记得改signalR广播地址和标识改成自己的
  1. npm install vue-baidu-map --save     //下载百度地图依赖包
  2. npm install @aspnet/signalr          //下载signalr依赖包
复制代码
  1. <template>
  2.   
  3.     <baidu-map
  4.       
  5.       :scroll-wheel-zoom="true"
  6.       :center="{ lng: 116.404, lat: 39.915 }"
  7.       :zoom="15"
  8.     >
  9.       <bm-marker
  10.         :position="{ lng: lng, lat: lat }"
  11.         :dragging="true"
  12.         animation="BMAP_ANIMATION_DROP"
  13.         :icon="{
  14.           url: 'https://i.postimg.cc/BQpNQLd9/JVOG-OY-6-J7-M3-ZXU-IX6-7.gif',
  15.           size: { width: 300, height: 157 },
  16.         }"
  17.       ></bm-marker>
  18.     </baidu-map>
  19.   
  20. </template>
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!




欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4