当前位置：首页 > VUE

vue实现电子围栏

2026-03-08 04:02:15VUE

Vue 实现电子围栏的方法

电子围栏通常用于地理围栏（Geo-fencing）应用，通过在地图上绘制多边形或圆形区域，结合定位技术判断目标是否进入或离开该区域。以下是基于 Vue 的实现方法：

使用高德地图或百度地图 API

高德地图和百度地图提供了完整的 JavaScript API，支持在地图上绘制多边形和圆形区域，并监听位置变化。

安装依赖：

npm install @amap/amap-jsapi-loader  # 高德地图
# 或
npm install vue-baidu-map            # 百度地图

高德地图示例代码：

vue实现电子围栏

<template>
  <div id="map-container"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  data() {
    return {
      map: null,
      polygon: null,
      marker: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    async initMap() {
      const AMap = await AMapLoader.load({
        key: '你的高德地图Key',
        version: '2.0'
      });
      this.map = new AMap.Map('map-container', {
        viewMode: '2D',
        zoom: 15,
        center: [116.397428, 39.90923]
      });

      // 绘制多边形围栏
      this.polygon = new AMap.Polygon({
        path: [
          [116.403322, 39.920255],
          [116.410703, 39.897555],
          [116.402292, 39.892353],
          [116.389846, 39.891365]
        ],
        strokeColor: '#FF33FF',
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: '#1791fc'
      });
      this.map.add(this.polygon);

      // 模拟移动点
      this.marker = new AMap.Marker({
        position: [116.403322, 39.920255],
        map: this.map
      });

      // 判断点是否在围栏内
      setInterval(() => {
        const position = this.marker.getPosition();
        const isInside = AMap.GeometryUtil.isPointInRing(
          position,
          this.polygon.getPath()
        );
        console.log('是否在围栏内:', isInside);
      }, 1000);
    }
  }
};
</script>

使用 Leaflet 实现

Leaflet 是一个轻量级的地图库，适合在 Vue 中集成。

安装依赖：

npm install leaflet

示例代码：

vue实现电子围栏

<template>
  <div id="map"></div>
</template>

<script>
import L from 'leaflet';

export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = L.map('map').setView([39.90923, 116.397428], 15);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

      // 绘制多边形围栏
      const polygon = L.polygon([
        [39.920255, 116.403322],
        [39.897555, 116.410703],
        [39.892353, 116.402292],
        [39.891365, 116.389846]
      ], { color: 'red' }).addTo(map);

      // 模拟移动点
      const marker = L.marker([39.920255, 116.403322]).addTo(map);

      // 判断点是否在围栏内
      setInterval(() => {
        const latlng = marker.getLatLng();
        const isInside = polygon.getBounds().contains(latlng);
        console.log('是否在围栏内:', isInside);
      }, 1000);
    }
  }
};
</script>

<style>
#map { height: 400px; }
</style>

判断点是否在多边形内

对于自定义几何计算，可以使用射线法（Ray-casting algorithm）判断点是否在多边形内。

代码实现：

function isPointInPolygon(point, polygon) {
  const x = point[0], y = point[1];
  let inside = false;
  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
    const xi = polygon[i][0], yi = polygon[i][1];
    const xj = polygon[j][0], yj = polygon[j][1];
    const intersect = ((yi > y) !== (yj > y))
      && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
    if (intersect) inside = !inside;
  }
  return inside;
}

// 使用示例
const polygon = [[0, 0], [10, 0], [10, 10], [0, 10]];
const point = [5, 5];
console.log(isPointInPolygon(point, polygon)); // true

结合 GPS 定位

通过浏览器 Geolocation API 获取实时位置，并与电子围栏区域对比。

navigator.geolocation.watchPosition(
  (position) => {
    const { latitude, longitude } = position.coords;
    const isInside = isPointInPolygon(
      [longitude, latitude],
      polygon.getPath()
    );
    console.log('当前位置是否在围栏内:', isInside);
  },
  (error) => {
    console.error('定位失败:', error);
  },
  { enableHighAccuracy: true }
);