cesium制作自己的骑行轨迹

制作自己的骑行轨迹

马上国庆节了，计划骑车回家，突然想到把所有的骑行线路汇总一下，无奈码表和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爬取，数据输出到控制台，复制保存好，接下来前台会用到，至此，数据爬取已经完成。

import 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线。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <title>骑行记录</title> -->
<!-- 0 引入js文件：XbsjEarth.js和vue.min.js -->
<script src="../lib/XbsjEarth/XbsjEarth.js"></script>
<!-- <script src="http://earthsdk.com/v/last/XbsjEarth/XbsjEarth.js"></script> -->
<script src="./scripts/vue.min.js"></script>
<!-- <script src="http://earthsdk.com/v/last/Apps/Examples/scripts/vue.min.js"></script> -->
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="vueApp" style="width: 100%; height: 100%; background: grey; position: relative;">
<earth-comp></earth-comp>
</div>
<script>
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: `
<div style="width: 100%; height: 100%">
<div ref="earthContainer" style="width: 100%; height: 100%">
</div>
<div style=" position: absolute; z-index: 99; display: inline-block; left: 2%; top: 2%;">
<button style=" width: 130px; height: 40px; color: #fff; border-radius: 5px; padding: 10px 25px; font-family: 'Lato', sans-serif; font-weight: 500; background: transparent; cursor: pointer; transition: all 0.3s ease; position: relative; display: inline-block; box-shadow: inset 2px 2px 2px 0px rgb(255 255 255 / 50%), 7px 7px 20px 0px rgb(0 0 0 / 10%), 4px 4px 5px 0px rgb(0 0 0 / 10%); outline: none;" onclick="switchMap()">切换地图</button>
</div>
</div>
`,
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,
},
});
});
</script>
</body>
</html>

不足

OD线效果在手机浏览器里无法显示，后面想办法解决一下地形 + 贴地、移动端适配的问题。

原文地址

洒家废物的博客。