制作自己的骑行轨迹 |
您所在的位置：网站首页 › 成都中国地图轨迹骑行 › 制作自己的骑行轨迹 |
|
制作自己的骑行轨迹
马上国庆节了，计划骑车回家，突然想到把所有的骑行线路汇总一下，无奈码表和APP不支持这样的操作，出于职业病，在此操作一下。 我用的是黑鸟码表，可以导出fit运动轨迹，但是fit还需要转gpx格式才能读取，否在二进制无法读取。想到在官网也可以看骑行记录，做为一名开发，我嗅到了可以从官网的个人中心去爬取骑行数据，比直接读取文件更为方便和快捷。 效果链接地址 壮壮壮壮壮的骑行记录。 获取轨迹数据 登陆登陆黑鸟官网，右上角进入个人中心 查单条数据F12打开开发人员选项后，随便点击一条骑行记录进入详情，查看网络选项卡，找到请求骑行数据的请求，做为GISer，对经纬度格外敏感，看到38，114就知道这是需要的数据了。 提取骑行数据提取骑行数据，postman里测试，设置请求头的Cookie，成功请求到数据。各个网站验证可能是不一样的，有的用Cookie，有的用Token，有的用Authorization，酌情而定。 记住请求地址中的关键信息 56135240 ，推测此为记录ID，后面肯定会在列表中存在。 http://www.blackbirdsport.com/api/records/56135240/data 提取骑行列表提取骑行列表，返回上一页，查看网络选项卡，找到请求骑行列表的数据，在记录里找到recordID，和前面查询具体数据的关键字一致，那么就可以准备爬下所有数据了。 postman测试地址，正常返回所有数据。http://www.blackbirdsport.com/api/records?lastRecordId=0&pageSize=25 末尾的 pageSize=25 改为 pageSize=100 一次爬取100条数据，小菜腿还没骑够100次。 爬取java爬取，数据输出到控制台，复制保存好，接下来前台会用到，至此，数据爬取已经完成。 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950import cn.hutool.core.util.StrUtil;import cn.hutool.http.HttpRequest;import cn.hutool.json.JSONArray;import cn.hutool.json.JSONObject;import cn.hutool.json.JSONUtil;/*** 获取黑鸟的行车行车数据* @author lizhuang* @date 2021/9/9 14:00*/public class GetBickRecord { public static void main(String[] args) { String detailUrl = "http://www.blackbirdsport.com/api/records/{}/data"; String listUrl = "http://www.blackbirdsport.com/api/records?lastRecordId=0&pageSize=100"; String cookie = "xxxxxx";//自己在网站上获取的cookie String strRes = HttpRequest.get(listUrl).header("Cookie",cookie).execute().body(); JSONObject o = JSONUtil.parseObj(strRes); JSONArray list = o.getJSONArray("content"); JSONArray jSONArray = new JSONArray(); for (int i = 0; i < list.size(); i++) { JSONObject obj = list.getJSONObject(i); String temp = StrUtil.format(detailUrl, obj.getStr("recordId")); String strData = HttpRequest.get(temp).header("Cookie",cookie).execute().body(); String[] track = JSONUtil.parseObj(strData).getJSONObject("content").getStr("track").split(";"); JSONArray j = new JSONArray(); StringBuilder sb = new StringBuilder(); try { Thread.sleep(1000); }catch (Exception e){ } for (int i1 = 0; i1 < track.length; i1++) { String[] s1 = track[i1].split(","); JSONArray json = new JSONArray(); json.add(s1[0]); json.add(s1[1]); json.add(s1[2]); j.add(json); } jSONArray.add(j); } System.out.println(jSONArray.toString()); }} 页面制作2102年了，当然要三维了。 关于展示想法 想做成骑行次数越多的线路颜色越亮，最好在加上动态效果，也就OD线可以实现了。 矢量地图和影像地图切换，采用百度暗色系矢量地图和天地图影像，天地图加载速度时快时慢，其他互联网影像精度不够，国外大厂又被墙了，只能用天地图了。 关于地形，加载了地形后，发现OD线不能贴地，像要贴地只能改为普通线，暂时把地形去掉了，后面想到好方法再往上加吧。 地形+普通线贴地的效果图 代码直接上代码吧，前台使用cesium，采用百度暗色系底图，线条采用OD线。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182 html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; overflow: hidden; } function switchMap(){ earth.sceneTree.root.children[1].enabled = !earth.sceneTree.root.children[1].enabled } function loadData(dataFunc) { var data = [[["38.07765", "114.53156"], ["38.07769", "114.53156"]]] //'此处为上面java代码System.out.println()输出的数据，三位数组' var timeDuration = 10.0; var moveBaseDuration = 4.0; var hStep = 300 / (data.length - 1); var busLines = []; data.map(function (busLine, idx) { var points = []; busLine.map(function (item, idx) { if (Cesium.Math.toRadians(item[1]) != 0) { // points.push([Cesium.Math.toRadians(item[1]), Cesium.Math.toRadians(item[0]),item[2]]) 此为添加z值的数据（x,y,z） points.push([Cesium.Math.toRadians(item[1]), Cesium.Math.toRadians(item[0])]) // 仅有x，y } }) busLines.push({ positions: points, color: [Math.random() * 0.5 + 0.5, Math.random() * 0.8 + 0.2, 0.0, 1.0], width: 2.0, startTime: timeDuration * Math.random(), duration: moveBaseDuration + 1.0 * Math.random() }); }); console.log('busLines', busLines) dataFunc(busLines, timeDuration); } // 1 创建Earth的vue组件 var EarthComp = { template: ` 切换地图 `, data() { return { _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！ _bgImagery: undefined, fps: 0, elapsedTime: 0 }; }, // 1.1 资源创建 mounted() { // 1.1.1 创建地球 var earth = new XE.Earth(this.$refs.earthContainer); // 1.1.2 添加默认地球影像 earth.sceneTree.root = { "children": [ { "czmObject": { "xbsjType": "Imagery", "xbsjImageryProvider": { "XbsjImageryProvider": { "url": "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}", } } } }, { "czmObject": { "xbsjType": "Imagery", "xbsjImageryProvider": { "XbsjImageryProvider": { "url": "http://t6.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=2cda5caa13d033e23a39407fc62accdb", "dstCoordType": "GCJ02" } } } }, /** 中国14级地形 { "czmObject": { "xbsjType": "Terrain", "xbsjTerrainProvider": { "type": "XbsjCesiumTerrainProvider", "XbsjCesiumTerrainProvider": { "url": "http://lab.earthsdk.com/terrain/577fd5b0ac1f11e99dbd8fd044883638", "requestVertexNormals": true, "requestWaterMask": true } } } } */ ] } earth.sceneTree.root.children[1].enabled = false earth._viewer.camera.flyTo({ destination: new Cesium.Cartesian3(-2102351.020236049, 4605886.135770324, 3909950.0555654215), orientation: { heading: 6.270938378736673, pitch: -0.8989671219533877, roll: 6.282706587562512 }, duration: 3 }); this._odlines = new XE.Obj.ODLines(earth); this._odlines.translucentPass = false; this._odlines.color = [1, 1, 1, 1]; window.earth = earth window.odlines = this._odlines loadData((data, timeDuration) => { this._odlines.data = data; this._odlines.timeDuration = timeDuration; this._odlines.playing = true; }); }, // 1.2 资源销毁 beforeDestroy() { // vue程序销毁时，需要清理相关资源 this._fpsUnbind = this._fpsUnbind && this._fpsUnbind(); this._elapsedTimeUnbind = this._elapsedTimeUnbind && this._elapsedTimeUnbind(); this._earth = this._earth && this._earth.destroy(); }, } // 2 创建vue程序 // XE.ready()用来加载Cesium.js等相关资源 XE.ready().then(() => { var app = new Vue({ el: '#vueApp', components: { EarthComp, }, }); }); 不足OD线效果在手机浏览器里无法显示，后面想办法解决一下 地形 + 贴地、移动端适配的问题。 ← Previous Post Next Post →如果您喜欢此博客或发现它对您有用，则欢迎对此发表评论。 也欢迎您共享此博客，以便更多人可以参与。 如果博客中使用的图像侵犯了您的版权，请与作者联系以将其删除。 谢谢 ！ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |