Bỏ qua

Thay đổi màu sắc tòa nhà dựa trên mức thu phóng

Sử dụng biểu thức interpolate để làm mờ dần lớp tòa nhà và chuyển đổi mượt mà từ màu này sang màu khác.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Change building color based on zoom level</title>
    <meta property="og:description" content="Use the interpolate expression to ease-in the building layer and smoothly fade from one color to the next." />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/trackasia-gl.css" />
    <script src="https://unpkg.com/[email protected]/dist/trackasia-gl.js"></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
        #zoom {
            display: block;
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translate(-50%);
            width: 50%;
            height: 40px;
            padding: 10px;
            border: none;
            border-radius: 3px;
            font-size: 12px;
            text-align: center;
            color: #fff;
            background: #ee8a65;
        }
    </style>
</head>
<body>
<div id="map"></div>
<button id="zoom">Zoom to buildings</button>
<script>
    const map = new trackasiagl.Map({
        container: 'map',
        style: 'https://maps.track-asia.com/styles/v1/streets.json?key=public_key',
        center: {"lat":10.762622,"lng":106.660172},
        zoom: 11
    });

    map.on('load', () => {
        map.setPaintProperty('building', 'fill-color', [
            'interpolate',
            ['exponential', 0.5],
            ['zoom'],
            15,
            '#e2714b',
            22,
            '#eee695'
        ]);

        map.setPaintProperty('building', 'fill-opacity', [
            'interpolate',
            ['exponential', 0.5],
            ['zoom'],
            15,
            0,
            22,
            1
        ]);
    });

    document.getElementById('zoom').addEventListener('click', () => {
        map.zoomTo(16, {duration: 9000});
    });
</script>

</body>
</html>