跳到主要内容
版本:9.1.0

轨迹线

支持在地图上加载轨迹线图层。

show
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>加载3D轨迹线图层</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<style>
body {
margin: 0;
padding: 0;
}

#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.1.0/mapmost-webgl-min.js"></script>
</head>

<body>
<div id="map"></div>
<script>

var map = new mapmost.Map({
container: 'map',
style: "<your style url>",
center: [120.67173395456803, 31.330713472130014],
zoom: 19.68,
pitch: 34,
bearing: -7.2,
userId: '***', // 授权码
});

map.on('load', function () {
let coor = [
[[120.67117513825076,31.330629314647595],[120.67233957753183,31.330882668322047],······],
[[120.67118759373142,31.33060387214624],[120.67234616150375,31.330854952147135],······],
[[120.67121724919411,31.330577239968633],[120.67232307496926,31.330814664625933],······],
[[120.67123329919616,31.330543790690996],[120.67232913339348,31.330787296106934],······],
······
]
let data = coor.map((da) => {
let daa = {};
daa.coordinates = da;
daa.times = [2,3,6,10,······];
daa.color = randomHexColor();
return daa;
});

map.addLayer({
id: "trip-demo",
type: "trips",
pathWidth: 10, // 轨迹宽度
data: data, // 轨迹线数据
speed: 20, // 时间缩减倍数
});
})

function randomHexColor() {
//随机生成十六进制颜色
var hex = Math.floor(Math.random() * 16777216).toString(16);
//生成ffffff以内16进制数
while (hex.length < 6) {
//while循环判断hex位数,少于6位前面加0凑够6位
hex = '0' + hex;
}
return '#' + hex; //返回‘#'开头16进制颜色
}

</script>
</body>

</html>