<template>
    <div>
        <div id="mapDiv"></div>
        <button id="btn" @click="btnHandle">切换地图样式</button>
    </div>
</template>

<script>
    //通过修改STYLES属性，进而修改地图服务样式
    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import TileLayer from 'ol/layer/Tile.js';
    import TileWMS from 'ol/source/TileWMS.js';
    
    export default {
        name: "TestOL",
        data(){
            return{
                tileWMSSource:''
            }
        },
        mounted:function(){
            this.tileWMSSource = new TileWMS({
                url: 'http://localhost:8080/geoserver/wzf/wms',
                params: {
                    'LAYERS': 'wzf:wafangdianshi_0',
                    'TILED': true,
                    'STYLES':'wfds_style_GB2312'        //设置初次显示时的样式
                },
                serverType: 'geoserver',
                projection: "EPSG:4326"
            });
            var tileLayer = new TileLayer({
                source: this.tileWMSSource,
            })

            var map = new Map({
                layers: [tileLayer],
                target: 'mapDiv',
                view: new View({
                    center: [122, 40],
                    zoom: 9,
                    projection:"EPSG:4326"       //默认的是 'EPSG:3857'横轴墨卡托投影
                })
            });
        },
        methods:{
            //点击按钮，切换地图样式（已经在Geroserver中存在的style，可以是sld或css）
            btnHandle:function(){
                this.tileWMSSource.updateParams({
                    'STYLES':this.tileWMSSource.getParams().STYLES == 'CSS_Styleing1' ? 'wfds_style_GB2312':'CSS_Styleing1'
                });
            }
        }
    }
</script>

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