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="bottom-horizontal-button">
			<button @click="location()" class="btn" type="primary">定位</button>
		</view>
	</view>
</template>

<script>

	export default {
	
		data() {
			return {
				valueChangeSign:{
					flag:false,
					latitude:null,//纬度
					longitude:null,//经度
					path:null,//本机路径
				},
			}
		},
		mounted(){
			this.getBootPath();
		},
		onLoad() {
			
		},
		methods: {
			getBootPath() {
				
			},
			/**
			 * 点击事件-定位
			 * */
			 location(){
				 
				// 获取经纬度
				uni.getLocation({
					type: 'wgs84 ',
					success: (res) => {
						//console.log("res",res)
						this.valueChangeSign.flag = !this.valueChangeSign.flag;
						this.valueChangeSign.latitude = res.latitude//接收纬度值
						this.valueChangeSign.longitude = res.longitude//接收经度值
					}
				});  
				
			 },
		}
	}
</script>
<script module="ol" lang="renderjs" type="module">
import Map from 'ol/Map';
import View from 'ol/View';
import { transform } from 'ol/proj.js';
import { ScaleLine, defaults as defaultControls, MousePosition } from 'ol/control.js';
import { Circle as CircleStyle, Style, Stroke, Fill, Icon } from "ol/style.js";
import { Vector as VectorLayer } from 'ol/layer.js';
import { Vector as VectorSource } from 'ol/source.js';
import Feature from 'ol/Feature.js';
import Point from 'ol/geom/Point.js';
import GeoJSON from 'ol/format/GeoJSON.js';

	export default {
		data(){
			return {
				map:null,
				view:null,
				locationLayer:null,// 定位点图层
			}
		},
		mounted(){
			this.initMap();
		},
		methods:{
			/**
			 * @param {*} newValue 新的值或状态
			 * @param {*} oldValue 旧的值或状态
			 * @param {*} ownerInstance 拥有该数据或组件的实例
			 * @param {*} instance 当前操作的具体实例
			 */
			valueChange(newValue, oldValue, ownerInstance, instance){
				console.log(newValue, oldValue, ownerInstance, instance);
				
				const olLongitude = newValue.longitude;//当前位置的经度
				const olLatitude = newValue.latitude;//当前位置的纬度
// 
				// 调用定位按钮
				this.lxLocation(olLongitude,olLatitude);
			},
			initMap(){
				// 数据源
				const geojsonSource = new VectorSource({
					format:new GeoJSON(),
					//在线加载全国geojson数据(如下两种选一即可)
                    //url:"https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json"
					//url:"https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full"
					// 离线加载全国geojson数据
					// 1.先将mapData.json数据放在项目的static/datas文件夹中
					// 2.运行时，访问路径如下所示
					url:'../www/static/datas/mapData.json'
				});
				
				// 图层
				const geojsonLayer = new VectorLayer({
					name: 'geojson图层',
					source: geojsonSource,
					// 样式-不写样式就是范围线
					style: new Style({
						fill: new Fill({
							color: 'rgba(10, 20, 255, 0.1)',
						})
					}),
					zIndex: 3,
				})
				

				
				this.map = new Map({
				  target: 'map',
				  layers:[geojsonLayer],
				  view: new View({
					projection:'EPSG:3857',
					center: transform([125.33,43.90], 'EPSG:4326','EPSG:3857',),
					zoom: 3,
				    minZoom: 1,// 最小缩放级别
				    maxZoom: 18, //最大缩放级别
				    constrainResolution: true,// 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
					enableRotation: false,// 禁止地图旋转
				  }),
				  controls:defaultControls({
					  zoom:false,//不显示放大放小按钮
					  rotate:false,// 不显示指北针控件
					  attribution:false//不显示右下角的地图信息控件
				  }).extend([
					// 比例尺
					new ScaleLine({
						//设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
						units: "metric"
					})
				  ])
				});
				
			
			},
			lxLocation(longitude,latitude){// 定位
				const geom = transform([longitude,latitude], 'EPSG:4326', 'EPSG:3857');
				
				// 设置中心点定位-直接定位
				//this.map.getView().setCenter(geom);
				// 设置层级
				//this.map.getView().setZoom(18);
				
				// 设置中心点-过渡动画
				this.map.getView().animate({
					center:geom,// 中心点
					zoom:12,// 层级
					duration:1000// 持续时间
				});
				
				
				// 绘制点
				const locationPoint = new Point(geom);
				// 清除绘制点图层
				this.map.removeLayer(this.locationLayer); 
				
				// 绘制定位点
				// 设置点特征（Feature）
				const pointFeature = new Feature({
					title:"point",
					geometry:locationPoint
				});
				
				// 设置特征样式(style)
				pointFeature.setStyle(
					new Style({
						 // 使用 CircleStyle 创建一个圆形的点
						 image:new CircleStyle({
							 // 点样式
							 fill:new Fill({
								 //color:"red",// 颜色
								 color: 'rgba(255,0,0,0.4)',
							 }),
							 // 点周边样式
							 stroke:new Stroke({
								color: '#3399CC',
								width: 1.25, 
							 }),
							 radius:7,// 半径
						 }),
					})
				);
				// 创建和添加特征到源（Source）
				// VectorSource表示一个矢量要素源，它用于存储和显示地理数据。
				const source = new VectorSource();
				source.addFeature(pointFeature);
				// 创建图层并设置源（Layer）
				// VectorLayer表示一个矢量图层，它由一系列矢量要素（Feature）组成，用于在地图上显示地理数据。
				this.locationLayer = new VectorLayer();
				this.locationLayer.setSource(source);
				this.map.addLayer(this.locationLayer);
			},
			
			
		}
		
	}

</script>

<style scoped lang="scss">
	/*去除顶部导航栏*/
	*{margin:0;padding:0}
	.map{
	  width:100vw;
	  height: 100vh;
	  position: relative;
	  z-index: 1;
	}
	
	.bottom-horizontal-button{
		  position: absolute;
		  bottom: 0;
		  right: 0;
		  margin-bottom: 30rpx;
		  width: 80rpx;
		  z-index: 10;
		.btn {
			width: auto;
			height: auto;
			margin: 5px; /* 按钮间距 */
			padding: 10px; /* 按钮内部填充 */
			width: 80%; /* 按钮宽度 */
			text-align: center; /* 按钮文字居中 */
		 }
	}
</style>

 注意：

在官方基座，上面的代码运行没有问题，但是打包的APP就无法加载离线地图了。

因为,打包后app文件夹中，WWW文件目录没有了，这样就会导致openlayer的相对路径失效，从而无法加载离线地图。

解决的办法：

manifest.json添加配置

"runmode": "liberate",/*(默认为normal)*/