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

原文地址

洒家废物的博客。