uniapp使用openlayers加载地图服务

uniapp使用openlayers加载地图服务

js 复制代码
<!-- 地图组件 -->
<template>
	<view id="myMap" :regionChangeItem="regionChangeItem" :change:regionChangeItem="olRender.selectAdministrativeRegion"
		:tagSelectProduce=tagSelectProduce :tagSelectDistribute="tagSelectDistribute"
		:change:tagSelectProduce="olRender.tagSelectChangeProduce"
		:change:tagSelectDistribute="olRender.tagSelectChangeDistribute" :dropFrameDataProduce="dropFrameDataProduce"
		:dropFrameDataDistribute="dropFrameDataDistribute" :change:dropFrameDataProduce="olRender.loadDropFrameProduce"
		:change:dropFrameDataDistribute="olRender.loadDropFrameDistribute"
		style="width: 100%; height: calc(100vh - 84rpx);"></view>
</template>

<script>
	export default {
		props: {
			// 行政区选择数据
			regionChangeItem: {
				type: Object,
				default: () => ({
					geom: null,
				})
			},
			dropFrameDataProduce: {
				type: Object,
				default: () => ({
					imagesGeom05: [],
					imagesGeom1: [],
					imagesGeom2: [],
					xzqdm: 530000,
				})
			},
			dropFrameDataDistribute: {
				type: Object,
				default: () => ({
					imagesGeom05: [],
					imagesGeom1: [],
					imagesGeom2: [],
					xzqdm: 530000,
				})
			},
			tagSelectProduce: {
				type: Object,
				default: () => ({
					tag05: true,
					tag1: true,
					tag2: true,
				})
			},
			tagSelectDistribute: {
				type: Object,
				default: () => ({
					tag05: true,
					tag1: true,
					tag2: true,
				})
			},
		},
	}
</script>

<script module="olRender" lang="renderjs">
	import source, {
		Vector as sourceVector
	} from 'ol/source';
	import ol, {
		Map,
		Tile,
		View,
		Feature
	} from 'ol';
	import {
		Polygon
	} from 'ol/geom';
	import {
		Style,
		Fill,
		Stroke
	} from 'ol/style';
	import {
		fromLonLat,
		transform,
		Projection
	} from 'ol/proj.js';
	import {
		DragPan,
		MouseWheelZoom,
		defaults as defaultInteractions
	} from 'ol/interaction';
	import {
		Vector,
	} from 'ol/layer';
	import VectorImageLayer from 'ol/layer/Vector';
	import VectorSource from 'ol/source/Vector';
	import WKT from 'ol/format/WKT';
	import GeoJSON from "ol/format/GeoJSON";
	import {
		bbox as bboxStrategy
	} from 'ol/loadingstrategy';
	import {
		MapServiceLoader
	} from '@/map/MapServiceLoader.js';
	import GLOBAL_VARIABLE from '@/public/config/GlobalConfig';
	import {
		eventBus
	} from '@/utils/eventBus.js';
	export default {
		data() {
			return {
				mapId: 'myMap',
				map: null,
				mapServiceLoader: null,
				format: new WKT(),
				xzqId: 'xzq', // 行政区id
				xzqIdYns: 'xzqYns', // 行政区id(省)
				xzqHighlightId: 'xzqHighlight', // 选择后高亮行政区id
				projection: {},
				dropColor: {
					imagesGeom05: {
						strokeColor: 'rgba(175, 175, 175, 0.5)',
						fillColor: 'rgba(147, 250, 194, 0.5)',
					},
					imagesGeom1: {
						strokeColor: 'rgba(175, 175, 175, 0.5)',
						fillColor: 'rgba(147, 240, 250, 0.5)',
					},
					imagesGeom2: {
						strokeColor: 'rgba(175, 175, 175, 0.5)',
						fillColor: 'rgba(255, 196, 196, 0.5)',
					},
				},
				dropColorDistribute: {
					imagesGeom05: {
						strokeColor: 'rgba(152, 230, 0, 0.5)',
						fillColor: 'rgba(76, 230, 0, 0.5)',
					},
					imagesGeom1: {
						strokeColor: 'rgba(152, 230, 0, 0.5)',
						fillColor: 'rgba(152, 230, 0, 0.5)',
					},
					imagesGeom2: {
						strokeColor: 'rgba(230, 230, 0, 0.5)',
						fillColor: 'rgba(230, 230, 0, 0.5)',
					},
				},
				// 影像生产-落图框图层id
				drop05ProduceId: 'drop05_p',
				drop1ProduceId: 'drop1_p',
				drop2ProduceId: 'drop2_p',
				// 影像分发-落图框图层id
				drop05DistributeId: 'drop05_d',
				drop1DistributeId: 'drop1_d',
				drop2DistributeId: 'drop2_d',
				// 影像生产落图框图层
				imagesGeom05LayersProduce: null,
				imagesGeom1LayersProduce: null,
				imagesGeom2LayersProduce: null,
				// 影像分发-落图框图层
				imagesGeom05LayersDistribute: null,
				imagesGeom1LayersDistribute: null,
				imagesGeom2LayersDistribute: null,
			};
		},
		methods: {
			getRegionLayerDataCounty(cqlFilter = 'level in (2)') {
				const workspaceName = GLOBAL_VARIABLE.administrativeConfig.workspaceName;
				const layerName = GLOBAL_VARIABLE.administrativeConfig.layerNameCounty;
				const accessUrl = GLOBAL_VARIABLE.administrativeConfig.accessUrl;
				const optionWms = {
					layerName,
					matrixSet: 'EPSG:4326',
					accessUrl: `${accessUrl}/${workspaceName}/wms`,
					id: this.xzqId,
					serviceType: 'wms',
					otherPara: {
						layerName: layerName,
						matrixSet: 'EPSG:4326',
						format: 'image/png',
						VERSION: '1.1.1',
						LAYERS: workspaceName + ':' + layerName,
						projection: this.projection,
						zIndex: 10,
						opacity: 1,
						exceptions: 'application/vnd.ogc.se_inimage',
						CQL_FILTER: cqlFilter,
					},
					transformationMatrix: '1,2,3 2,4,5 4,6,7',
				};
				const optionWmTs = {
					layerName,
					matrixSet: 'EPSG:4326',
					accessUrl: `${accessUrl}/${workspaceName}/gwc/service/wmts?request=GetCapabilities`,
					id: this.xzqId,
					serviceType: 'wmts',
					transformationMatrix: '1,2,3 2,4,5 4,6,7',
					otherPara: {}
				};
				return optionWmTs;
			},
			innitMap() {
				const projection = new Projection({
					code: 'EPSG:4490',
					units: 'degrees',
					global: false,
				});
				this.projection = projection;
				const view = new View({
					projection,
					enableRotation: false, // 禁止地图旋转
				})
				const map = new Map({
					target: this.mapId,
					layers: [],
					view,
					controls: [],
					interactions: defaultInteractions({
							dragPan: false,
							doubleClickZoom: false, // 取消双击放大功能交互
							mouseWheelZoom: false, // 取消滚动鼠标中间的滑轮交互
							shiftDragZoom: false, // 取消shift+wheel左键拖动交互
						})
						.extend([
							new DragPan({
								condition: function(event) {
									return event.originalEvent.button === 1;
								}
							})
						]),
				});

				// 拖拽移动
				// const dragPan = new DragPan();
				// const mouseWheelZoom = new MouseWheelZoom();
				// // 添加DragPan和MouseWheelZoom交互到地图
				// map.addInteraction(dragPan);
				// map.addInteraction(mouseWheelZoom);

				// 禁用地图旋转
				view.setRotation(0);

				this.map = map;
				this.mapServiceLoader = new MapServiceLoader(map);
				// 加载行政区
				this.mapServiceLoader.loadServices(this.getRegionLayerDataCounty());
				// this.xzqLoadLocal();
				this.map.on('click', (e) => {
					this.handleMapClick(e);
				})
				// 定位到行政区
				this.goToXzqLayer();
			},
			/**
			 * 影像生产-落图框显示标签改变
			 */
			tagSelectChangeProduce(e) {
				this.imagesGeom05LayersProduce && this.imagesGeom05LayersProduce.setVisible(e.tag05);
				this.imagesGeom1LayersProduce && this.imagesGeom1LayersProduce.setVisible(e.tag1);
				this.imagesGeom2LayersProduce && this.imagesGeom2LayersProduce.setVisible(e.tag2);
			},
			/**
			 * 影像分发-落图框显示标签改变
			 */
			tagSelectChangeDistribute(e) {
				this.imagesGeom05LayersDistribute && this.imagesGeom05LayersDistribute.setVisible(e.tag05);
				this.imagesGeom1LayersDistribute && this.imagesGeom1LayersDistribute.setVisible(e.tag1);
				this.imagesGeom2LayersDistribute && this.imagesGeom2LayersDistribute.setVisible(e.tag2);
			},
			/**
			 * 影像分发-加载落图框
			 */
			loadDropFrameDistribute({
				imagesGeom05,
				imagesGeom1,
				imagesGeom2,
				xzqdm,
			}) {
				const wktFormat = this.format;
				const that = this;
				// 移除之前的高亮图层
				if (this.mapServiceLoader) {
					this.mapServiceLoader.removeLayerBiyId(this.drop05DistributeId);
					this.mapServiceLoader.removeLayerBiyId(this.drop1DistributeId);
					this.mapServiceLoader.removeLayerBiyId(this.drop2DistributeId);
				}
				this.imagesGeom05LayersDistribute = null;
				this.imagesGeom1LayersDistribute = null;
				this.imagesGeom2LayersDistribute = null;

				if (imagesGeom05.length) {
					let features = [];
					imagesGeom05.forEach((geom) => {
						features = [...features, ...wktFormat.readFeatures(geom)];
					});
					features.forEach((f) => {
						f.setProperties({
							cLayerStyleType: 'type1',
							type: that.drop05DistributeId
						});
					});
					const vectorSource = new VectorSource({
						features: [...features],
						strategy: bboxStrategy
					});
					const vectorLayer = new VectorImageLayer({
						source: vectorSource,
						zIndex: 300,
						style(feature) {
							let strokeWidth = 1;
							return new Style({
								fill: new Fill({
									color: that.dropColorDistribute.imagesGeom05.fillColor,
								}),
								stroke: new Stroke({
									color: that.dropColorDistribute.imagesGeom05.strokeColor,
									width: strokeWidth,
								}),
							});
						},
					});
					vectorLayer.id = this.drop05DistributeId;
					this.imagesGeom05LayersDistribute = vectorLayer;
					// vectorLayer.setVisible(false);
					this.map.addLayer(vectorLayer);
				}
				if (imagesGeom1.length) {
					let features = [];
					imagesGeom1.forEach((geom) => {
						features = [...features, ...wktFormat.readFeatures(geom)];
					});
					features.forEach((f) => {
						f.setProperties({
							cLayerStyleType: 'type1',
							type: that.drop1DistributeId
						});
					});
					const vectorSource = new VectorSource({
						features: [...features],
						strategy: bboxStrategy
					});
					const vectorLayer = new VectorImageLayer({
						source: vectorSource,
						zIndex: 200,
						style(feature) {
							let strokeWidth = 1;
							return new Style({
								fill: new Fill({
									color: that.dropColorDistribute.imagesGeom1.fillColor,
								}),
								stroke: new Stroke({
									color: that.dropColorDistribute.imagesGeom1.strokeColor,
									width: strokeWidth,
								}),
							});
						},
					});
					vectorLayer.id = this.drop1DistributeId;
					this.imagesGeom1LayersDistribute = vectorLayer;
					// vectorLayer.setVisible(false);
					this.map.addLayer(vectorLayer);
				}
				if (imagesGeom2.length) {
					let features = [];
					imagesGeom2.forEach((geom) => {
						features = [...features, ...wktFormat.readFeatures(geom)];
					});
					features.forEach((f) => {
						f.setProperties({
							cLayerStyleType: 'type1',
							type: that.drop2DistributeId
						});
					});
					const vectorSource = new VectorSource({
						features: [...features],
						strategy: bboxStrategy
					});
					const vectorLayer = new VectorImageLayer({
						source: vectorSource,
						zIndex: 100,
						style(feature) {
							let strokeWidth = 1;
							return new Style({
								fill: new Fill({
									color: that.dropColorDistribute.imagesGeom2.fillColor,
								}),
								stroke: new Stroke({
									color: that.dropColorDistribute.imagesGeom2.strokeColor,
									width: strokeWidth,
								}),
							});
						},
					});
					vectorLayer.id = this.drop2DistributeId;
					this.imagesGeom2LayersDistribute = vectorLayer;
					// vectorLayer.setVisible(false);
					this.map.addLayer(vectorLayer);
				}
				if (xzqdm == 530000) {
					const myset = setTimeout(function() {
						that.gotoDropLayers([this.drop05DistributeId, this.drop1DistributeId, this
							.drop2DistributeId
						]);
						clearTimeout(myset)
					}, 200);
				}
			},
			/**
			 * 影像生产-加载图框
			 */
			loadDropFrameProduce({
				imagesGeom05,
				imagesGeom1,
				imagesGeom2,
				xzqdm,
			}) {
				const wktFormat = this.format;
				const that = this;
				// 移除之前的高亮图层
				if (this.mapServiceLoader) {
					this.mapServiceLoader.removeLayerBiyId(this.drop05ProduceId);
					this.mapServiceLoader.removeLayerBiyId(this.drop1ProduceId);
					this.mapServiceLoader.removeLayerBiyId(this.drop2ProduceId);
				}

				this.imagesGeom05LayersProduce = null;
				this.imagesGeom1LayersProduce = null;
				this.imagesGeom2LayersProduce = null;

				if (imagesGeom05.length) {
					let features = [];
					imagesGeom05.forEach((geom) => {
						features = [...features, ...wktFormat.readFeatures(geom)];
					});
					features.forEach((f) => {
						f.setProperties({
							cLayerStyleType: 'type1',
							type: that.drop05ProduceId
						});
					});
					const vectorSource = new VectorSource({
						features: [...features],
						strategy: bboxStrategy
					});
					const vectorLayer = new VectorImageLayer({
						source: vectorSource,
						zIndex: 300,
						style(feature) {
							let strokeWidth = 1;
							return new Style({
								fill: new Fill({
									color: that.dropColor.imagesGeom05.fillColor,
								}),
								stroke: new Stroke({
									color: that.dropColor.imagesGeom05.strokeColor,
									width: strokeWidth,
								}),
							});
						},
					});
					vectorLayer.id = this.drop05ProduceId;
					this.imagesGeom05LayersProduce = vectorLayer;
					this.map.addLayer(vectorLayer);
				}
				if (imagesGeom1.length) {
					let features = [];
					imagesGeom1.forEach((geom) => {
						features = [...features, ...wktFormat.readFeatures(geom)];
					});
					features.forEach((f) => {
						f.setProperties({
							cLayerStyleType: 'type1',
							type: that.drop1ProduceId
						});
					});
					const vectorSource = new VectorSource({
						features: [...features],
						strategy: bboxStrategy
					});
					const vectorLayer = new VectorImageLayer({
						source: vectorSource,
						zIndex: 200,
						style(feature) {
							let strokeWidth = 1;
							return new Style({
								fill: new Fill({
									color: that.dropColor.imagesGeom1.fillColor,
								}),
								stroke: new Stroke({
									color: that.dropColor.imagesGeom1.strokeColor,
									width: strokeWidth,
								}),
							});
						},
					});
					vectorLayer.id = this.drop1ProduceId
					this.imagesGeom1LayersProduce = vectorLayer;
					this.map.addLayer(vectorLayer);
				}
				if (imagesGeom2.length) {
					let features = [];
					imagesGeom2.forEach((geom) => {
						features = [...features, ...wktFormat.readFeatures(geom)];
					});
					features.forEach((f) => {
						f.setProperties({
							cLayerStyleType: 'type1',
							type: that.drop2ProduceId
						});
					});
					const vectorSource = new VectorSource({
						features: [...features],
						strategy: bboxStrategy
					});
					const vectorLayer = new VectorImageLayer({
						source: vectorSource,
						zIndex: 100,
						style(feature) {
							let strokeWidth = 1;
							return new Style({
								fill: new Fill({
									color: that.dropColor.imagesGeom2.fillColor,
								}),
								stroke: new Stroke({
									color: that.dropColor.imagesGeom2.strokeColor,
									width: strokeWidth,
								}),
							});
						},
					});
					vectorLayer.id = this.drop2ProduceId;
					this.imagesGeom2LayersProduce = vectorLayer;
					this.map.addLayer(vectorLayer);
				}
				if (xzqdm == 530000) {
					const myset = setTimeout(function() {
						that.gotoDropLayers([this.drop05ProduceId, this.drop1ProduceId, this.drop2ProduceId]);
						clearTimeout(myset)
					}, 200);
				}
			},
			/**定位到行政区
			 */
			goToXzqLayer() {
				// console.log('定位到行政区');
				const extents = [97.52736740199998, 21.142140719999986, 106.19671131500002, 29.22577058899998];
				this.map.getView().fit(extents);
			},
			/**
			 * 开关图层显示
			 */
			setLayerVisible(layerId, visible) {
				const layer = this.mapServiceLoader.findLayerById(this.xzqId);
				if (layer) {
					layer.setVisible(visible);
				}
			},
			/**
			 * 根据id定位到图层
			 */
			positioningLayersById(layerId, isVisible = true) {
				const that = this;
				const layer = this.mapServiceLoader.findLayerById(layerId);
				if (layer) {
					const extents = layer.getSource().getExtent();
					this.map.getView().fit(extents, {
						duration: 1000
					});
				}
				const myset = setTimeout(function() {
					// 关闭主图
					that.setLayerVisible(that.xzqId, isVisible);
					clearTimeout(myset)
				}, 1000);
			},
			/**
			 * 服务-切换地图到选择行政区上
			 */
			selectAtiveRegion({
				geom,
				xzqdm,
				children,
			}) {
				const that = this;
				// console.log('服务-切换地图到选择行政区上', xzqdm);
				const cqlFilter = `xzqdm = '${xzqdm}'`;
				// 加载行政区
				this.mapServiceLoader.loadServices(this.getRegionLayerDataCounty(cqlFilter));
			},
			/**
			 * 定位到落图框
			 */
			gotoDropLayers(ids = [this.drop05ProduceId, this.drop1ProduceId, this.drop2ProduceId, this.drop05DistributeId,
				this.drop1DistributeId, this.drop2DistributeId
			]) {
				const allLayers = this.map.getLayers().getArray();
				let extents = [];

				allLayers.forEach((o, i) => {
					if (ids.includes(o['id'])) {
						extents = [...extents, ...o.getSource().getExtent()]
					}
				});
				if (extents.length) {
					this.map.getView().fit(extents, {
						duration: 500
					});
				} else {
					// 没有落图框,定位到行政区
					this.goToXzqLayer();
				}
			},
			/**
			 * 行政区地图加载本地json
			 */
			xzqLoadLocal() {
				// 创建 GeoJSON 图层
				const geoJSONLayer = new VectorImageLayer({
					source: new VectorSource({
						url: "../../static/XZQ_2K.json",
						format: new GeoJSON()
					}),
					style: new Style({
						stroke: new Stroke({
							color: "#ff0000", // 描边红色
							width: 2 // 设置描边宽度为 1 像素
						}),
						fill: new Fill({
							color: "#ff000020" // 填充红色透明
						})
					})
				});
				console.log('geoJSONLayer', geoJSONLayer.getSource().getFeatures());
				geoJSONLayer.id = this.xzqId;
				geoJSONLayer.setVisible(false);
				this.map.addLayer(geoJSONLayer);
			},
			/**
			 * 行政区geom-切换地图到选择行政区上
			 */
			selectAdministrativeRegion({
				geom,
				xzqdm,
				children,
			}) {
				const isYns = xzqdm == 530000;
				let isYnsTrue = null;
				if (this.mapServiceLoader) {
					// 省显示地图是否存在
					isYnsTrue = this.mapServiceLoader.layersIsTrueById(this.xzqIdYns);
					// 移除之前的高亮图层
					this.mapServiceLoader.removeLayerBiyId(this.xzqHighlightId);
					if (isYnsTrue) {
						this.mapServiceLoader.setVisibleById(this.xzqIdYns, isYns);
					}
				}

				if (!isYnsTrue || !isYns) {
					if (!geom) {
						return;
					}
					const wktFormat = this.format;
					let features = [];
					if (children && children.length) {
						children.forEach((c) => {
							features = [...features, ...wktFormat.readFeatures(c.geom)];
						});
					} else {
						features = wktFormat.readFeatures(geom);
					}

					features.forEach((f) => {
						f.setProperties({
							cLayerStyleType: 'type1',
							type: 'region'
						});
					});
					const vectorSource = new VectorSource({
						features: [...features],
						strategy: bboxStrategy
					});

					const vectorLayer = new VectorImageLayer({
						source: vectorSource,
						zIndex: 10,
						style(feature) {
							let strokeWidth = 2;
							return new Style({
								fill: new Fill({
									color: '#E1F0FF',
								}),
								stroke: new Stroke({
									color: '#FFFFFF',
									width: strokeWidth,
								}),
							});
						},
					});
					vectorLayer.id = isYns ? this.xzqIdYns : this.xzqHighlightId;

					// this.mapServiceLoader.setVisibleById(this.xzqIdYns, isYns);
					this.map.addLayer(vectorLayer);
				}
				// 	// 移除之前的高亮图层
				// 	// this.mapServiceLoader && this.mapServiceLoader.removeLayerBiyId(this.xzqHighlightId);
				// 	// this.setLayerVisible(this.xzqId, true);
				// 	// this.goToXzqLayer();
				// if (xzqdm === 530000) {
				// 	this.map
				// }
				// 定位到行政区
				this.positioningLayersById(this.xzqHighlightId, false);
			},
			/**
			 * 影像点击事件
			 * 
			 * @param {Object} event
			 */
			handleMapClick(event) {
				console.log('点击:', event, event.coordinate);
			},
			/**
			 * 过滤行政区显示
			 */
			filterRegions() {
				console.log('过滤行政区显示')
			}
		},
		mounted() {
			this.innitMap();
		},
		onUnload() {
			// 移除地图实例
			this.map.dispose();
		}
	}
</script>

<style lang="scss" scoped>
	#myMap {
		padding: 0 $padding-base;
		margin-top: 30rpx;
	}
</style>

MapServiceLoader.js

js 复制代码
import {
	Map
} from 'ol';
import {
	Tile as TileLayer,
	Vector as VectorLayer
} from 'ol/layer';
import {
	OSM,
	XYZ,
	Vector as VectorSource,
	ImageWMS,
	TileWMS,
	WMTS as sourceWMTS,
} from 'ol/source';
import {
	optionsFromCapabilities
} from 'ol/source/WMTS';
import {
	WMTS as tilegridWMTS
} from 'ol/tilegrid';

import {
	get as getProjection
} from 'ol/proj';
import {
	WMTSCapabilities
} from 'ol/format';

export class MapServiceLoader {
	map;

	wmtsOptionss = [];

	constructor(map) {
		this.map = map;
	}

	/**
	 * 获取当前的地图
	 */
	getMap() {
		return this.map;
	}

	/**
	 * 根据id查找图层
	 */
	findLayerById(id) {
		const layers = this.map.getLayers().getArray();
		// 使用自定义 id 属性查找图层
		return layers.find((layer) => layer.id === id);
	}


	/**
	 * 根据id移除图层
	 */
	removeLayerBiyId(layerId = null) {
		if (layerId) {
			const layer = this.findLayerById(layerId);
			if (layer) {
				this.map.removeLayer(layer);
			}
		}
	}

	/**
	 * 根据id显示或隐藏图层
	 */
	setVisibleById(layerId, isShow = true) {
		const layer = this.findLayerById(layerId);
		if (layer) {
			layer.setVisible(isShow);
		}
	}

	/**
	 * 根据id判断图层是否存在
	 */
	layersIsTrueById(layerId) {
		let isTrue = false;
		const layer = this.findLayerById(layerId);
		if (layer) {
			isTrue = true;
		}
		return isTrue;
	}

	async getWMTSLayerConfig({
		layerName,
		matrixSet,
		accessUrl,
		serviceType,
	}) {
		const response = await fetch(accessUrl);
		const text = await response.text();
		const parser = new WMTSCapabilities();
		let wmtsCapabilities = parser.read(text);
		const options = optionsFromCapabilities(wmtsCapabilities, {
			layer: layerName,
			matrixSet,
		});

		this.wmtsOptionss.push({
			url: accessUrl,
			ops: wmtsCapabilities
		});
		return options;
	}

	/**
	 * @param {Object} serviceConfigs
	 * 
	 */
	async loadServices(serviceConfigs) {
		const {
			layerName,
			matrixSet,
			accessUrl,
			serviceType,
			otherPara,
		} = serviceConfigs;
		let layer = null;
		if (serviceType == 'wmts') {
			const options = await this.getWMTSLayerConfig(serviceConfigs);
			layer = new TileLayer({
				source: new sourceWMTS(options)
			})
		} else if (serviceType == 'wms') {
			console.log('otherPara', otherPara);
			const source = new TileWMS({
				url: accessUrl,
				params: {
					...otherPara
				},
			});
			layer = new TileLayer({
				source,
			});
		} else {
			console.error('serviceType类型错误')
		}
		this.removeLayerBiyId(serviceConfigs.id);
		console.log('layer', layer);
		layer.id = serviceConfigs.id;
		this.map.addLayer(layer);
	}
}

ol依赖放到跟目录

相关推荐
阿伟来咯~8 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端13 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱16 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai25 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨26 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking1 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js