OpenLayers加载GeoServer发布的WMS服务

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>