Geoserver發(fā)布的tiff數(shù)據(jù)，發(fā)布后利用openlayers查看，顯示數(shù)據(jù)，url如下:
http://localhost:8080/geoserver/wzf/wms?service=WMS&version=1.1.0&request=GetMap&layers=wzf:geotiff_coverage&styles=&bbox=121.49993249855318,39.71067241015389,121.99703071609827,40.09421986587169&width=768&height=592&srs=EPSG:4326&format=application/openlayers

利用vue-cli搭建工程后，調(diào)用MWS服務(wù)的代碼如下：

<template>
    <div id="mapDiv"></div>
</template>

<script>
    import ol from 'openlayers'
    
    export default {
        name: "TestOL2",
        mounted:function(){

            var HOST =  this.HOST;   //解決Vue跨域問題，具體參考本簡書《Vue跨域請求》
            var layers = [
                 new ol.layer.Tile({
                  source: new ol.source.OSM()
                }),
                new ol.layer.Image({
                    source: new ol.source.ImageWMS({
                        url: HOST+'/geoserver/wzf/wms',
                        params: {'LAYERS': 'wzf:geotiff_coverage','TILED': true},
                        ratio: 1,
                        serverType: 'geoserver'
                    })
                })
            ];
            var map = new ol.Map({
                layers: layers,
                target: 'mapDiv',
                view: new ol.View({
                    center: ol.proj.fromLonLat([121.7, 39.9]),
                    zoom: 10
                })
            });
        }
    }
</script>

<style scoped>
    #mapDiv{
        width:1000px;
        height:700px;
        border:1px solid #ff0000;
    }

</style>