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：效果图展示
