向多边形添加图案

向多边形添加图案;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>向多边形添加图案</title>
    <meta property="og:description" content="向多边形添加图案" />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
        center: [-87.6321, 41.8362],
        zoom: 9.5
    });

    map.on('load', () => {
        // 加载图像，会在样式中用作图案
        map.loadImage(
            'https://maplibre.org/maplibre-gl-js/docs/assets/radar.gif',
            (error, image) => {
                if (error) throw error;

                // 将图像添加到样式的图像数组中
                map.addImage('pattern', image);

                // 添加GeoJSON源 
                map.addSource('chicago', {
                    'type': 'geojson',
                    'data': {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'Polygon',
                            'coordinates': [
                                [
                                    [-87.6688, 41.9406],
                                    [-87.6698, 41.7382],
                                    [-87.5683, 41.7424],
                                    [-87.5667, 41.9406],
                                    [-87.6688, 41.9406]
                                ]
                            ]
                        }
                    }
                });

                // 添加填充图层
                map.addLayer({
                    'id': 'filled-pattern',
                    'type': 'fill',
                    'source': 'chicago',
                    'paint': {
                        'fill-pattern': 'pattern'
                    }
                });
            }
        );
    });
</script>
</body>
</html>