昆明网站建设公司哪家口碑好,建设网站需要哪些步骤,做百度网站要注意什么,html网页制作简单代码一、前言大家好#xff0c;这里分享一个 Vue3 OpenLayers 的小案例#xff1a;
模仿共享单车的电子围栏功能#xff0c;用户在地图上绘制停泊点时#xff0c;系统会自动判断该点是否在规划好的电子围栏内#xff08;多边形或圆形#xff09;。这个功能在实际项目中有很大…一、前言大家好这里分享一个 Vue3 OpenLayers 的小案例
模仿共享单车的电子围栏功能用户在地图上绘制停泊点时系统会自动判断该点是否在规划好的电子围栏内多边形或圆形。这个功能在实际项目中有很大应用场景比如共享单车/电动车判断用户还车是否在规定区域物流调度判断车辆停靠是否在任务范围内园区/景区管理判断人员是否进入限制区域。下面我们通过一个完整的 Vue3 OpenLayers 示例来实现。
三、功能效果
二、环境依赖Vue3 Vite TypeScriptOpenLayers (ol)Element Plus消息提示用安装依赖
npm install ol element-plus
四、核心实现思路初始化地图加载 OSM 底图添加一个点图层和一个围栏图层。绘制电子围栏提前设置一个多边形区域和一个圆形区域。交互绘制点通过 Draw 交互让用户选择停泊点。判断点是否在围栏内利用 geometry.intersectsCoordinate(coord) 方法判断坐标是否落在围栏内。消息提示使用 ElMessage 提示用户结果。
五、完整代码示例
!--* Author: 彭麒* Date: 2025/9/4* Email: 1062470959qq.com* Description: 此源码版权归吉檀迦俐所有可供学习和借鉴或商用。--
templatediv classcontainerdiv classw-full flex justify-center flex-wrapdiv classfont-bold text-[24px]vue3openlayers: 模仿共享单车判断点是否放在规划的电子围栏内/div/divh4el-button typeprimary sizesmall clickdrawImage绘制停泊点/el-button/h4div idvue-openlayers/div/div
/templatescript setup langts
import ol/ol.css;
import { onMounted, ref } from vue;
import { Map, View } from ol;
import Tile from ol/layer/Tile;
import OSM from ol/source/OSM;
import LayerVector from ol/layer/Vector;
import SourceVector from ol/source/Vector;
import Fill from ol/style/Fill;
import Feature from ol/Feature;
import { Point, Circle as OLCircle, Polygon } from ol/geom;
import Stroke from ol/style/Stroke;
import Style from ol/style/Style;
import CircleStyle from ol/style/Circle;
import Draw from ol/interaction/Draw;
import { ElMessage } from element-plus;// 地图对象
const map refMap | null(null);
const draw refDraw | null(null);// 点数据源
const source new SourceVector({wrapX: false,
});// 围栏数据源
const dataSource new SourceVector({wrapX: false,
});// 多边形数据
const polygonData [[[116.005, 39.005],[115.006, 40.008],[112.008, 39.008],[116.005, 39.005],],
];// 圆形数据
const circleData {circleCenter: [115.992, 38.5],circleRadius: 0.5,
};// 显示多边形
const showPolygon () {const polygonFeature new Feature({geometry: new Polygon(polygonData),});dataSource.addFeature(polygonFeature);
};// 显示圆形
const showCircle () {const circleFeature new Feature({geometry: new OLCircle(circleData.circleCenter, circleData.circleRadius),});dataSource.addFeature(circleFeature);
};// 初始化地图
const initMap () {const mapLayer new Tile({source: new OSM(),});const pointLayer new LayerVector({source: source,style: new Style({image: new CircleStyle({radius: 5,fill: new Fill({color: #f0f,}),}),}),});const weilan new LayerVector({source: dataSource,style: new Style({fill: new Fill({color: transparent,}),stroke: new Stroke({width: 2,color: red,}),}),});map.value new Map({target: vue-openlayers,layers: [mapLayer, weilan, pointLayer],view: new View({projection: EPSG:4326,center: [115.006, 39.508],zoom: 8,}),});
};// 绘制停泊点
const drawImage () {if (!map.value) return;source.clear();// 停止上一次绘制if (draw.value ! null) {map.value.removeInteraction(draw.value);}draw.value new Draw({source: source,type: Point,});map.value.addInteraction(draw.value);draw.value.on(drawend, (e) {if (!map.value) return;map.value.removeInteraction(draw.value as Draw);const coord (e.feature.getGeometry() as Point).getCoordinates();const arr dataSource.getFeatures();let flag 0;for (let i 0; i arr.length; i) {const polygonGeometry arr[i].getGeometry();if (polygonGeometry?.intersectsCoordinate(coord)) {flag;}}if (flag) {ElMessage.success({message: 在电子围栏内,duration: 1000,});} else {ElMessage.error({message: 在电子围栏外,duration: 1000,});}});
};onMounted(() {initMap();showPolygon();showCircle();
});
/scriptstyle scoped
.container {width: 840px;height: 600px;margin: 50px auto;border: 1px solid #42b983;
}#vue-openlayers {width: 800px;height: 430px;margin: 0 auto;border: 1px solid #42b983;position: relative;
}
/style七、总结与扩展本文实现了一个 基础电子围栏判断功能在真实业务中可以扩展为支持多围栏一个城市多个禁停区/允许停放区围栏编辑后台管理系统可视化绘制/修改电子围栏轨迹回放判断车辆行驶轨迹是否进入围栏性能优化大规模电子围栏渲染可用 GeoJSON 数据源。
