<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>北京某个时间点的公交线路</title>
<style>
html,
body,
#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.demo-title {
position: absolute;
top: 25px;
left: 25px;
z-index: 1;
}
h1 {
font-size: 18px;
margin: 0;
color: rgb(180, 180, 190);
}
h3 {
font-size: 12px;
font-weight: normal;
margin-top: 5px;
color: rgb(150,150,150);
}
</style>
</head>
<body>
<div class="demo-title">
<h1>线路图--北京部分公共交通线路</h1>
<h3>通过高层展示出叠加在一起的线路,更加清晰展示每条数据线</h3>
</div>
<div id="map"></div>
<script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
<script src="https://webapi.amap.com/loca?v=2.0.0&key=您申请的key值"></script>
<script>
var map = new AMap.Map('map', {
zoom: 10.4,
center: [116.335036, 39.900082],
// showLabel: false,
mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
viewMode: '3D',
pitch: 50,
});
var loca = new Loca.Container({
map,
});
var geo = new Loca.GeoJSONSource({
url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/bj_bus.json',
});
var ll = new Loca.LineLayer({
loca,
});
var colors = ['#f7fcf5', '#e5f5e0', '#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#006d2c', '#00441b'].reverse();
ll.setSource(geo, {
color: function (index, prop) {
var i = index % colors.length;
return colors[i];
},
lineWidth: (index, prop) => {
var i = index % colors.length;
return i * 0.1 + 2;
},
altitude: function (index, feature) {
var i = index % colors.length;
return 100 * i;
},
// dashArray: [10, 5, 10, 0],
dashArray: [10, 0, 10, 0],
});
var dat = new Loca.Dat();
dat.addLayer(ll);
</script>
</body>
</html>
订阅评论
0 评论