<!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;
}
.amap-maps {
background-color: #000 !important;
}
.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值&plugin=AMap.Scale,AMap.ToolBar"></script>
<script src="https://webapi.amap.com/loca?v=2.0.0&key=您申请的key值"></script>
<script>
var dis = new AMap.DistrictLayer.World({
zIndex: 10,
styles: {
'stroke-width': 0.8,
'fill': '#262626',
'city-stroke': 'rgba(0,0,0,0)',
'county-stroke': 'rgba(0,0,0,0)',
'province-stroke': 'rgba(0,0,0,0)',
'coastline-stroke': 'rgba(0,0,0,0)',
'nation-stroke': 'rgba(0,0,0,0)',
}
});
var map = new AMap.Map('map', {
zoom: 2.48,
showLabel: false,
viewMode: '3D',
center: [18.159446, 6.547895],
mapStyle: 'amap://styles/51ff0c8149c06c5d409eba284ad36734',
layers: [dis],
});
var loca = new Loca.Container({
map,
});
var geo = new Loca.GeoJSONSource({
url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/earthquake.json',
});
var pl = window.pl = new Loca.PointLayer({
zIndex: 10,
blend: 'lighter' //lighter normal
});
var r = 20;
var colors = [
'#F86615',
'#F86615',
'#F86615',
'#F86615',
'#D60352',
];
pl.setSource(geo);
pl.setStyle({
radius: function(i, feature) {
let level = +feature.properties.level;
if (level < 7) {
return level / 2;
}
return 8;
},
color: function(i, feature) {
let data = feature.properties;
let ci = ~~(data.depth / 120 * colors.length) % colors.length;
return colors[ci];
},
borderWidth: 0,
blurRadius: -1,
unit: 'px',
});
loca.add(pl);
var dat = new Loca.Dat();
dat.addLayer(pl, '点图层');
</script>
</body>
</html>