105_SingleImageWMS.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="ol.js"></script>
    <link rel="stylesheet" href="ol.css">
    <script
        src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL">
    </script>

</head>
<script>
    // : 
    //기본 : Map View Source Layer
    //추가 : 
</script>

<body>
    <!-- 기본틀로 사용하는 양식 -->
    <div id="map" class="map"></div>

    <script>
        var layers = [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            new ol.layer.Image({
                extent: [-13884991, 2870341, -7455066, 6338219],
                source: new ol.source.ImageWMS({
                    url: 'https://ahocevar.com/geoserver/wms',
                    params: {
                        'LAYERS': 'topp:states'
                    },
                    ratio: 1,
                    serverType: 'geoserver'
                })
            })
        ];
        var map = new ol.Map({
            layers: layers,
            target: 'map',
            view: new ol.View({
                center: [-10997148, 4569099],
                zoom: 4
            })
        });
    </script>
</body>

</html>