二次封装OpenLayers加载9种类型的图层

已于 2024-02-21 14:06:43 修改
阅读量494 收藏 8
点赞数 16
分类专栏： OpenLayers 文章标签： 前端 javascript 开发语言 vscode webgl vue
于 2024-02-21 13:52:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27117851/article/details/136203859
版权

文章目录

前言

二次封装OpenLayers加载9种类型的图层，支持天地图图层、矢量图层、贴图图层、wms图层、wmts图层、cog图层、wkt图层、瓦片贴图图层、瓦片图层的加载。

提示：瓦片贴图图层和瓦片图层的封装思路，由五层十五级遥感数据切分而来

一、使用步骤

1.引入库

import { getCogStatistics, getCogBounds } from "./ol-api.js";
import { Stroke, Style, Fill, Circle, Text } from 'ol/style';
import { transformExtent } from 'ol/proj';
import { Vector as VectorLayer, Tile, Image as ImageLayer } from 'ol/layer';
import { Vector as VectorSource, XYZ, ImageStatic, ImageWMS, WMTS } from 'ol/source';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import { LineString, Polygon, MultiLineString } from 'ol/geom'

2.WKT转Feature方法(ol-map.js)

/**WKT转Feature
 * @param {String} wkt
 * @param {String} dataCrs 数据坐标  'EPSG:4326'
 * @param {String} sysCrs  系统坐标系 'EPSG:3857'
 */
export function wktToFeature (wkt, dataCrs, sysCrs) {
	// 解析 wkt字符串
	var feature = new WKT().readFeature(wkt, {
		dataProjection: dataCrs, // 数据坐标
		featureProjection: sysCrs // 系统坐标系
	});
	return feature;
}

3.封装常用样式方法(ol-map.js)

/**创建样式
 * @param {*} feature 
 * @param {*} resolution 
 * @param {*} style 
 * @returns 
 */
export function crtStyle ({
	resolution = 300,
	style = null,
	feature
} = {}) {
	var iconSize = 300 / resolution;
	var featureStyle = null;
	switch (style.type) {
		// 几何控方未选择样式
		case 'unSelected':
			featureStyle = new Style({
				stroke: new Stroke({
					color: '#54FF9F',
					lineDash: [0],
					width: 2
				}),
				fill: new Fill({
					color: 'rgb(158,197,255,0.2)'
				}),
				image: new Circle({
					radius: 6,
					fill: new Fill({
						color: 'blue'
					}),
					stroke: new Stroke({
						color: '#ffffff',
						width: 1.5
					})
				}),
				text: new Text({ // 文本样式
					text: '10',
					offsetX: 0 / resolution,
					offsetY: 0 / resolution,
					textAlign: 'start',
					textBaseline: 'bottom',
					font: iconSize + 'px Calibri,sans-serif',
					fill: new Fill({
						color: '#000'
					}),
					stroke: new Stroke({
						color: '#fff',
						width: 3
					})
				}),
				geometry: function (feature) {
					var center = feature.getGeometry().getCoordinates();
					const top = [center[0], center[1] + 300];
					const bottom = [center[0], center[1] - 300];
					const left = [center[0] - 300, center[1]];
					const right = [center[0] + 300, center[1]];
					const geo = [
						[top, bottom],
						[left, right]
					];
					return new MultiLineString(geo);
				}
			});
			break;
		// 几何控方选择样式
		case 'Selected':
			featureStyle = [new Style({
				stroke: new Stroke({
					color: '#54FF9F',
					lineDash: [0],
					width: 2
				}),
				text: new Text({ // 文本样式
					text: '10',
					offsetX: 0 / resolution,
					offsetY: 0 / resolution,
					textAlign: 'start',
					textBaseline: 'bottom',
					font: iconSize + 'px Calibri,sans-serif',
					fill: new Fill({
						color: '#000'
					}),
					stroke: new Stroke({
						color: '#fff',
						width: 3
					})
				}),
				geometry: function (feature) {
					var center = feature.getGeometry().getCoordinates();
					const top = [center[0], center[1] + 300];
					const bottom = [center[0], center[1] - 300];
					const left = [center[0] - 300, center[1]];
					const right = [center[0] + 300, center[1]];
					return new MultiLineString([
						[top, bottom],
						[left, right]
					]);
				}
			}),
			new Style({
				stroke: new Stroke({
					color: '#54FF9F',
					lineDash: [10, 5],
					width: 2
				}),
				geometry: function (feature) {
					var center = feature.getGeometry().getCoordinates();
					const leftTop = [center[0] - 350, center[1] + 350];
					const leftBottom = [center[0] - 350, center[1] - 350];
					const rightBottom = [center[0] + 350, center[1] - 350];
					const rightTop = [center[0] + 350, center[1] + 350];
					return new Polygon([
						[
							leftTop, leftBottom, rightBottom, rightTop
						]
					]);
				}
			})
			];
			break;
		//绘制样式
		case 'draw':
			featureStyle = new Style({
				stroke: new Stroke({
					color: '#F25521',
					lineDash: [0],
					width: 0.9
				}),
				fill: new Fill({
					color: 'rgb(158,197,255,0.2)'
				}),
				image: new Circle({
					radius: 6,
					fill: new Fill({
						color: 'blue'
					}),
					stroke: new Stroke({
						color: '#ffffff',
						width: 1.5
					})
				})
			});
			break;
		// 查询结果样式
		case 'result':
			featureStyle = new Style({
				stroke: new Stroke({
					color: 'blue',
					lineDash: [0],
					width: 0.9
				}),
				fill: new Fill({
					color: 'rgb(158,197,255,0)'
				}),
				image: new Circle({
					radius: 6,
					fill: new Fill({
						color: 'blue'
					}),
					stroke: new Stroke({
						color: '#ffffff',
						width: 1.5
					})
				}),
				text: new Text({ // 文本样式
					text: feature ? feature.get('name') : '',
					offsetX: 0 / resolution,
					offsetY: 0 / resolution,
					textAlign: 'center',
					font: 'bold 14px 宋体',
					fill: new Fill({
						color: 'black'
					}),
					backgroundFill: new Fill({
						color: "#FDFDFD"
					}),
					placement: "point",
					overflow: true //超出面的部分不显示
				}),
			});
			break;
		// 激活样式
		case 'active':
			featureStyle = new Style({
				fill: new Fill({
					color: '#F3B59D'
				}),
			});
			break;
		//覆盖图层样式
		case 'coverage':
			featureStyle = new Style({
				stroke: new Stroke({
					color: '#E6E6E6',
					lineDash: [0],
					width: 0.9
				}),
				fill: new Fill({
					color: '#e6e6e6b0'
				})
			});
			break;
		//红色样式
		case 'red':
			featureStyle = new Style({
				stroke: new Stroke({
					color: 'red',
					lineDash: [0],
					width: 0.9
				})
			});
			break;
		//通用样式
		case 'normal':
			featureStyle = new Style({
				stroke: new Stroke({
					color: 'blue',
					lineDash: [0],
					width: 0.9
				}),
				fill: new Fill({
					color: 'rgb(158,197,255,0)'
				}),
			});
			break;
		//高亮样式
		case 'highligh':
			featureStyle = new Style({
				stroke: new Stroke({
					color: '#43FF12',
					lineDash: [0],
					width: 0.9
				})
			});
			break;
		case 'GF1':
			featureStyle = new Style({
				stroke: new Stroke({
					color: '#0000FF',
					lineDash: [0],
					width: 0.9
				}),
				fill: new Fill({
					color: 'rgb(158,197,255,0)'
				}),
			});
			break;
		case 'GF6':
			featureStyle = new Style({
				stroke: new Stroke({
					color: '#FFFF00',
					lineDash: [0],
					width: 0.9
				}),
				fill: new Fill({
					color: 'rgb(158,197,255,0)'
				}),
			});
			break;
		case 'Sentinel-2':
			featureStyle = new Style({
				stroke: new Stroke({
					color: '#F24F4E',
					lineDash: [0],
					width: 0.9
				}),
				fill: new Fill({
					color: 'rgb(158,197,255,0)'
				}),
			});
			break;
		case 'LandSat 8':
			featureStyle = new Style({
				stroke: new Stroke({
					color: '#00FFC6',
					lineDash: [0],
					width: 0.9
				}),
				fill: new Fill({
					color: 'rgb(158,197,255,0)'
				}),
			});
			break;
		case 'MODIS':
			featureStyle = new Style({
				stroke: new Stroke({
					color: '#F59B22',
					lineDash: [0],
					width: 0.9
				}),
				fill: new Fill({
					color: 'rgb(158,197,255,0)'
				}),
			});
			break;
		default:
			break;

	}
	return featureStyle;
}

4.封装各个图层加载方法（ol-map.js）

/* 创建天地图图层
*@param：id {string} 【必选】图层标识
*@param：zIndex {string} 【必选】图层层级
*@param：type {string}:【必选】图层类型（影像底图img_w 注记cia_w；矢量vec_w cva_w）
*@param：url {string} 【必选】图层服务地址
*@param：tk {string} 【必选】天地图token
*@param：name {string} 【非必选】图层名称
*@param：dataCrs {string} 【非必选】数据投影
*@param：sysCrs {string} 【非必选】系统投影
*@param：opacity {Number} 0-1 【非必选】透明度
*@param：crossOrigin {string} 【非必选】跨域
*@param：extent {Array} 【非必选】[minlon,minlat,maxlon,maxlat]
*@param：visible {Boolean} 【非必选】是否可见
*return：layer {object}
*/
export function crtTdtLayer ({
	id = '',
	zIndex = 0,
	type = '',
	url = 'http://t{0-7}.tianditu.gov.cn/DataServer',
	tk = '8886226d608f5907e9f245dec2c6d9f9',
	dataCrs = 'EPSG:4326',
	sysCrs = 'EPSG:3857',
	opacity = 1,
	crossOrigin = 'anonymous',
	name = '',
	extent = [-180.0, -90.0, 180.0, 90.0],
	visible = true
} = {}) {
	const layer = new Tile({
		source: new XYZ({
			url: url + '?T=' + type + '&x={x}&y={y}&l={z}&tk=' + tk,
			projection: sysCrs,
			crossOrigin: crossOrigin
		}),
		extent: transformExtent(extent, dataCrs, sysCrs), // 范围
		opacity,
		zIndex,
		name,
		id,
		visible
	});
	return layer;
}
/* 创建矢量图层
 *@param：id {string} 【必选】标识
 *@param：zIndex {string} 【必选】层级
 *@param：name {string} 【非必选】图层名称
 *@param：style {object} 【非必选】图层样式
 *@param：extent {Array} 【非必选】[minlon,minlat,maxlon,maxlat]
 *@param：dataCrs {string} 【非必选】数据投影
 *@param：sysCrs {string} 【非必选】系统投影
 *@param：opacity {Number} 0-1 【非必选】透明度
 *@param：crossOrigin {string} 【非必选】跨域
 *@param：visible {Boolean} 【非必选】是否可见
 *return：layer {object}
 */
export function crtVectorLayer ({
	id = '',
	zIndex = 0,
	name = '',
	style = {
		type: ''
	},
	extent = [-180.0, -90.0, 180.0, 90.0],
	dataCrs = 'EPSG:4326',
	sysCrs = 'EPSG:3857',
	opacity = 1,
	crossOrigin = 'anonymous',
	visible = true	
} = {}) {
	const vectorLayer = new VectorLayer({
		source: new VectorSource({
			wrapX: true,
			crossOrigin: crossOrigin
		}),
		style: function (feature, resolution) {
			return crtStyle({
				resolution,
				style,
				feature
			});
		},
		opacity,
		zIndex,
		name,
		id,
		visible,
		extent: transformExtent(extent, dataCrs, sysCrs), // 范围
	});
	return vectorLayer;
}
/* 创建贴图图层
 *@param：id {string} 【必填】标识
 *@param：zIndex {string} 【必填】层级
 *@param：url {string} 【必填】图片地址
 *@param：extent {Array} 【必选】[minlon,minlat,maxlon,maxlat]
 *@param：name {string} 【非必选】图层名称
 *@param：dataCrs {string} 【非必选】数据投影
 *@param：sysCrs {string} 【非必选】系统投影
 *@param：opacity {Number} 0-1 【非必选】透明度
 *@param：crossOrigin {string} 【非必选】跨域
 *@param：visible {Boolean} 【非必选】是否可见
 *return：layer 
 */
export function crtImageLayer ({
	id = '',
	zIndex = 0,
	url = '',
	extent = [-180.0, -90.0, 180.0, 90.0],
	name='',
	dataCrs = 'EPSG:4326',
	sysCrs = 'EPSG:3857',
	opacity = 1,
	crossOrigin = 'anonymous',
	visible = true	
} = {}) {
	const source = new ImageStatic({
		url,
		proj: sysCrs,
		imageExtent: transformExtent(extent, dataCrs, sysCrs),
		crossOrigin,
	})
	const imageLayer = new ImageLayer({
		source: source,
		zIndex,
		opacity,
		id,
		name,
		visible,
		extent: transformExtent(extent, dataCrs, sysCrs), // 范围
	})
	return imageLayer;
}
/* 创建WMS图层
 *@param：id {string} 【必选】标识
 *@param：zIndex {string} 【必选】层级
 *@param：url {string} 【必选】地址
 *@param：workspaces {string} 【必选】工作空间
 *@param：layerName {string} 【必选】图层名称
 *@param：bbox {string} 【非必选】数据的区域
 *@param：format {string} 【非必选】返回数据格式
 *@param：extent {Array} 【必选】[minlon,minlat,maxlon,maxlat]
 *@param：name {string} 【非必选】图层名称
 *@param：dataCrs {string} 【非必选】数据投影
 *@param：sysCrs {string} 【非必选】系统投影
 *@param：opacity {Number} 0-1 【非必选】透明度
 *@param：crossOrigin {string} 【非必选】跨域
 *@param：visible {Boolean} 【非必选】是否可见
 *return：layer {}
 */
export function crtWMSLayer ({
	id = '',
	zIndex = 0,
	url = '',
	workspaces = '',
	layerName = '',
	bbox = '',
	format = 'image/png',
	opacity = 1,
	crossOrigin = 'anonymous',
	name = '',
	dataCrs = 'EPSG:4326',
	sysCrs = 'EPSG:3857',
	extent = [-180.0, -90.0, 180.0, 90.0],
	visible = true
} = {}) {
	const wmsLayer = new ImageLayer({
		visible: true,
		source: new ImageWMS({
			// 不能设置为0，否则地图不展示。
			ratio: 1,
			url: url,
			params: {
				format,
				layers: workspaces + ':' + layerName,
				bbox,
				exceptions: 'application/vnd.ogc.se_inimage',
				QUERY_LAYERS: workspaces + ':' + layerName
			},
			crossOrigin,
			serverType: 'geoserver'
		}),
		extent: transformExtent(extent, dataCrs, sysCrs), // 范围
		opacity,
		zIndex,
		name,
		id,
		visible
	});
	return wmsLayer;
}

/** 加载wmts图层
 * @param：id {string} 【必选】标识
 * @param：zIndex {string} 【必选】层级
 * @param：url {string} 【必选】地址
 * @param：workspaces {string} 【必选】工作空间
 * @param：layerName {string} 【必选】图层名称
 * @param：format {string} 【非必选】返回数据格式
 * @param：extent {Array} 【必选】[minlon,minlat,maxlon,maxlat]
 * @param：name {string} 【非必选】图层名称
 * @param：dataCrs {string} 【非必选】数据投影
 * @param：sysCrs {string} 【非必选】系统投影
 * @param：opacity {Number} 0-1 【非必选】透明度
 * @param：crossOrigin {string} 【非必选】跨域
 * @param：visible {Boolean} 【非必选】是否可见
 * @returns {object}
 */
export function crtWMTSLayer ({
	id = '',
	zIndex = 0,
	url = '',
	workspaces = '',
	layerName = '',
	format = 'image/png',
	extent = [-180.0, -90.0, 180.0, 90.0],
	name = '',
	opacity = 1,
	crossOrigin = 'anonymous',
	visible = true,
	dataCrs = 'EPSG:4326',
	sysCrs = 'EPSG:3857',
} = {}) {
	// 切片名
	const gridNames = [
		'EPSG:4326:0',
		'EPSG:4326:1',
		'EPSG:4326:2',
		'EPSG:4326:3',
		'EPSG:4326:4',
		'EPSG:4326:5',
		'EPSG:4326:6',
		'EPSG:4326:7',
		'EPSG:4326:8',
		'EPSG:4326:9',
		'EPSG:4326:10',
		'EPSG:4326:11',
		'EPSG:4326:12',
		'EPSG:4326:13',
		'EPSG:4326:14',
		'EPSG:4326:15',
		'EPSG:4326:16',
		'EPSG:4326:17',
		'EPSG:4326:18',
		'EPSG:4326:19'
	];
	// 切片大小
	const resolutions = [
		0.703125,
		0.3515625,
		0.17578125,
		0.087890625,
		0.0439453125,
		0.02197265625,
		0.010986328125,
		0.0054931640625,
		0.00274658203125,
		0.001373291015625,
		0.0006866455078125,
		0.0003433227539062,
		0.0001716613769531,
		0.0000858306884766,
		0.0000429153442383,
		0.0000214576721191,
		0.0000107288360596,
		0.0000053644180298,
		0.0000026822090149,
		0.0000013411045074
	];
	// 设置地图投影
	const projection = new Projection({
		code: dataCrs, // 投影编码
		units: 'degrees',
		axisOrientation: 'neu'
	});

	const NewLayer = new Tile({
		name: name,
		title: name,
		type: 'Group',
		preload: true,
		opacity: opacity,
		source: new WMTS({
			url: url + '/gwc/service/wmts',
			tileGrid: new WMTSTileGrid({
				tileSize: [256, 256],
				extent: extent === undefined ? [-180.0, -90.0, 180.0, 90.0] : extent, // 范围
				origin: [-180.0, 90.0],
				resolutions: resolutions,
				matrixIds: gridNames
			}),
			crossOrigin,
			matrixSet: dataCrs,
			layer: workspaces + ':' + layerName,
			format: format ? format : 'image/gif',//image/png
			projection: projection
		}),
		extent: transformExtent(extent, dataCrs, sysCrs), // 范围
		zIndex: zIndex,
		id,
		visible,
	});

	return NewLayer;
}

/**TiTiler瓦片的方式加载COG
 * @param：id {string} 【必选】标识
 * @param：zIndex {string} 【必选】层级
 * @param：url {string} 【必选】数据地址
 * @param：titilerApi {string} 【必选】titilerApi
 * @param：nodata {Number} 【非必选】无效值
 * @param：name {string} 【非必选】图层名称
 * @param：dataCrs {string} 【非必选】数据投影
 * @param：sysCrs {string} 【非必选】系统投影
 * @param：opacity {Number} 0-1 【非必选】透明度
 * @param：crossOrigin {string} 【非必选】跨域
 * @param：visible {Boolean} 【非必选】是否可见
 * @returns 
 */
export async function crtWebGLTileLayer ({
	// resampling='',
	id,
	zIndex = 0,
	url = '',
	titilerApi = '',
	nodata = 0,
	visible = true,
	dataCrs = 'EPSG:4326',
	sysCrs = 'EPSG:3857',
	crossOrigin = 'anonymous',
	name,
	opacity = 1
} = {}) {
	let rescale = null
	let extent = null
	let source = null
	// TiTiler获取COG统计信息
	await getCogStatistics(url)
		.then((res) => {
			//获取最小最大范围
			rescale = getMinMax(res.data)
		})
	// TiTiler获取COG边界
	await getCogBounds(url)
		.then((res) => {
			extent = res.data.bounds
		})
	source = new XYZ({
		url: `${titilerApi}/cog/tiles/WebMercatorQuad/{z}/{x}/{y}?url=${url}&rescale=${rescale.toString()}&bidx=3&bidx=2&bidx=1&nodata=${nodata}`,//&resampling=${resampling}
		projection: sysCrs,
		crossOrigin
	});
	const layer = new Tile({
		source,
		extent: transformExtent(extent, dataCrs, sysCrs),
		zIndex,
		visible,
		id,
		name,
		opacity
	});
	return layer
}

/**创建wkt图层
 * @param：id {string} 【必选】标识
 * @param：features {Arr} 【必选】wkt数组
 * @param：zIndex {string} 【必选】层级
 * @param：style {object} 【非必选】图层样式
 * @param：name {string} 【非必选】图层名称
 * @param：dataCrs {string} 【非必选】数据投影
 * @param：sysCrs {string} 【非必选】系统投影
 * @param：opacity {Number} 0-1 【非必选】透明度
 * @param：crossOrigin {string} 【非必选】跨域
 * @param：visible {Boolean} 【非必选】是否可见
 */
export function crtWKTLayer ({ 
	id = '',
	features = [],
	zIndex = 0,
	opacity = 1,
	name = '',
	dataCrs = 'EPSG:4326',
	sysCrs = 'EPSG:3857',
	crossOrigin = 'anonymous',
	visible = true,
	style = {
		type: ''
	} }) {
	const wktLayer = crtVectorLayer({ opacity, name, id, zIndex, crossOrigin, style, visible })
	for (let i = 0; i < features.length; i++) {
		const feature = wktToFeature(features[i], dataCrs, sysCrs)
		wktLayer.getSource().addFeature(feature)
	}
	return wktLayer
}

/**创建瓦片图层
 * @param：id {string} 【必选】标识
 * @param：features {Arr} 【必选】wkt数组
 * @param：zIndex {string} 【必选】层级
 * @param：style {object} 【非必选】图层样式
 * @param：name {string} 【非必选】图层名称
 * @param：dataCrs {string} 【非必选】数据投影
 * @param：sysCrs {string} 【非必选】系统投影
 * @param：opacity {Number} 0-1 【非必选】透明度
 * @param：crossOrigin {string} 【非必选】跨域
 * @param：visible {Boolean} 【非必选】是否可见
 */
export function crtWKTLayerTile ({ 
	id = '',
	features = [],
	zIndex = 0,
	opacity = 1,
	name = '',
	dataCrs = 'EPSG:4326',
	sysCrs = 'EPSG:3857',
	crossOrigin = 'anonymous',
	visible = true,
	style = {
		type: ''
	} }) {
	const wktLayer = crtVectorLayer({ opacity, name, id, zIndex, crossOrigin, style, visible })
	for (let i = 0; i < features.length; i++) {
		const feature = wktToFeature(features[i].geom, dataCrs, sysCrs)
		wktLayer.getSource().addFeature(feature)
	}
	return wktLayer
}

5.基于ol-map.js中创建图层的方法，封装所有图层加载方法（ol-map.vue组件）

// 初始化常用图层
const addLayers = async function (layers) {
	let temlayer = null;
	for (let i = 0, len = layers.length; i < len; i++) {
		switch (layers[i].provide) {
			case "tdt":
				temlayer = crtTdtLayer(layers[i]);
				break;
			case "vector":
				temlayer = crtVectorLayer({ ...layers[i]});
				break;
			case "image":
				temlayer = crtImageLayer({ ...layers[i]});
				break;
			case "image-tile":
				let parms = {...layers[i]}
				parms.extent = parms.extent?parms.extent:convertRowColumToLonLat({row:parms.row,col:parms.col,level:parms.level}) //convertRowColumToLonLat({row:parms.row,col:parms.col,level:parms.level})
				temlayer = crtImageLayer({ ...parms});
				break;
			case "wms":
				temlayer = crtWMSLayer({ ...layers[i] });
				break;
			case "wmts":
				temlayer = crtWMTSLayer({ ...layers[i]});
				break;
			case "GeoTIFF":
				temlayer = await crtWebGLTileLayer({ ...layers[i] });
				break;
			case "wkt":
				temlayer = await crtWKTLayer({ ...layers[i] });
				break;
			case "wkt-tile":
			  let wktParms = {...layers[i]}
				wktParms.features = rowColToWkts(wktParms.features)
				temlayer = await crtWKTLayer({ ...wktParms });
				break;
			default:
				break;
		}
		olMap.value.addLayer(temlayer);
	}
	return temlayer
}

6.调用所有图层加载方法（vue文件）

//定义要加载的图层数据
const layers = [
		//天地图图层
		{
			provide: "tdt",
			id: "tdt-vec_w",
			zIndex: 1,
			type: "vec_w",
			url: "http://t{0-7}.tianditu.gov.cn/DataServer"
		},
		//矢量图层
		{
			provide: "vector",
			id: "coverageLayer",
			zIndex: 2
		},
		//贴图图层
		{
			provide: 'image',
			id: "image",
			zIndex: 3,
			url: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
			extent: [4.226393748725525, 42.988428763897645, 7.712216377222916,
				45.132976841676175,],
		},
		//wms图层
		{
			provide: "wms",
			id: "gpdq-DemonstrationAarea",
			zIndex: 4,
			url: 'http://60.10.63.2:18070/gpdq/geoserver/' + "/ksh/wms",
			workspaces: 'ksh',
			layerName: 'gpdq-DemonstrationAarea',
		},
		//wmts图层
		{
			provide: "wmts",
			id: "R-PRO-PuLuoWangSi-202012-10M",
			zIndex: 5,
			url: 'http://124.16.188.132:18090/geoserver/',
			workspaces: 'ksh',
			layerName: 'R-PRO-PuLuoWangSi-202012-10M',
			format: "image/gif",
			extent: [
				4.226393748725525, 42.988428763897645, 7.712216377222916,
				45.132976841676175,
			],
		},
		//cog图层
		{
			provide: 'GeoTIFF',
			id: "titiler",
			zIndex: 6,
			url: 'http://192.168.100.175:18070/Data/COG/GF1_WFV2_E4.0_N42.6_20211130_L1A0006096095-ORTHO-MS-rc.tif',
			titilerApi: 'http://60.10.63.2:18070/gpdq/cogAPI/',
		},
		//wkt图层
		{
			provide: "wkt",
			id: "wkt",
			features: ['POLYGON((30 10, 40 40, 20 40, 10 20, 30 10))'],
			zIndex: 7,
		},
		//瓦片图层
		{
			provide: "wkt-tile",
			id: "wkt-tile",
			features: [{ row: 1166, col: 2679, level: 7 }, { row: 1167, col: 2679, level: 7 }, { row: 1166, col: 2680, level: 7 }, { row: 1167, col: 2680, level: 7 }],
			zIndex: 8,
		},
		//瓦片贴图图层
		{
			provide: "image-tile",
			id: "image-tile",
			url: 'http://124.16.188.132:18090/gpdq-sc/gpdq-tile-data/tile-data/gpdq/gpdqTileOverview?name=GF1_WFV_20200115_L1A00000000_6400_7_1166_2680&sideLength=1000&processType=GF1Normalization',
			row: 1166,
			col: 2680,
			level: 9
		}
	]
//调用加载图层方法，自动添加到地图上
addLayers(layers)

总结

一招制敌，通过一个方法加载常用图层，减少代码量。

鲤鱼跳龙门的鱼
关注
  • 16
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
OpenLayers helloworld 以及加载天地图图层示例
linzi19900517的博客
02-24 1861
Openlayers 教程，主要是平时项目中用的较多的功能方法的总结，可以根据这些文章对 openlayers 进行二次封装提供给自己项目使用。
openlayers 加载天地图示例
02-24
openlayers 加载天地图示例
openlayers加载svg_Openlayers3加载DXF文件作为底图实现
weixin_39793794的博客
12-20 429
Openlayers3是一款优秀的地图渲染JS开源框架，它支持各种通用GIS数据源的地图渲染，官网地址openlayers.org，官网提供了详细的API和案例。本文主要记录本人对于DXF文件作为静态底图进行渲染的实现思路如有类似需求或者更好的解决思路，欢迎交流具体需求：1.根据业务需求我需要加载DXF文件作为底图。2.在其基础上增加业务元素的绘制和编辑。解决方案：方案A：将DXF文件转换为SVG...
openlayers地图封装
qwerewf的博客
08-21 890
近期项目中有用到第三方开源的openlayers地图，经过漫长的查阅文档以及收集资料，整理了一套支持地图轨迹回放、地图marker、 地图popup以及在地图中绘制任意多边形的功能。粗略的封装了一下可能会有一些瑕疵。有瑕疵的地方希望各位小伙伴指点指点。 import "ol/ol.css"; import Map from "ol/Map"; import View from "ol/View"; import OSM from "ol/source/OSM"; import XYZ from "ol/so
openlayers 使用天地图 切换图层
q1025387665a的博客
04-02 1626
前言： 刚开发完一个模块，主要的功能都是由openlayers实现的，写篇博客，一个是为后来者指引条明路（前端的大佬们都只喜欢讲理论，我不喜欢理论，我只喜欢实现的过程，所以这篇文章我只会告诉你怎么实现。同时作者的水平也不高，没有达到做封装的地步，如果你觉得简单，那就再好不过了。），二是给自己做个总结。 看不懂？没关系，我也看不懂，但相信你有过openlayers的使用你应该能知道这个WMTS是什么。他在官网的有些实例加载地图的时候不是等到地图初始化完毕直接渲染的，而是通过一个一个预定义图块进行渲染的。 了
使用openlayers加载离线地图实例
10-06
使用openlayers加载离线地图实例，可通过mui打包成app。简单，易上手
openlayers加载WMS服务
05-31
提供openlayers加载WMS服务的完整示例
OpenLayers实现图层切换控件
10-14
主要为大家详细介绍了OpenLayers实现图层切换控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers加载静态图片地图
10-31
openlayers加载静态图片作为底图，操作图片流畅，可控显示范围和等级
判断前端入参是否空否则提示前端写法
qq_39306234的博客
04-28 229
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 515
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
2024 XYCTF Web 方向 wp 全解
qq_39947980的博客
04-27 980
XYCTF 2024 Web 方向全解
两个前端标签
ma_no_lo的博客
04-24 172
两个前端标签
前端Vue2项目搭建过程
xuemen11的博客
04-25 1213
vue2,vuex,vant组件库
docker部署前端项目（二）遇到的问题
weixin_45379180的博客
04-25 396
原因： 安装docker的时候使用的是 yum -y install docker 命令，这个命令安装的是老版本。报错四：conflicts with file from package docker-common。因为使用 sudo yum install docker （下载到的是旧版）missing signature key 缺少秘钥。yum remove docker 删除docker。1、docker版本号 只有1.13.1。解决：可能是docker 未启用。
vue组件render函数中作用域插槽使用方式
nicecode
04-24 308
父组件使用render函数写的,子组件的书写方式随意,想在父组件中使用子组件时写一个作用域插槽.
uni框架下的前端小知识
最新发布
weixin_53908842的博客
04-30 113
1、direction：移动方向，可选值为all、vertical、horizontal分别表示所有方向、垂直、水平方向。3、out-of-bunds：移动超出界限是的处理策略，可选值为fail, bounce,分别表示失败、回弹。9、 scale-value:缩放的值，当scale为true时有效。7、friction:摩擦系数，取值范围【0，100】6、damping:阻尼系数，取值范围【0，100】8、scale：缩放比例，取值范围【0.5，10】4、x:水平方向的移动距离，单位制px。
openlayers加载geoserver图层
04-04
OpenLayers是一个开源的JavaScript库，用于在Web上创建交互式地图应用程序。它支持加载各种地图图层，包括Geoserver图层。下面是使用OpenLayers加载Geoserver图层的一般步骤： 1. 引入OpenLayers库文件。你可以从OpenLayers官方网站下载最新版本的库文件，并将其引入到你的HTML文件中。 ```html <script src="path/to/openlayers.js"></script> ``` 2. 创建地图容器。在HTML文件中创建一个具有唯一ID的`<div>`元素，用于容纳地图。 ```html <div id="map"></div> ``` 3. 初始化地图对象。在JavaScript代码中，使用OpenLayers的`Map`类来创建一个地图对象，并指定地图容器的ID。 ```javascript var map = new ol.Map({ target: 'map' }); ``` 4. 创建Geoserver图层。使用OpenLayers的`TileLayer`类来创建一个Geoserver图层，并指定Geoserver的图层URL。 ```javascript var geoserverLayer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'http://your-geoserver-url.com/geoserver/wms', params: { 'LAYERS': 'your-layer-name' } }) }); ``` 5. 将Geoserver图层添加到地图中。使用`addLayer`方法将Geoserver图层添加到地图对象中。 ```javascript map.addLayer(geoserverLayer); ``` 6. 设置地图视图。使用`View`类来设置地图的中心点和缩放级别。 ```javascript var view = new ol.View({ center: ol.proj.fromLonLat([longitude, latitude]), zoom: 10 }); map.setView(view); ``` 以上是使用OpenLayers加载Geoserver图层的基本步骤。你可以根据自己的需求进行进一步的定制和配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲤鱼跳龙门的鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值