世界地震分布

使用叠加高亮的效果展示地震分布带

源代码编辑器
复制
运行
还原
          <!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="http://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.Scale,AMap.ToolBar"></script>
    <script src="http://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: 'http://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);

        pl.addAnimate({
          key: 'radius',
          value: [0, 1],
          duration: 500,
          easing: 'Linear',
          transform: 2000,
          random: true,
          delay: 8000,
          yoyo:true,
          repeat: 100000
        });
        var dat = new Loca.Dat();
        dat.addLayer(pl, '点图层');

    </script>
</body>

</html>
        
控制台
清空
示例
中心常见
问题智能
客服