持续搞【附近】---长连接坐标流和“地理围栏”（五）

老李秀

发布于 2019-11-13 16:30:51

9630

发布于 2019-11-13 16:30:51

我们经过【附近】系列的二、三、四篇章后，已经基本了解了市面上用于解决LBS问题的几种常见方案和做法，当然除了PostGre外... ...那个有兴趣的哥们可以考虑补一篇PostGre版本直接投稿。实际上前面的思路是很简单的，算是循序渐进类型的，从MySQL到MongoDB再到ES，大概就是从GeoHASH到Google S2再到R树们。我没有在文章里显式地说这些但是背后就是这些，往深处地挖掘全靠诸位自己了~

今天这篇可以彻底摆脱这些了，说句实话我自己都快恶心地想吐了，今儿个咱整点儿稍微不一样的：

所以今天主要问题就两个：

多边形围栏
长连接坐标流

众所周知，我们在使用下面这款著名租车软件的时候，总是会弹出下面的运营范围提示，我贴一张图你们感受一下：

一般是我们开完车后停车的时候，会提示我们：你停的这个地方尚在我们运营范围之外，如果你非要这里停车，我们会象征性收取你5块钱运营费之类云云。那么，一般我们此时该怎么办？那就是掉头往回骑一直到APP提醒你在运营范围之内即可...

除此之外，在【次著名】已下架的陌生社交APP --- 探探的卡牌界面上你有时候会看到如下提示：某某某在史各庄与曾您擦肩而过（由于本人从来没有安装过此类软件，所以并不能提供截图了）。

此处的一个关键技术点就是多边形～我们在数据库里添加一坨坐标，画成一个闭合的多边形。在使用APP的时候，APP与服务器建立一个长连接，不断地上报自己的坐标，一旦上报的坐标位于划好的多边形内部的时候，就算命中了某多边形，根据这个结果就可以分别做我们自己的业务逻辑了。

长连接这种鬼东西，直接用四层的TCP是不可能的。一来是咱自己能力有限，悟性较低，始终无法【精通】这门学问；二来是咱不会写APP demo，只能靠浏览器临时客串当客户端。综上所属，最佳选择就是Websocket协议。

贵在能用

下面的环节是我们最爱的CV环节！

第一步：搞好数据库

事到如今，我们让是得辛苦MongoDB出来临时客串顶一下帮我们存储地理多边形。我们创建一个Mongodb 2dsphere索引，其次插入一个地理多边形。我们的数据库momo，数据表是geo：

// 选择momo数据库
use momo;
// 在fence字段上建立2dsphere索引
db.geo.ensureIndex(  
    {  
        fence: "2dsphere"  
    }  
);
// 查看一下momo.geo中的索引
db.geo.getIndexes();
// 如果不出问题的话，下面表示索引已经OK
> db.geo.getIndexes(); 
[{    
  "v": 2,    
  "key": {      "_id": 1    },    
  "name": "_id_",    
  "ns": "momo.geo"  
},  {    
  "v": 2,    
  "key": {      "fence": "2dsphere"    },    
  "name": "fence_2dsphere",    
  "ns": "momo.geo",    
  "2dsphereIndexVersion": 3  
}]

我们在地图上选择四个点来封闭一下老李和巨蛀暂住的著名小区，入下图所示，用黄褐色线条框起来的封闭四边形：

// 构造这个四边形
// 但是⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️
// 需要五个点才能封闭住一个多边形，起点和终点的坐标完全一样，表示在此处封闭这个多边形
> db.geo.insert(
    {
        fence:{
            type:"Polygon",
            coordinates:[[
                [116.3129886235,40.0614323370],
                [116.3139649476,40.0599789099],
                [116.3166234822,40.0606813756],
                [116.3158241839,40.0618350753],
                [116.3129886235,40.0614323370],
            ]]
        }
    }
);
// 返回下面这个表示数据插入成功，多边形构造完毕
> WriteResult({ "nInserted" : 1 })
// 不放心就查询一下吧
> db.geo.find({})
> { "_id" : ObjectId("5d0f45eb0e495c7ff4dcf7a9"), "fence" : { "type" : "Polygon", "coordinates" : [ [ [ 116.3129886235, 40.061432337 ], [ 116.3139649476, 40.0599789099 ], [ 116.3166234822, 40.0606813756 ], [ 116.3158241839, 40.0618350753 ], [ 116.3129886235, 40.061432337 ] ] ] } }
// 我们再依照复读机方式，再次画一个更大的多边形
db.geo.insert(
    {
        fence:{
            type:"Polygon",
            coordinates:[[
                [116.3087829198,40.0634605138],
                [116.3179899688,40.0663338312],
                [116.3216392131,40.0599957157],
                [116.3084395970,40.0574989797],
                [116.3087829198,40.0634605138],
            ]]
        }
    }
);

我们挑选一个多边形内部的经纬度：[ 116.3148017968,40.0609848161 ]来查询一下，看看是否能够命中多边形。当然了，最为demo一定是命中了的，要不这玩意真的没法往下编了... ...demo里命中的是ID为【5d0f45eb0e495c7ff4dcf7a9】的多边形。

// 查询某点是否在围栏内外
db.geo.find(
    {
        fence:{
            $geoIntersects:{
                $geometry:{ 
                    "type" : "Point",
                    "coordinates" : [ 116.3148017968,40.0609848161 ] 
                }
            }
        }
    }
);
// 回车后执行命令
> { "_id" : ObjectId("5d0f45eb0e495c7ff4dcf7a9"), "fence" : { "type" : "Polygon", "coordinates" : [ [ [ 116.3129886235, 40.061432337 ], [ 116.3139649476, 40.0599789099 ], [ 116.3166234822, 40.0606813756 ], [ 116.3158241839, 40.0618350753 ], [ 116.3129886235, 40.061432337 ] ] ] } }

第二步：构建Websocket服务器

那个。。。今天我们既不用上古时代的C语言，也不用从群众中来的PHP，今天我们走进新时代：Golang。

别小瞧咱老李，咱活儿全

package main
import (
  "log"
  "fmt"
  "net/http"
  "github.com/gorilla/websocket"
  "encoding/json"
  "context"
  "go.mongodb.org/mongo-driver/bson"
  "go.mongodb.org/mongo-driver/bson/primitive"
  "go.mongodb.org/mongo-driver/mongo"
  "go.mongodb.org/mongo-driver/mongo/options"
)
type coordsStruct struct {
  Lat float64 `json:lat`
  Lng float64 `json:lng`
}
type fenceStruct struct {
  Id primitive.ObjectID "_id,omitempty"
}
// 配置一些websocket的option项
var upgrader = websocket.Upgrader{
  CheckOrigin: func( r *http.Request ) bool {
    return true
  },
}
func main() {
  http.HandleFunc( "/", fence )
  log.Fatal( http.ListenAndServe( ":8000", nil ) )
}
// 地理围栏服务
func fence( w http.ResponseWriter, r *http.Request ) {
  conn, err := upgrader.Upgrade( w, r, nil )
  // 这个地方已经要校验失败，err如果不校验，后面会出错
  if err != nil {
    fmt.Println( "ws upgrade err:", err )
    return
  }
  defer conn.Close()
  // 进入到ws服务无限循环中...
  for {
    messageType, message, _ := conn.ReadMessage()
    // 反序列化json
    var coords coordsStruct
    err := json.Unmarshal( []byte( message ), &coords )
    if err != nil {
      fmt.Println( "json decode err : ", err )
    }
    
    // 开始处理经纬度是否在多边形中
    var fence fenceStruct
    clientOptions := options.Client().ApplyURI( "mongodb://127.0.0.1" )
    client, err := mongo.Connect( context.TODO(), clientOptions )
    if err != nil {
      fmt.Println( "mongo connect err..." )
    }
    geoCollection := client.Database("momo").Collection("geo")
    ret := geoCollection.FindOne( context.TODO(), bson.M{"fence":bson.M{"$geoIntersects":bson.M{"$geometry":bson.M{"type":"Point","coordinates":[]float64{coords.Lng,coords.Lat}}}}} )
    if err := ret.Decode( &fence ); err != nil {
      fmt.Println( "Decode err : ", err )
      return
    }
    fmt.Println( "收到坐标：", string( message ) )

    response, err := json.Marshal( fence )
    if err != nil {
      fmt.Println( "json marshal err : ", err )
      return
    }
    conn.WriteMessage( messageType, []byte( response ) )
  }
}

将上面文件保存为ws.go，然后执行go run ws.go将Websocket服务器启动起来。

第三步：构建JS客户端

JS代码太多了，我只放了关键部位的，老规矩所有代码将会放到github里。

        var ws    = new WebSocket("ws://t.ti-node.com:8000/");
        ws.onopen = function( evt ) {
          console.log("Connection open ...");
          //ws.send("Hello WebSockets!");
        };
        ws.onmessage = function( evt ) {
          console.log( "Received Message: " + evt.data );
          alert( evt.data );
          //ws.close();
        };
        ws.onclose = function(evt) {
          console.log("Connection closed.");
        };
        if ( navigator.geolocation ) {
          function locationSuccess( position ) {
            var coords = position.coords;
            //alert( coords.latitude+':'+coords.longitude );
            var coo = {
              lat : coords.latitude,
              lng : coords.longitude
            };
            //alert( JSON.stringify( coo ) );
            ws.send( JSON.stringify( coo ) );
          }
          function locationError( error ){
            switch(error.code) {
              case error.TIMEOUT:
                console.log("A timeout occured! Please try again!");
                break;
              case error.POSITION_UNAVAILABLE:
                console.log('We can\'t detect your location. Sorry!');
                break;
              case error.PERMISSION_DENIED:
                console.log('Please allow geolocation access for this to work.');
                break;
              case error.UNKNOWN_ERROR:
                console.log('An unknown error occured!');
                break;
            }
          }
          var options = {
            // 指示浏览器获取高精度的位置，默认为false
            enableHighAcuracy: true,
            // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
            timeout: 5000,
            // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
            maximumAge: 3000
          };
          setInterval( function() {
            navigator.geolocation.getCurrentPosition( locationSuccess, locationError, options );
          }, 1000 );
          // watchPosition只要设备位置发生变化，就会执行
          //var watcherId = navigator.geolocation.watchPosition( locationSuccess, locationError, options );
          //clearwatch用于终止watchPosition方法
          //navigator.geolocation.clearWatch( watcher_id );
        } else {
          alert("Your browser does not support Geolocation!");
        }

CV黄龙：https://github.com/elarity/wechat-official-accounts-demo-code

上面的HTML && JS代码保存好后，请在手机浏览器上访问该HTML页面地址，因为手机浏览器可以获取手机GPS数据～～～顺利访问后，结果分别如下图所示：

服务端