openlayers入门开发系列之地图切换篇

本篇的重点内容是利用openlayers来加载不同类型地图服务,实现了地图切换功能,效果图如下:

在线天地图影像以及街道图

arcgis server服务影像图

高德街道图

OSM在线地图

geoserver发布的WMS-t瓦片地图

地图切换篇运用到了openlayers的核心类

  • ol.layer.Tile

OpenLayers v4.6.5 API – Class: Tile​openlayers.org

openlayers加载瓦片地图类,关于Tile详情看官方的api说明,里面具有有哪些函数、属性以及事件等等

  • ol.source.XYZ

OpenLayers v4.6.5 API – Class: XYZ​openlayers.org

openlayers的ol.layer.Tile加载瓦片XYZ目录访问数据源,关于ol.source.XYZ详情看官方的api说明,里面具有有哪些函数、属性以及事件等等

  • ol.source.TileArcGISRest

Class: TileArcGISRest​openlayers.org

openlayers加载ArcGIS Rest services地图服务数据源,关于ol.source.TileArcGISRest详情看官方的api说明,里面具有有哪些函数、属性以及事件等等

  • ol.source.ImageArcGISRest

Class: ImageArcGISRest​openlayers.org

openlayers加载ArcGIS Rest services地图服务数据源,关于o.source.ImageArcGISRest详情看官方的api说明,里面具有有哪些函数、属性以及事件等等

  • ol.source.TileWMS

OpenLayers v4.6.5 API – Class: TileWMS​openlayers.org

openlayers加载WMS瓦片服务地图数据源,关于ol.source.TileWMS详情看官方的api说明,里面具有有哪些函数、属性以及事件等等

  • ol.source.OSM

OpenLayers v4.6.5 API – Class: OSM​openlayers.org

openlayers加载OSM在线地图数据源,关于ol.source.OSM详情看官方的api说明,里面具有有哪些函数、属性以及事件等等

地图切换篇核心代码实现过程:

  • 不同类型地图服务配置
    "layers": [
        {"layer_id":"anjiHXMap","server":"geoserver","level":0,"name":"anjiHXMap","visible":true,"format":"image/png","tile_grid":"grid_GDImage","url":"/gwc/service/wms"},
        {"layer_id":"anjiGNMap","server":"geoserver","level":0,"name":"anjiGNMap","visible":true,"format":"image/png","tile_grid":"grid_GDImage","url":"/gwc/service/wms"},
                           
        {"layer_id":"GISSERVER_AnJiMapImg","server":"geoserver","level":0,"name":"AnJiMapImg","visible":true,"format":"image/jpeg","tile_grid":"","url":"/gwc/service/wms"},
        {"layer_id":"GISSERVER_AnJiMapVec","server":"geoserver","level":0,"name":"AnJiMapVec","visible":true,"format":"image/jpeg","tile_grid":"","url":"/gwc/service/wms"},
        {"layer_id":"arcgisserver_World_Imagery","server":"arcgisserver","level":0,"visible":true, "url":"/World_Imagery/MapServer"},
        {"layer_id":"id_osm_1","server":"osm","level":0,"visible":true},
        {"layer_id":"gaodemap_cva","server":"gaode","level":0,"visible":true,"share":true,"url":"http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"},
        {"layer_id":"tmap_vec_c","server":"tianditu","level":0,"visible":true,"share":true,"url":"http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"},
        {"layer_id":"tmap_cva_w","server":"tianditu","level":0,"visible":true,"share":true,"url":"http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}"},
        {"layer_id":"tmap_img_w","server":"tianditu","level":0,"visible":true,"share":true,"swipetype":"right","url":"http://t{0-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}"},
        {"layer_id":"tmap_cia_w","server":"tianditu","level":0,"visible":true,"share":true,"url":"http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}"}
    ]

地图配置参数说明:

server:地图服务类型,目前参数值如下:

geoserver,arcgisserver,osm,gaode,tianditu

分别代表geoserver服务、arcgis server服务、OSM在线地图、高德地图、天地图

  • 地图切换实现核心代码部分:

1.openlayers加载geoserver发布的wms服务:

/**
 * @description 读取geoserver WMS/WMS-C图层
 * @param options
 * @param options.projection {ol.ProjectionLike<ol.proj.Projection>|String|undefined} 坐标系
 * @param options.url {String} 服务地址
 * @param options.tile_grid {ol.tilegrid.TileGrid} 瓦片方案
 * @param options.name {String} 图层名称
 * @param options.version {String} 服务版本1.1.0/1.3.0,默认是1.1.0
 * @param param.format {String} 服务图片格式
 * @static
 * @function
 * @memberof bxmap.reader
 * @retruns {ol.source.TileWMS}
 * @example <caption> 读取WMS图层 </caption>
 * //具体的值需要看geoserver服务提供的能力
 * var layer = bxmap.reader.readGeoserverTileWMS({
 *	projection:"EPSG:3857",
 *	url: "http://demo.opengeo.org/geoserver/wms",
 *	name: "ne:ne_10m_admin_1_states_provinces_lines_shp",
 *	version: "1.3.0",
 *	format: "image/jpeg"
 * });
 * @example <caption> 读取WMS-C图层 </caption>
 * //wms服务和瓦片服务主要区别是:
 * // 1.url wms服务是/wms,瓦片服务是/gwc/service/wms
 * // 2.tilegrid 瓦片服务需要瓦片方案
 * var tilegrid = new ol.tilegrid.TileGrid({
 * 	"origin" : [-2.0037508342787E7,2.0037508342787E7],
 * 	"resolutions" : [156543.03392800014,78271.51696399994,39135.75848200009,...],
 * 	"tileSize" : [256,256]
 * });
 * var layer = bxmap.reader.readGeoserverTileWMS({
 *	projection:"EPSG:3857",
 *	url: "http://demo.opengeo.org/geoserver/gwc/service/wms",
 *	name: "ne:ne_10m_admin_1_states_provinces_lines_shp",
 *	version: "1.3.0",
 *	format: "image/jpeg"
 * });
 */
bxmap.reader.readGeoserverTileWMS = function(options){
	var projection = options["projection"];
	var url = options["url"];
	var tileGrid = options["tile_grid"];
	var layerName = options["name"];
	var version = options["version"];
	var format = options["format"];
	
	var params = {
		"LAYERS" : layerName,
		"TILED" : true,
		"VERSION" : "1.1.0"
	};
	if(version){
		params["VERSION"] = version;
	}
	if(format){
		params["FORMAT"] = format;
	}
	
	//gerserver发布的图层WMS/WMS-C
	var source = new ol.source.TileWMS({
		projection : projection,
		url : url,
		params: params,
		tileGrid : tileGrid
	});

	var layer = new ol.layer.Tile({
		source : source
	});
	
	return layer;
}

2.openlayers加载arcgis server地图服务:

/**
 * @description 读取ArcGIS Server 瓦片服务
 * @param options
 * @param options.projection {ol.ProjectionLike<ol.proj.Projection>|String|undefined} 坐标系
 * @param options.url {String} 服务地址
 * @param options.tile_grid {ol.tilegrid.TileGrid} 瓦片方案
 * @param options.dpi {Number} dpi 默认96
 * @static
 * @function
 * @memberof bxmap.reader
 * @returns {ol.layer.Tile}
 *
 * @example <caption> ArcGIS Server 瓦片服务图层 </caption>
 * var tilegrid = new ol.tilegrid.TileGrid({...});
 * var layer = bxmap.reader.readArcGISTile({
 *	projection:"EPSG:3857",
 *	dpi: 96,
 *	url: ".../Specialty/ESRI_StateCityHighway_USA/MapServer",
 *	tile_grid: tilegrid
 * });
 */
bxmap.reader.readArcGISTile = function(options){
	var projection = options["projection"];
	var url = options["url"];
	var tileGrid = options["tile_grid"];
	var dpi = options["dpi"];
	var format = options["format"];
	var params = {
		"DPI": 96//arcgis瓦片常用96,默认96
	};
	if(dpi){
		params["DPI"] = dpi;
	}
	if(format){
		params["FORMAT"] = format;
	}
	
	var source = new ol.source.TileArcGISRest({
		projection : projection,
		url : url,
		params: params,
		tileGrid : tileGrid
	});
	
	var layer = new ol.layer.Tile({
		source : source
	});

	return layer;
}

/**
 * @description 读取ArcGIS Server xyz访问的瓦片服务
 * @param options
 * @param options.projection {ol.ProjectionLike<ol.proj.Projection>|String|undefined} 坐标系
 * @param options.url {String}
 * @param options.tile_grid {ol.tilegrid.TileGrid}
 * @static
 * @function
 * @memberof bxmap.reader
 * @returns {ol.layer.Tile}
 *
 * @example <caption> ArcGIS Server XYZ 瓦片服务图层 </caption>
 * var layer = bxmap.reader.readArcGISTileXYZ({
 *	projection:"EPSG:3857",
 *	url: ".../MMGK_GH/MapServer/tile/{z}/{y}/{x}"
 * });
 */
bxmap.reader.readArcGISTileXYZ = function(options){
	var projection = options["projection"];
	var url = options["url"];
	var tileGrid = options["tile_grid"];
	var tileSize = tileGrid ? tileGrid.getTileSize() : [256,256]
	
	var z;
	var source =  new ol.source.XYZ({
        projection: projection,
        url: url,
        tileSize: tileSize,
        tileGrid: tileGrid,
        tileUrlFunction: function(tileCoord) {
        	//瓦片256×256时
        	z = tileCoord[0];
        	//瓦片512×512时
        	if(tileSize[0] == 512){
        		z = tileCoord[0] - 1;
        	}
        	return url.replace('{z}', (z).toString())
                            .replace('{x}', tileCoord[1].toString())
                            .replace('{y}', (-tileCoord[2] - 1).toString());
        },
        wrapX: true
     });
	
	var layer = new ol.layer.Tile({
		source : source
	});

	return layer;
}

/**
 * @description 读取ArcGIS Server 动态服务
 * @param options
 * @param options.projection {ol.ProjectionLike<ol.proj.Projection>|String|undefined} 坐标系
 * @param options.url {String} 服务地址
 * @static
 * @function
 * @memberof bxmap.reader
 * @returns {ol.layer.Image}
 *
 * @example <caption> ArcGIS Server 动态服务图层 </caption>
 * var layer = bxmap.reader.readArcGISDynamic({
 *	projection:"EPSG:3857",
 *	url: ".../MMGK_GH/MapServer"
 * });
 */
bxmap.reader.readArcGISDynamic = function(options){
	var projection = options["projection"];
	var url = options["url"];
	
	var source = new ol.source.ImageArcGISRest({
		projection:projection,
        ratio: 1.5,
        params: {},
        url: url
	});
	
	var layer = new ol.layer.Image({
		source : source
	});
	
	return layer;
}

 

3.openlayers加载OSM在线地图服务:

/**
 * @description 读取osm服务
 * @param options
 * @param options.url {String|undefined} url服务地址
 * @static
 * @function
 * @memberof bxmap.reader
 * @returns {ol.layer.Tile}
 *
 * @example <caption> osm 服务图层 </caption>
 * var layer = bxmap.reader.readOSM();
 */
bxmap.reader.readOSM = function(options){
	var url = options["url"];
	var source  =new ol.source.OSM();
	if(url && url != ""){
		source = new ol.source.OSM({
            url: url
        });
	}
	
	var layer = new ol.layer.Tile({
        source: source
    });
	return layer;
}

4.openlayers加载天地图在线地图服务:

/**
 * @description 读取天地图服务
 * @param {Object} data 参考{bxmap.config.MapConfig}.layers[index]
 * @returns {ol.layer.Tile}
 */
bxmap.reader.MapConfigReader.prototype.readTianditu = function(data){
	var url = this._getLayerUrl(data);
	var layer = bxmap.reader.readXYZUrl(url);
	return layer;
}
/**
 * @description 读取以xyz方式瓦片服务
 * @param url {String} 服务地址
 * @static
 * @function
 * @memberof bxmap.reader
 * @returns {ol.layer.Tile}
 *
 * @example <caption> 读取天地图服务 </caption>
 * var layer = bxmap.reader.readXYZUrl("http:// t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}");
 *
 * @example <caption> 读取高德地图服务 </caption>
 * var layer = bxmap.reader.readXYZUrl("http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}");
 */
bxmap.reader.readXYZUrl = function(url){
	var source  = new ol.source.XYZ({
		url : url
	});
	var layer = new ol.layer.Tile({
        source: source
    });
	return layer;
}

 

5..openlayers加载高德在线地图服务:

/**
 * @description 读取高德地图瓦片
 * @param {Object} data 参考{bxmap.config.MapConfig}.layers[index]
 * @returns {ol.layer.Tile}
 */
bxmap.reader.MapConfigReader.prototype.readGaode = function(data){
	var url = this._getLayerUrl(data);
	var layer = bxmap.reader.readXYZUrl(url);
	return layer;
}
/**
 * @description 读取以xyz方式瓦片服务
 * @param url {String} 服务地址
 * @static
 * @function
 * @memberof bxmap.reader
 * @returns {ol.layer.Tile}
 *
 * @example <caption> 读取天地图服务 </caption>
 * var layer = bxmap.reader.readXYZUrl("http:// t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}");
 *
 * @example <caption> 读取高德地图服务 </caption>
 * var layer = bxmap.reader.readXYZUrl("http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}");
 */
bxmap.reader.readXYZUrl = function(url){
	var source  = new ol.source.XYZ({
		url : url
	});
	var layer = new ol.layer.Tile({
        source: source
    });
	return layer;
}

2018年8月9号更新补充:

后面在简书看到一篇文章:ol3加载arcserver rest服务

关于openlayers加载第三方arcserver rest服务的离线瓦片以及加载arcserver rest的本地切片。我把核心的代码也引进来放在这里:

openlayers加载第三方arcserver rest服务的离线瓦片

var projection = ol.proj.get('EPSG:4326');
var tileUrl = "http://222.180.68.94:6080/arcgis/rest/services/wzpsp/wzmap/MapServer/tile/{z}/{y}/{x}";
var origin = [-400.0, 399.9999999999998];
var resolutions = [
        0.0013732916427489112,
        0.0006866458213744556,
        0.0003433229106872278,
        0.0001716614553436139,
        0.00008582953794130404,
        0.00004291595870115493,
        0.000021457979350577466,
        0.000010728989675288733,
        0.000005363305107141452,
        0.000002681652553570726,
        0.000001342016007288278,
    ];
var fullExtent = [107.86896617100007, 30.390792641000075, 108.90726196600006, 31.005204326000076];
var tileGrid = new ol.tilegrid.TileGrid({
        tileSize: 256,
        origin: origin,
        extent: fullExtent,
        resolutions: resolutions
});

new ol.layer.Tile({
                    source: new ol.source.TileImage({
                        projection: projection,
                        tileGrid: tileGrid,
                        tileUrlFunction: function (tileCoord, pixelRatio, proj) {
                            var z = tileCoord[0];
                            var x = tileCoord[1];
                            var y = -tileCoord[2] - 1;
                            return "/testtiles/wz_tiles/"+z + "/" + y +"/" + x +".png";
                        }
                    }),
                })

openlayers加载arcserver rest的本地切片

加载arcserver的本地切片时,其resolutions、origin、extent的设置与上面所述一致。arcserver切片也是xyz排列存储:

//本地瓦片
   tileUrlFunction: function (tileCoord, pixelRatio, proj) {      
          var x = 'C' + padLeft(tileCoord[1], 8, 16);
          var y = 'R' + padLeft(-tileCoord[2] - 1, 8, 16);
          var z = 'L' + padLeft(tileCoord[0], 2, 10);
         var url = 'localtiles/' + z + '/' + z + '/' + y + '/' + x + '.png';
         return url;
   }

//将10进制转16进制,余位补0,凑成ArcServer的切片格式
    function padLeft(val,num ,radix) {
        var str = val.toString(radix || 10);
        return (new Array(num).join('0') + str).slice(-num);
    }

 

作者: GIS之家

GIS之家微信号:gishome;GIS之家拥有自己的GIS开发团队,均是高校GIS研究生,具备丰富的webgis开发项目工作经验,专注以及热爱研究webgis技术的团队

发表评论

电子邮件地址不会被公开。