OpenLayers5加载Geoserver发布的WMS服务(shp数据)

Geoserver发布的shp数据，发布后利用openlayers查看，显示数据，url如下:
http://localhost:8080/geoserver/wzf/wms?service=WMS&version=1.1.0&request=GetMap&layers=wzf:wafangdianshi_0&styles=&bbox=121.22186889019105,39.319356535867506,122.28293489092715,40.126082759038326&width=768&height=583&srs=EPSG:4326&format=application/openlayers
利用vue-cli搭建工程后，调用MWS服务的代码如下：

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

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

          var HOST =    this.HOST;     //解决Vue跨域问题，具体参考本简书《Vue跨域请求》
            var layers = [
                new ol.layer.Tile({
                    source: new ol.source.TileWMS({
                        url: HOST+'/geoserver/wzf/wms',
                        params: {
                            'LAYERS': 'wzf:wafangdianshi_0',
                            'TILED': true   //是否要将数据制作成切片，省略后返回的是一张完整图。
                        },
                        serverType: 'geoserver',
                        projection: "EPSG:4326"
                    }),
                })
            ];
            var map = new ol.Map({
                layers: layers,
                target: 'mapDiv',
                view: new ol.View({
                    center: [122, 40],
                    zoom: 9,
                    projection:"EPSG:4326"       //默认的是 'EPSG:3857'横轴墨卡托投影
                })
            });
        }
    }
</script>

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