精华内容
下载资源
问答
  • uniapp写的基于腾讯地图的微信小程序电子围栏(服务范围),里面的key换成自己再腾讯地图api官网申请的,如果哪里有写的不好的地方,请多多谅解!
  • 基于微信小程序做的车辆电子围栏demo,实现手动点击添加删除标记点、标记点连接生成多边形区域、保存和删除已绘制的多边形区域
  • 微信小程序-实现电子围栏-半径-经纬度-是否在围栏内-画圆等
  • '正常:在围栏里面':'异常:在围栏外面', icon:'none' }) }, creatPolygons() { //创建多边形围栏/服务范围 if (this.data.markers.length < 3){ debugger return wx.showToast({ title: '请先在地图上标记点...

    1.js

    function isPointInPolygon(point, polygon) {

      var pts = polygon;

      var N = pts.length;

      var boundOrVertex = true;

      var intersectCount = 0;

      var precision = 2e-10;

      var p1, p2;

      var p = point;

      p1 = pts[0];

      for (var i = 1; i <= N; ++i) {

        if (p.lat == p1.lat || p.lng == p1.lng) {

          return boundOrVertex

        }

        p2 = pts[i % N];

        if (p.lat < Math.min(p1.lat, p2.lat) || p.lat > Math.max(p1.lat, p2.lat)) {

          p1 = p2;

          continue

        }

        if (p.lat > Math.min(p1.lat, p2.lat) && p.lat < Math.max(p1.lat, p2.lat)) {

          if (p.lng <= Math.max(p1.lng, p2.lng)) {

            if (p1.lat == p2.lat && p.lng >= Math.min(p1.lng, p2.lng)) {

              return boundOrVertex

            }

            if (p1.lng == p2.lng) {

              if (p1.lng == p.lng) {

                return boundOrVertex

              } else {

                ++intersectCount

              }

            } else {

              var xinters = (p.lat - p1.lat) * (p2.lng - p1.lng) / (p2.lat - p1.lat) + p1.lng;

              if (Math.abs(p.lng - xinters) < precision) {

                return boundOrVertex

              }

              if (p.lng < xinters) {

                ++intersectCount

              }

            }

          }

        } else {

          if (p.lat == p2.lat && p.lng <= p2.lng) {

            var p3 = pts[(i + 1) % N];

            if (p.lat >= Math.min(p1.lat, p3.lat) && p.lat <= Math.max(p1.lat, p3.lat)) {

              ++intersectCount

            } else {

              intersectCount += 2

            }

          }

        }

        p1 = p2

      }

      if (intersectCount % 2 == 0) {

        return false

      } else {

        return true

      }

    }

    // t:半径

    // e:中心点经纬度坐标[110,40]

    // i: 圆上点的个数,默认15个,建议73个

    function countCircle(t, e, i) {

      t=300;

      //e=[36.070299,120.370787];

      e=[120.370787,36.070299];

      i=20;

      for(

        var r = t / 6378137,

          n = [e[0], e[1]],

          o = [numberToRadius(n[1]), numberToRadius(n[0])],

          s = ((i = i || 15), []),

          a = 0;

        a < i;

        a++

      ) {

        var u = (2 * Math.PI * a) / i;

        var h = Math.asin(

          Math.sin(o[0]) * Math.cos(r) +

            Math.cos(o[0]) * Math.sin(r) * Math.cos(u)

        );

        var c =

          o[1] +

          Math.atan2(

            Math.sin(u) * Math.sin(r) * Math.cos(o[0]),

            Math.cos(r) - Math.sin(o[0]) * Math.sin(h)

          );

        s.push([numberToDegree(c), numberToDegree(h)]);

      }

      s.push(s[0])

      return [s];

    }

    function numberToRadius(t) {

      return (t * Math.PI) / 180;

    }

    function numberToDegree(t) {

      return (180 * t) / Math.PI;

    }

     

    module.exports = {

      countCircle:countCircle,

      numberToRadius:numberToRadius,

      numberToDegree:numberToDegree,

      isPointInPolygon: isPointInPolygon

    };

    2.页面

     

    import {

      isPointInPolygon,countCircle,numberToRadius,numberToDegree

    } from '../utils/isPointInPolygon.js';

    let newPoint = {

      // latitude: 80.47951,

      // longitude: 118.08948

      latitude: 36.070553,

      longitude: 120.372574,

    };

    Page({

        data: {

          latitude: newPoint.latitude,

          longitude: newPoint.longitude,

          markers: [],

          polygons: [],

          paramspolygones: [],

     

        },

        tapHandle() {

          //模拟定位点是否在围栏内

          if (!this.data.polygons.length) {

            return wx.showToast({

              title: '当前没有设置围栏',

              icon: 'none',

              mask: true

            })

          }

          let array = this.data.polygons[0].points;

          let newArray = [];

          for (let j = 0; j < array.length; j++) {

            let obj = {};

            obj.lng = array[j].longitude;

            obj.lat = array[j].latitude;

            newArray.push(obj)

          }

          this.setData({

            paramspolygones: newArray

          })

          let nowPoint = {};

          nowPoint.lat = newPoint.latitude

          nowPoint.lng = newPoint.longitude

          //true表示在围栏内反之围栏外

          let flag = isPointInPolygon(nowPoint, newArray);

          wx.showToast({

            title: flag?'正常:在围栏里面':'异常:在围栏外面',

            icon:'none'

          })

        },

        creatPolygons() { 

          //创建多边形围栏/服务范围

          if (this.data.markers.length < 3){

            debugger

            return wx.showToast({

              title: '请先在地图上标记点,且不少于三个点',

              icon:'none'

            })

          }

          let polygons = this.data.polygons;

          let markers = this.data.markers;

          let newArray = [];

          let params = {

            fillColor: "#1791fc66",

            strokeColor: "#FFF",

            strokeWidth: 2,

            zIndex: 3

          }

          for (let j = 0; j < markers.length; j++) {

            let obj = {

              latitude: markers[j].latitude,

              longitude: markers[j].longitude

            };

            newArray.push(obj);

          }

          polygons[0] = {};

          polygons[0].points = newArray;

          newArray = Object.assign(polygons[0], params);

          this.setData({

            "polygons[0]": newArray

          })

        },

        //画圆

        creatCircle() {

          var array=countCircle('','','');

          var jsons=[]

          array[0].forEach(element => {

            var json={};

            json.latitude=element[1]

            json.longitude=element[0]

            console.log('>>>>>>>>>>json>>>>'+JSON.stringify(json))

           // debugger

           jsons.push(json);

          });

           //this.data.markers=jsons

           debugger

     

           let polygons = this.data.polygons;

           let markers = this.data.markers;

           let newArray = [];

           let params = {

             fillColor: "#1791fc66",

             strokeColor: "#FFF",

             strokeWidth: 2,

             zIndex: 3

           }

           

           polygons[0] = {};

           polygons[0].points = jsons;//newArray;

           newArray = Object.assign(polygons[0], params);

           this.setData({

             "polygons[0]": newArray

           })

         },

        bindtapMap(e) {

          //创建标记点

          let tapPoint = e.detail;

          let markers = this.data.markers

          let newContent = markers.length

          let markerItem = {

            callout: {

              content: ++newContent,

              padding: 5,

              borderRadius: 2,

              // bgColor:'#ffffff96',

              bgColor: '#ffffff',

              display: 'ALWAYS',

              anchorY: -15,

              anchorX: 15,

              zIndex: 2

            },

            id: newContent,

            latitude: null,

            longitude: null,

            iconPath: '/images/Marker1_Activated@3x.png',

            width: '34px',

            height: '34px',

            rotate: 0,

            alpha: 1,

            zIndex: 3

          }

          markerItem.latitude = tapPoint.latitude;

          markerItem.longitude = tapPoint.longitude;

          markers.push(markerItem)

          console.log('markerItem>>>'+JSON.stringify(markerItem))

          this.setData({

            markers

          })

        },

        removeMarker(e) {

          //删除重复点击的标记点

          console.log(e.markerId)

          let markers = this.data.markers;

          markers.splice(e.markerId - 1, 1)

          console.log(markers);

          //重置marker数组的id和content

          for (let j = 0; j < markers.length; j++) {

            markers[j].id = j + 1;

            markers[j].callout.content = j + 1;

          }

          this.setData({

            markers

          })

        },

        removePolygons() {

          //删除围栏和标记

          this.setData({

            markers: [],

            polygons: []

          })

        },

        onLoad(options) {},


     

      }

     

    )

    3.样式

    .intro {

      margin: 30px;

      text-align: center;

    }

    <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="13" controls="{{controls}}" bindcontroltap="controltap" bindtap="bindtapMap" markers="{{markers}}" polyline="{{polyline}}" bindmarkertap="removeMarker" bindlabeltap="removeMarker"

      polygons="{{polygons.length >0 ? polygons :''}}" bindregiοnchange="regionchange" show-location style="width: 100%; height: 80vh;">

    </map>

    <button type="primary" bindtap="tapHandle">是否在围栏内</button>

    {{polygons[0].length}}

    <button type="primary" bindtap="creatCircle">电子围栏画圆</button>

    <button type="primary" bindtap="creatPolygons">生成围栏</button>

    <button type="primary" bindtap="removePolygons">删除围栏</button>

     

    展开全文
  • 微信管理电子围栏

    2018-12-01 18:34:47
    周界报警通过网络传输进行管理方案设计思考,微信管理脉冲主机传输过来的报警信号并且处理报警信号
  • 最近在开发微信小程序中,无意中遇到一个问题,就是地图显示电子围栏,但是后端返回的值不满足它小程序给的组件的要求的数据,这时候需要迭代微信请求所返回的数据,找出需要的数据。 重点:这里拿区域举例:...

    最近在开发微信小程序中,无意中遇到一个问题,就是地图显示电子围栏,但是后端返回的值不满足它小程序给的组件的要求的数据,这时候需要迭代微信请求所返回的数据,找出需要的数据。

    重点:这里拿区域举例:polygons有points、 strokeWidth、strokeColor、fillColor等属性,但是核心还是其中的points,其中包含一个个经纬度坐标,但是如果返回的值中含有多个区域,该怎么办呢?

    小程序提供了setData方法,只要返回数据满足polygons要求就行,即其中的定义的变量接收return的值即可(return 返回的要求必须满足格式,恶心心,搞人心态)
    话不多说上代码:

    //进行骑行区域查找,根据经纬度查询附近的骑行区域
    function finddrivingArea(that, log, lat) {
      //请求后端数据
      wx.request({
        url: "http://localhost:8084/get/drivingAreas",
        method: 'GET',
        data: {
          longitude: log,
          latitude: lat,
        },
        success: function (res) {
          console.log(res)
         //console.log(res)
          //函数式编程,将每个GeoResult中的单词数据迭代出来
          var object1={"points":null, strokeWidth:2, strokeColor:"#FF000010",fillColor:"#FF000020"};
          const spolygons = res.data.content.map((reslut) => {
    
            var  polygon1 =JSON.stringify(reslut.content.geoJsonPolygon) 
            var  polygon2=reslut.content.geoJsonPolygon;
            
            var points=[]
            console.log('polygon1 '+polygon1)
            console.log('polygon.points '+JSON.stringify(polygon2.points))
            console.log('polygon.points.length '+polygon2.points.length)
            polygon2.points.forEach(element=>{
                var temp={}
                temp['longitude']=element.x;
                temp['latitude']=element.y;
                points.push(temp);
            });
            console.log(points)
            return {//返回 polygons所需要的数据格式
                points:points,
                strokeWidth:2,
                strokeColor:"#FF000010",
                fillColor:"#FF000020"
            };
          });
          // 修改data里面的polygons
          that.setData({
            lat: lat,
            log: log,
            polygons:spolygons
          });
        }
      })
    }
    

    效果如下:
    在这里插入图片描述

    展开全文
  • 主要为大家详细介绍了微信小程序实现打卡签到页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本场 Chat 将围绕近年火爆的网红运动马拉松比赛场景,通过 IoT 物联网技术,你可以在微信小程序中实时追踪好友的马拉松全程轨迹;通过电子围栏技术划定终点范围,当好友跑入终点区域,立即通知你去拍照留念。一、...

    本场 Chat 将围绕近年火爆的网红运动马拉松比赛场景,通过 IoT 物联网技术,你可以在微信小程序中实时追踪好友的马拉松全程轨迹;通过电子围栏技术划定终点范围,当好友跑入终点区域,立即通知你去拍照留念。

    一、准备工作

    1.1 硬件设备

    本次开发实战课程我们使用Java程序模拟设备上报 GPS 坐标。通过好友手机 App 也可以获取 GPS 信息,大家可以在结尾 GitHub 项目地址获取完整代码示例。

    1.2 开发语言

    本次实战物联网开发部分以 Java 语言为主;微信小程序为 JavaScript 语言。

    Java

    JavaScript

    1.3 云资源

    本次 IoT 物联网开发实战涉及以下云资源的开通和使用:

    其中 IoT 物联网开发部分细节可以参考: IoT 物联网开发实战 Chat。

    二、技术架构

    硬件设备由 GPS 模块、GPRS 通信模块、主控 MCU、锂电池组成。主控 MCU 每隔3分钟上报一次 GPS 经纬度信息;通过 IoT 物联网平台实时上传到云端;在云上我们把数据流转到函数计算中简单处理;然后存储到时空数据库 TSDB 里;通过函数计算对外暴露数据 API 服务;最后我们在微信小程序里实时展示好友的马拉松轨迹。

    本次开发实战课程整体技术架构如下:

    bea2c2b58192bd235b4b2406503cd913.png

    三、IoT 物联网平台

    在 IoT 物联网平台,我们场景一个高级版产品轨迹追踪,并在功能定义部分添加两个属性(经度 longitude,维度 latitude)。

    展开全文
  • 实现map组件,绘制围栏 switch2Change(e) { // 开启围栏 if (e.target.value) { let param = { ocid: this.$store.state.ocid, odid: this.$store.state.odid, token: this.$store....

    实现map组件,绘制围栏

    在这里插入图片描述

    switch2Change(e) { // 开启围栏
    				if (e.target.value) {
    					let param = {
    						ocid: this.$store.state.ocid,
    						odid: this.$store.state.odid,
    						token: this.$store.state.token,
    					};
    					let opts = "/biubiubiu/zmybiu";//这里填自己的地址
    					this.$Request.httpRequestGet(opts, param).then(res => {
    						let resdata = res.data.result;
    						if (res.data.status.ecode === 0 && resdata.length > 0) {
    							resdata.forEach(items=>{
    								let _data = [];
    								items.pointList.forEach(item=> {
    									//uni-app 只支持 gcj02 坐标
    									//如果后台回传的不是gcj02 坐标,需要进行经纬度转换
    									 _data.push({
    									  latitude:coordinateType.gps.gcj_encrypt(item.lat,item.lng).lat,
    									  longitude:coordinateType.gps.gcj_encrypt(item.lat,item.lng).lng,
    									})
    								});
    								let ps = {
    								 	points:_data,
    								 	strokeColor: "#FD302F",
    								 	strokeWidth: 2,
    									fillColor: "#FD302F4C",
    								 };
    								this.polygons=this.polygons.concat(ps);
    							})
    							// console.log(JSON.stringify(this.polygons))
    						
    						}
    
    					});
    				} else {
    				    //关闭围栏,就直接清除此数组
    					this.polygons = [];
    				}
    			},
    

    后台返回的数据结构:
    在这里插入图片描述

    展开全文
  • 在uniapp中使用任意一个地图能绘制电子围栏(圆形和多边形)嘛,求解答,谢谢</p>
  • 微信小程序轮播图的实现是利用了swiper组件(滑块视图容器)。主要参数如下:属性名类型默认值说明indicator-dotsBooleanfalse是否显示面板指示点indicator-colorColorrgba(0, 0, 0, .3)指示点颜色indicator-active-...
  • 电子围栏主机采用了先进的“阻挡为主,报警为辅”的周界安防理念,集“威慑、阻挡、报警、安全”于一身。下面一起来学习一下
  • 3、使用车锁蓝牙读写设备读取固定安装在停放点的蓝牙标签电子围栏,(以鸣单车为代表,正在上海,广东等地试点); 4、西谷方案-使用户手机蓝牙读取停放点蓝牙电子标签ID,同时读取车载蓝牙标签的电子围栏, (已...
  • 国家公园安防特点 脉冲电子围栏的定义 发展演变 组成结构 技术原理 防控作用 未来发展
  • GPS 和地理围栏实现微信小程序中马拉松全程追踪实战Chat 简介:本场 Chat 将围绕近年火爆的网红运动马拉松比赛场景,通过 IoT 物联网技术,你可以在微信小程序中...
  • 主要介绍了微信小程序实现获取自己所处位置的经纬度坐标功能,涉及微信小程序地图功能获取经纬度信息的相关操作技巧,需要的朋友可以参考下
  • Core Location 电子围栏:入门

    千次阅读 2018-08-14 13:14:56
    原文:Geofencing with Core Location: Getting Started 作者:Andy Pereira ...Geofencing 会在设备进入/离开指定的电子围栏时通知应用程序。它可以让你写出一些很酷的应用程序,当你从家里出来时...
  • 电子围栏 脉冲电子围栏 周界防护
  • 用户自定义电子围栏,记录车辆进出电子围栏的时间。 技术点 checkpoint stateBackend watermark Broadcast State 模式 数据流连接广播流 state 实现 checkpoint Flink中的每个方法或算子都能够是有状态的。...
  • 怎么判断进入围栏,离开围栏,谁有demo?求demo......................................................... 怎么判断进入围栏,离开围栏,谁有demo?求demo.........................................................
  • 3D电子围栏技术介绍

    2021-07-29 09:16:12
    电子围栏是我们在定位产品行业中经常听到的一个概念:我们在电脑或者手机中划定一个区域,当目标进入或者离开区域时,就会触发告警,我们将此区域称为电子围栏(区域)。 电子围栏解决的是一个位置的查询和触发...
  • 电子围栏总体的方案架构就是,先将数据上传到 DIS ,再入库到 CloudTable 的时序数据库,用来给 Web页面展示车辆轨迹;同时也会给到 CS 实时计算,判断车辆是否在围栏里面,如果在则将告警信息写入到 DIS 另一个通道...
  • 微信小程序 导航栏固定

    千次阅读 2020-03-25 15:04:51
    顶部固定 .nav{ /* fixed(固定定位):生成绝对定位的元素,相对于浏览器窗口进行定位 */ position: fixed; top: 0rpx; z-index: 1; width: 100%;...拥有更高堆叠顺序的元素总是会处于堆叠顺序较...
  • 电子围栏(支持) 商家接单(微信公众号接单(支持) 配送员接单(微信公众号接单)(支持) 借使用支付打款(支持) 分享有礼(支持) 下单有礼(支持) 霸王餐(支持) 超级红包(支持) 平台装修(支持)...
  • 2、限定地点: 我希望这个小程序未来也可以帮助线下的商户发起抽奖活动,那么做一个参与的位置电子围栏是很有必要的。 3、限定性别: 不多解释 4、条码解锁: 这个的思路也很好玩,让抽奖活动需要触发扫描特定的...
  • 使用uni-app调用腾讯地图获取周边 首先打开腾讯地图api下载sdk,然后解压 import QQMapWX from "@/static/qqmap-wx-jssdk.min.js"//引入sdk uni.getLocation({//获取经纬度 type: 'gcj02', success: function(res)...
  • 高德地图-地理围栏功能实现

    千次阅读 2019-01-12 13:54:19
    最近需要实现一个地理围栏相关的功能。 项目是和骑行相关的,主要是当游客或者骑友定位地址进入到对应的景点的地理围栏里面,则播报景点相关的报道语音。 接到需求之后,我开始查看高德的相关API,由于围栏是多边形...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 680
精华内容 272
关键字:

小程序电子围栏