uni-app加载openlayer实现定位（图标和文字）

整合openlayer见上一篇文章…

1、获取用户位置坐标

//获取用户的位置
			getUserLoad() {
				this.loadingShowPage = true;
				this.loadingText = "位置获取中..."
				let that = this;
				uni.getLocation({
					altitude: true,
					success: function(res) {
						that.LonAndLat.push(res.longitude);
						that.LonAndLat.push(res.latitude);
						that.loadingShowPage = false;
						that.loadingText = "";
					},
					fail: function(err) {
					//that.$public 是我封装的一个工具类  这里就是一个提示信息
						that.$public.showToast("位置获取失败", 3000)
						that.loadingShowPage = false;
						that.loadingText = "";
					}
				})
			},

2、添加点击事件

trigger(){
//定义一个标记  判断用户是展开定位还是关闭定位
	this.locationFlag = !this.locationFlag;
	if (this.locationFlag) {
		this.getUserLoad();
	} else {
		this.LonAndLat = [];
	}
}

3、data定义的数据

	//定位坐标数组
	LonAndLat: [],
	//是否显示加载图标
	loadingShowPage: false,
	//加载图标的配置
	loadingText: "",
	//定位标记
	locationFlag: false,

备注：以上代码均在逻辑层

4、template代码

	<view id="olMap" class="olMap" style="height: 100vh;" :LonAndLat="LonAndLat" :change:LonAndLat="ol.location"/>

5、renderjs 代码

	// 接收逻辑层发送的数据
	//这里面的this都是在视图层定义的数据
	location(newValue, oldValue, ownerVm, vm) {
		if (newValue.length == 0) {
			this.map.removeLayer(this.pointLayer); 
		} else {
			this.goToAddress(newValue)
		}
	},
	//根据坐标跳转到指定位置
	goToAddress(val) {
		const view = this.map.getView();
		view.setZoom(16);
		view.animate({
			center: val,
			duration: 50
		});
		this.appendPointImg(val, "您的位置", "图标地址建议使用http 或 https,静态地址貌似有问题");
	},

	//添加要素  点 图标和文字
	appendPointImg(coordinate, text, image) {
		let pointLayer = new ol.layer.Vector({
			source: new ol.source.Vector(),
			name: "yourAddress",
		});
		this.pointLayer = pointLayer;
		this.map.addLayer(pointLayer);
		// 创建feature要素，一个feature就是一个点坐标信息
		const feature = new ol.Feature({
			geometry: new ol.geom.Point(coordinate),
		});
		// 设置要素的图标
		feature.setStyle(
			new ol.style.Style({
				// 设置图片效果
				image: new ol.style.Icon({
				src: image,
				// anchor: [0.5, 0.5],
				scale: 0.4,
			}),
		// 设置图片下面显示字体的样式和内容
		text: new ol.style.Text({
			font: '10px sans-serif', // 设置字体
			maxAngle: 30,
			offsetx: 0, //设置文字偏移量
			offsetY: 25,
			text: text, // 文字描述
			fill: new ol.style.Fill({
			// 字体颜色
			color: '#000',
			}),
			stroke: new ol.style.Stroke({
				// 文字描边
				color: '#fff',
				width: 5,
			}),
		}),
	})
	);
// 要素添加到地图图层上
	this.pointLayer.getSource().addFeature(feature);
},

6、data定义的数据

		map: null,
		vectorSource: null,
		pointLayer: {},