uniapp 整合 OpenLayers - 加载Geojson数据(在线、离线、点选、点选位置导航)

效果如下：

Geojson数据是矢量数据，主要是点、线、面数据集合

Geojson数据获取：DataV.GeoAtlas地理小工具系列

实现代码如下：

<template>
	<!-- 监听变量 operation 的变化，operation 发生改变时，调用 openlayers 模块的 loadOperation 方法 -->
	<view :operation="valueChangeSign" :change:operation="ol.valueChange" type="default"></view>
	<view class="map" id="map">
		<!--顶部搜索框-->
		<view class="search-bar">
			<!--图标-->
			<uni-icons class="search-icon" :type="iconType" size="30"></uni-icons>
			<!--搜索框-->
			<input v-model="searchQuery"
			@focus="handleFocus" 
			@blur="handleBlur"
			@input="handleInput"
			class="search-input"
			placeholder="请输入内容"
			@keyup.enter="onSearch"/>
		</view>
		<!--右侧按钮-->
		<view class="right-vertical-button">
			<!-- 切换图层按钮 -->
			<button  @click="switchLayer()" class="btn" type="primary">{
  
  {baseLayerTitle}}</button>
			<!-- 全图按钮 -->
			<button @click="allMap()" class="btn" type="primary">全图</button>
			<!-- 导航按钮 
			<button @click="navigation()" class="btn" type="primary">导航</button>
			-->
			<!-- 要素图层 -->
			<button @click="geojson()" class="btn" type="primary">{
  
  {geojsonTitle}}</button>
		</view>
		<!--底部定位-->
		<view class="bottom-horizontal-button">
			<button @click="location()" class="btn" type="primary">定位</button>
		</view>
		<!--点选弹窗-->
		<div id="overlay-popup" class="overlay-popup"></div>
	</view>
	
</template>
 
<!-- 逻辑层 -->
<script>
import {wgs84_to_gcj02} from '@/utils/coordinate_transformation.js'

	export default {
		name:"map",
		data(){
			return {
				valueChangeSign:{
					latitude:null,//当前位置的纬度
					longitude:null,//当前位置的经度
					switchLayerFlag:false,// 切换图层标记
					switchGeoJsonFlag:false,// 切换要素标记
					flag:false,// 标记
					type:""// 类型
				},
				map:null,
				total:0,
				baseLayerTitle:"影像",
				geojsonTitle:"要素",
				selfLocation:{
					longitude:null,//当前位置的经度
					latitude:null//当前位置的纬度
				},
				// 要去到地坐标点
				toposition: {
					lng: null,//经度
					lat: null//纬度
				},
				// 要去到地坐标点-默认经纬度
				/*toposition: {
					lng: 125.334145,//经度
					lat: 43.960569//纬度
				},*/
				searchQuery:"",// 搜素框内容
				iconType:"search",//图标类型
			}
		},
		methods:{
			// 获取焦点时触发
			handleFocus(event) {
			  // 处理获取焦点的逻辑
			  this.iconType = "left";
			},
			// 失去焦点时触发
			handleBlur(event) {
			  // 处理失去焦点的逻辑
			  this.iconType = "search";
			},
			handleInput(event){// 监听输入框内容
				// 你可以在这里处理输入逻辑
				console.log('输入框输入内容:', this.searchQuery);
			},
			/**
			 * 点击事件-切换底图
			 */
			switchLayer(){
				this.valueChangeSign.type = "LAYER_TITLE"
				this.valueChangeSign.switchLayerFlag = !this.valueChangeSign.switchLayerFlag;
				if(this.valueChangeSign.switchLayerFlag){
					this.baseLayerTitle = "电子"
				}else{
					this.baseLayerTitle = "影像"
				}
			},
			/**
			 * 点击事件-全图
			 * */
			 allMap(){
				this.valueChangeSign.type= "ALL_MAP"
				this.valueChangeSign.flag = !this.valueChangeSign.flag
			 },
			 /**
			  * 获取本机经纬度方法
			  * */
			  mySelfLocation(){
				// 获取经纬度
				uni.getLocation({
					type: 'wgs84 ',
					success: (res) => {
						//console.log(res)
						this.selfLocation.latitude = res.latitude//当前位置的纬度
						this.selfLocation.longitude = res.longitude//当前位置的经度
					}
				});  
			  },
			 /**
			  * 点击事件-导航
			  * */
			 async navigation(){
				 const _this = this;
				 
				 await _this.mySelfLocation();
				 
				 // 判断系统安装的地图应用有哪些, 并生成菜单按钮
				 let _mapName = [{
				 		title: '高德地图',
				 		name: 'amap',
				 		androidName: 'com.autonavi.minimap',
				 		iosName: 'iosamap://'
				 	},
				 	{
				 		title: '百度地图',
				 		name: 'baidumap',
				 		androidName: 'com.baidu.BaiduMap',
				 		iosName: 'baidumap://'
				 	},
				 	{
				 		title: '腾讯地图',
				 		name: 'qqmap',
				 		androidName: 'com.tencent.map',
				 		iosName: 'qqmap://'
				 	},
				 ]
				 // 根据真机有的地图软件 生成的 操作菜单
				 let buttons = []
				 let platform = uni.getSystemInfoSync().platform
				 platform === 'android' && _mapName.forEach(item => {
				 	if (plus.runtime.isApplicationExist({
				 			pname: item.androidName
				 		})) {
				 		buttons.push(item)
				 	}
				 })
				 if (buttons.len