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