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

原文地址：https://blog.csdn.net/qq_19688207/article/details/142917499

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！