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/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)*/