uni-app使用openlayers

第二步
采用renderjs的写法引入ol.js
renderjs 写法自行查看官网介绍
dom结构如：

<view id="olMap" class="olMap" :info='openLayers' :change:info='ol.receiveName' @click="ol.sendMsg"></view>

引入css

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

引入js

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() {
				let that = this;
				
				this.map = new ol.Map({
					layers: [ 
						new ol.layer.Tile({
							source:new  ol.source.OSM()
					})],
					target: "olMap",
					view: new ol.View({
						projection: 'EPSG:3857',
						center:new ol.proj.transform([112.668508, 38.73809], 'EPSG:4326', 'EPSG:3857'),
						//最大显示级数
						// maxZoom: 21,
						//最小显示级数
						// minZoom:10,
						//当前显示级数
						zoom:8,
					}),
					controls: []
				});
			},

切记初始化地图方法需要放在renderjs中处理

openLayers：作为逻辑与renderjs中间传递数据使用，放置逻辑层中

receiveName：是接收逻辑层发送过来的数据
接收数据处理示例：

receiveName(newValue, oldValue, ownerVm, vm) {
	// console.log('newValue', newValue)
	// console.log('oldValue', oldValue)
	// console.log('ownerVm', ownerVm)
	// console.log('vm', vm);
	let layers = mapFuncs.getLayerName(this.map, newValue.type);
	if (layers) {
		if (newValue.checked) {
			layers.setVisible(true);
		} else {
			layers.setVisible(false);
		}
	}
},

sendMsg：是向逻辑层发送数据，以便于在逻辑层进行其它的逻辑处理
发送数据示例：

sendMsg(e, ownerVm) {
	ownerVm.callMethod('receiveRenderData', this.feature)
},

receiveRenderData：为逻辑接收renderjs发送回来的数据
示例：

receiveRenderData(val) {
	console.log('receiveRenderName', val);	
},