<html>
<head>
<title> US mapbox+deckgl 线路流动效果 </title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<script src="https://unpkg.com/deck.gl@8.8.12/dist.min.js"></script>
<script src='../source/v2.6.1/mapbox-gl.js'></script>
<link href='../source/v2.6.1/mapbox-gl.css' rel='stylesheet'/>
<script type="text/javascript" src='map_84_datta.js'></script>
<style>
body {
width: 100vw;
height: 100vh;
margin: 0;
}
#map {
width: 1400px;
height: 800px;
background: #e5e9ec;
}
#info {
display: none;
position: absolute;
top: 90px;
margin: 0px auto;
word-wrap: anywhere;
white-space: pre-wrap;
padding: 10px;
border: none;
border-radius: 3px;
font-size: 12px;
text-align: center;
color: #222;
background: #fff;
}
</style>
</head>
<body>
<div class="home">
<div id="map" ref="map"></div> <!-- 地图 -->
<div id="info"></div> <!-- 坐标提示框 -->
</div>
</body>
<script type="text/javascript">
mapboxgl.accessToken = 'pk.eyJ1IjoiZXRlcm5pdHkteHlmIiwiYSI6ImNqaDFsdXIxdTA1ODgycXJ5czdjNmF0ZTkifQ.zN7e588TqZOQMWfws-K0Yw';
//主题
const theme = {
buildingColor: [74, 80, 87],
trailColor0: [253, 128, 93],
trailColor1: [23, 184, 190],
material: {
ambient: 0.1, //环境
diffuse: 0.6, //扩散
shininess: 32, //亮度
specularColor: [60, 64, 70],
},
};
let time = 0; //时间
let loopLength = 1800; // 线圈长度
let animationSpeed = 1; //动画速度
const {MapboxLayer, TripsLayer} = deck;
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [-74, 40.72],
zoom: 13,
pitch: 45,
bearing: 0,
antialias: true, // 平滑曲线
});
let myDeckLayer;
map.on('load', () => {
addTripsLayer()
});
map.on('click', (e) => {
document.getElementById("info").innerHTML = '当前位置：' + JSON.stringify(e.lngLat.wrap());
document.getElementById("info").style.display = "table"
});
map.on('mousemove', ({e}) => {
});
function addTripsLayer() {
myDeckLayer = new MapboxLayer({
type: TripsLayer,
id: 'trips',
// data: "https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/trips/trips-v7.json",
data: bb,
getPath: (d) => d.path,
getTimestamps: (d) => d.timestamps, //返回一个时间戳数组，对应于返回的路径的每个导航点，表示访问该点的时间
getColor: (d) => d.vendor === 0 ? theme.trailColor0 : theme.trailColor1,
// getColor: (d) => theme.buildingColor,
opacity: 0.3,
widthMinPixels: 5, // 轨迹的宽度
capRounded: true,
// fadeTrail:false //路径是否淡出
trailLength: 120, //路径完全淡出需要多长时间
currentTime: 0, //帧的当前时间，即动画的播放头;此值应与 timestamps 中的时间戳单位相同
shadowEnabled: false,
});
map.addLayer(myDeckLayer);
// 每50ms更新一下时间，形成动画
setInterval(() => {
myDeckLayer.setProps({
currentTime: time,
});
}, 50);
window.requestAnimationFrame(animate);
}
// 动画
function animate() {
time = (time + animationSpeed) % loopLength;
window.requestAnimationFrame(animate);
}
</script>
</html>
// ------------------------------------------- bb --数据下文
浙公网安备 33010602011771号