OpenLayers加载GeoServer发布的服务，基础版。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>GeoServer</title> 5 <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> 6 <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script> 7 </head> 8 <body> 9 <div id="map" class="map"></div> 10 <script> 11 var layers = [ 12 //底图 openstreetmap 13 new ol.layer.Tile({ 14 source: new ol.source.OSM({ 15 }), 16 }), 17 18 //业务图层 19 new ol.layer.Tile({ 20 source: new ol.source.TileWMS({ 21 url: 'http://localhost:8080/geoserver/jdzProject/wms?service=WMS', 22 params: { 23 'LAYERS': ['CHN_adm1', 'jdztif3857'],//数组内为图层名称 24 }, 25 }) 26 27 }) 28 ]; 29 var coor = ol.proj.transform([117.2, 29.3], 'EPSG:4326', 'EPSG:3857');//把EPSG:4326的坐标转换为EPSG:3857的坐标。 30 // var coor1=ol.proj.fromLonLat([117.2, 29.3]);//将坐标从经度/纬度转换为不同的投影(默认为Web Mercator，即'EPSG：3857') 31 var map = new ol.Map({ 32 layers: layers, 33 target: 'map', 34 view: new ol.View({ 35 center: coor, 36 zoom: 12 37 }) 38 }); 39 </script> 40 </body> 41 </html>