我使用的是geoserver地图服务，有个项目需要将矢量地图和卫星地图一起显示出来，网上查了一遍，后自己又研究了下，现总结出来。 openlayers3是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。 代码如下：
var format = 'image/png'; var projection = new ol.proj.Projection({ code : 'EPSG:3857', units : 'm', axisOrientation : 'neu' }); var tiledParams = { LAYERS : 'gmws:china_province', //矢量图层名称 FORMAT : format, VERSION : '1.1.1', STYLES : '', }; var tiled = new ol.layer.Image({ opacity : 1, visible : true, source : new ol.source.ImageWMS({ url : 'http://127.0.0.1:8080/geoserver/gmws/wms', //矢量地图url路径 params : tiledParams, }) }); var gr = new ol.tilegrid.TileGrid({ origin : [ -180.0,-90.0, 180, 90 ], resolutions : [156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, 152.87405654907226, 76.43702827453613, 38.218514137268066, 19.109257068634033, 9.554628534317017, 4.777314267158508] //卫星地图显示等级：0-15级（web墨卡托投影方式） }); var sichuanTifLayer = new ol.layer.Tile({ source : new ol.source.TileWMS({ url : 'http://127.0.0.1:8080/geoserver/gwc/service/wms', //卫星地图url路径 params : { 'FORMAT' : 'image/png', 'VERSION' : '1.1.1', 'SRS' : 'EPSG:3857', 'tiled' : true, 'LAYERS' : 'gmws:sichuan_province', }, tileGrid : gr, serverType: 'geoserver' }) }); map = new ol.Map({ interactions : ol.interaction.defaults({ doubleClickZoom : false, }), view : new ol.View({ projection : projection, center : ol.proj.transform([ 107.1, 35.82 ], 'EPSG:4326', 'EPSG:3857'), zoom : 8, minZoom : 3, maxZoom : 13 }), layers : [ sichuanTifLayer, tiled ],//注意：矢量地图不要填充色，不然会遮住卫星地图（两个图层可以交换顺序） target : 'map' });显示效果如下：
单独控制卫星地图显示/隐藏：
sichuanTifLayer.setVisible(false); //true/false