ol+天地图+geoserver_使用openlayers 3 在线加载天地图及GeoServer发布的地图

你好，要使用OpenLayers 3加载天地图和GeoServer发布的地图，可以按照以下步骤进行：

1. 引入OpenLayers库和CSS文件

<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>

2. 创建地图容器和视图

<div id="map" class="map"></div>
<script>
  var map = new ol.Map({
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  });
</script>

3. 加载天地图

天地图是由国家测绘局提供的在线地图服务，可以通过以下URL加载：

var tdtUrl = 'http://{1-4}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}';
var tdtLayer = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: tdtUrl
  })
});
map.addLayer(tdtLayer);

其中，`{1-4}`表示使用1到4个子域名来加载地图，`vec_w`表示加载基础矢量地图，可以根据需要修改。

4. 加载GeoServer发布的地图

GeoServer是一个开源的地理信息系统服务器，可以发布各种类型的地图服务。要加载GeoServer发布的地图，可以使用以下代码：

var geoserverUrl = 'http://localhost:8080/geoserver/wms';
var layers = new ol.layer.Tile({
  source: new ol.source.TileWMS({
    url: geoserverUrl,
    params: {'LAYERS': 'workspace:layername'},
    serverType: 'geoserver'
  })
});
map.addLayer(layers);

其中，`workspace`表示工作区名称，`layername`表示图层名称，可以根据需要修改。

以上就是使用OpenLayers 3在线加载天地图和GeoServer发布的地图的基本步骤。需要注意的是，天地图和GeoServer发布的地图都需要在网络环境下才能加载成功。