203 lines
6.0 KiB
HTML
203 lines
6.0 KiB
HTML
<!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 id="map"></div>
|
|
<script src="https://webapi.amap.com/maps?v=2.0&key=dad2024e24551e1d97bb9023727d02ec&plugin&plugin=AMap.Scale,AMap.ToolBar"></script>
|
|
<script src="https://webapi.amap.com/loca?v=2.0.0&key=dad2024e24551e1d97bb9023727d02ec&plugin"></script>
|
|
<script src="https://a.amap.com/Loca/static/loca-v2/demos/mock_data/events.js"></script>
|
|
<script>
|
|
var map = new AMap.Map('map', {
|
|
zoom: 13.54,
|
|
viewMode: '3D',
|
|
center: [116.398063, 39.988207], //北京
|
|
mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
|
|
});
|
|
|
|
var loca = new Loca.Container({
|
|
map,
|
|
});
|
|
|
|
function getTestData() {
|
|
var list = [];
|
|
for (let i = 0; i < 200; i++) {
|
|
let fList = [];
|
|
for (let j = 0; j < 200; j++) {
|
|
fList.push([
|
|
Number((115.601 + i * 0.002).toFixed(5)), Number((40.32 + j * 0.002).toFixed(5))
|
|
]);
|
|
}
|
|
list.push({
|
|
"type": "Feature",
|
|
"properties": {
|
|
"name": i,
|
|
},
|
|
"geometry": {
|
|
"type": "MultiPoint",
|
|
"coordinates": fList
|
|
}
|
|
});
|
|
}
|
|
list.push({
|
|
"type": "Feature",
|
|
"properties": {
|
|
"name": 'HIIII',
|
|
},
|
|
"geometry": {
|
|
"type": "Point",
|
|
"coordinates": [115.201, 40.302]
|
|
}
|
|
})
|
|
|
|
var data = {
|
|
"type": "FeatureCollection",
|
|
"features": list,
|
|
};
|
|
return data;
|
|
}
|
|
|
|
function getEventsCollection() {
|
|
let _events = events[0].events;
|
|
var list = _events.map(e => {
|
|
let ll = e.lngLat.split(',');
|
|
let arr = [parseFloat(ll[0]), parseFloat(ll[1])]
|
|
return {
|
|
"type": "Feature",
|
|
"properties": {
|
|
rawData: e
|
|
},
|
|
"geometry": {
|
|
"type": "Point",
|
|
"coordinates": arr
|
|
}
|
|
}
|
|
})
|
|
|
|
var data = {
|
|
"type": "FeatureCollection",
|
|
"features": list,
|
|
};
|
|
return data;
|
|
}
|
|
var data = getEventsCollection();
|
|
var geo = new Loca.GeoJSONSource({
|
|
data: data,
|
|
});
|
|
|
|
var layer = new Loca.IconLayer({
|
|
zIndex: 10,
|
|
opacity: 1,
|
|
visible: false,
|
|
});
|
|
|
|
var trafficIcons = {
|
|
1: 'https://a.amap.com/Loca/static/loca-v2/demos/images/traffic-control.png',
|
|
2: 'https://a.amap.com/Loca/static/loca-v2/demos/images/jam.png',
|
|
3: 'https://a.amap.com/Loca/static/loca-v2/demos/images/construction.png',
|
|
4: 'https://a.amap.com/Loca/static/loca-v2/demos/images/close.png',
|
|
5: 'https://a.amap.com/Loca/static/loca-v2/demos/images/fog.png',
|
|
0: 'https://a.amap.com/Loca/static/loca-v2/demos/images/accident.png',
|
|
};
|
|
layer.setSource(geo);
|
|
layer.setStyle({
|
|
unit: 'px',
|
|
icon: (index, feature) => {
|
|
let data = feature.properties.rawData;
|
|
let url = trafficIcons[data.type % Object.keys(trafficIcons).length];
|
|
return url;
|
|
},
|
|
iconSize: [40,40],
|
|
offset: [0, -40],
|
|
rotation: 0,
|
|
})
|
|
|
|
loca.add(layer);
|
|
map.on('complete', function () {
|
|
setTimeout(function () {
|
|
layer.show();
|
|
layer.addAnimate({
|
|
key: 'offset',
|
|
value: [0, 1],
|
|
easing: 'Linear',
|
|
transform: 500,
|
|
random: true,
|
|
delay: 9000,
|
|
});
|
|
layer.addAnimate({
|
|
key: 'iconSize',
|
|
value: [0, 1],
|
|
easing: 'Linear',
|
|
transform: 500,
|
|
random: true,
|
|
delay: 9000,
|
|
});
|
|
}, 800);
|
|
});
|
|
loca.animate.start();
|
|
|
|
// 拾取测试
|
|
map.on('click', (e) => {
|
|
const feat = layer.queryFeature(e.pixel.toArray());
|
|
// console.log('feat', feat);
|
|
if (feat) {
|
|
layer.setStyle({
|
|
unit: 'px',
|
|
icon: (index, feature) => {
|
|
let data = feature.properties.rawData;
|
|
let url = trafficIcons[data.type % Object.keys(trafficIcons).length];
|
|
return url;
|
|
},
|
|
iconSize: (i, feature) => {
|
|
if (feature === feat) {
|
|
return [60, 60];
|
|
}
|
|
return [40, 40];
|
|
},
|
|
});
|
|
}
|
|
});
|
|
|
|
var dat = new Loca.Dat();
|
|
dat.addLayer(layer);
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |