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