openLayers叠加geoserverWMS服务

1：代码展示

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 >openlayers title >

< link rel= "stylesheet" href= "https://openlayers.org/en/v4.6.5/css/ol.css" type= "text/css" >

< script src= "https://openlayers.org/en/v4.6.5/build/ol.js" type= "text/javascript" > < / script >

< style >

.map {

height: 100%;

width: 100%;

}

< / style >

head >

< body >

< div id= "map" class= "map" > div >

< script type= "text/javascript" >

var layers = [

new ol. layer. Tile({

source: new ol. source. TileWMS({

url: 'http://192.9.104.68:8080/geoserver/test/wms',

params: {

'LAYERS' : 'test:shengjie', //此处可以是单个图层名称，也可以是图层组名称，或多个图层名称

'TILED' : false

},

serverType: 'geoserver' //服务器类型

})

})

];

var map = new ol. Map({

layers: layers,

target: 'map',

view: new ol. View({

projection: 'EPSG:4326',

center: [ 102.73333, 25.05],

zoom: 7

}),

controls: ol. control. defaults({

attributionOptions: {

collapsible: false

}

})

});

< / script >

body >

html >

2：效果图展示