在uniapp中试图引入openlayers前端库，我尝试了特别引入多种方法一直不成功，还以为是包的版本问题或者链接响应问题，结果是因为css样式一直设置错误，要把的样式在设置成100vw/100vh或者固定值才能成功显示。
下面放整体代码：

<template>
	<view class="container">
		<view id="olMap" class="olMap">
			<button>点我一下试试</button>
		</view>
	</view>
</template>

<script module="ol" lang="renderjs">
	//视图层renderjs操作，注意此层中不能uniapp提供相关接口。
	// import '../../static/openlayer/v6.6.1-dist/ol.js'不支持此导入方式否则，打包失败
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		mounted() {
			if (typeof window.ol === 'function') {
				this.initAmap()
			} else {
				const script = document.createElement('script')
				script.src = 'static/js/ol.js' //可以通过此方式导入jquery，echart库
				script.onload = this.initAmap.bind(this)
				document.head.appendChild(script)
			}

		},
		methods: {
			initAmap() {
				this.map = new ol.Map({
					layers: [
					    // 默认方法
						// new ol.layer.Tile({
						// 	source: new ol.source.OSM()
						// })
						
						// redis服务器
						// new ol.layer.Tile({
						// 	source: new ol.source.TileWMS({
						// 		url: 'http://10.133.20.9:38080/geoserver/hz/wms',
						// 		params: {
						// 			'FORMAT': 'image/png',
						// 			tiled: true,
						// 			"STYLES": '',
						// 			"LAYERS": 'hz:geotools_coverage',
						// 			"exceptions": 'application/vnd.ogc.se_inimage',
						// 			tilesOrigin: 105.43304443359374 + "," + 32.101189732320925
						// 		}
						// 	})
						// 	//new ol.source.OSM()
						// })
						
						//天地图
						//矢量底图
						new ol.layer.Tile({
							source: new ol.source.XYZ({
							url:'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=053318a29e7ee8be40a0958754cc1827'
							}) 
						}),
						//矢量标记
						new ol.layer.Tile({
							source: new ol.source.XYZ({
							url:'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=053318a29e7ee8be40a0958754cc1827'
							}) 
						}),				
					],
					target: "olMap",
					view: new ol.View({
						// center: ol.proj.fromLonLat([0, 0]),
						projection: "EPSG:4326", //使用这个坐标系
						center: [104, 30], //初始坐标
						zoom: 12,
						minZoom: 10,
						maxZoom: 17
					})
				})
			},
		}
	}
</script>


<style lang="scss">
	@import url("@/static/js/ol.css");

	html,
	body {
		height: 100vh;
		width: 100vw
	}


	#olMap {
		position: relative;
		width: 100vw;
		height: 100vh;
	}
</style>

参考:https://blog.csdn.net/weixin_40043172/article/details/126875789；https://www.bilibili.com/video/BV1Su411q7pz/?spm_id_from=333.788.top_right_bar_window_history.content.click