跟踪用户绘制折线捕捉到道路地形图 [英] Track a user draw polyline snap to roads bing maps

查看:151
本文介绍了跟踪用户绘制折线捕捉到道路地形图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

想知道是否有人有经验或可以在逻辑上提供帮助,以使用Bing地图跟踪用户(汽车)

当用户旅行时,应该画出他们的行程,但是要紧贴道路,这是我目前设置的方式,线条将穿过建筑物.

因为只要有位置更新,就会计算出2个点并将一条线添加到地图上

(目前正在使用watchPosition,但将来每30秒就会获得位置)

  watchPos() {
    let options = { timeout: 60000 }
    this.watchId = navigator.geolocation.watchPosition((position) => {
      this.lat = position.coords.latitude;
      this.lng = position.coords.longitude;
      this.setMap()
      console.log(this.lat, this.lng)
    }, this.errorHandler, options);

  }
  setMap() {
    this.loc = new Microsoft.Maps.Location(this.lat, this.lng);
    if (!this.initialised) {
      this.oldLoc = this.loc;
      this.initialised = true
      this.map = new Microsoft.Maps.Map(this.driveMap.nativeElement, {
        credentials: CONFIG.BING_API_KEY,
        center: this.loc,
        mapTypeId: Microsoft.Maps.MapTypeId.road,
        navigationBarMode: 2,
        zoom: this.zoom
      });
      this.user = new Microsoft.Maps.Pushpin(this.loc, { icon: '../images/icon.svg' });
      this.map.entities.push(this.user);
      // console.log(loc)
    } else {
      // Draw line
      // from this.oldLoc to this.loc
      let lineVertices = new Array(this.oldLoc, this.loc);
      let line = new Microsoft.Maps.Polyline(lineVertices);
      // Then set oldLoc to new loc
      this.oldLoc = this.loc
      this.map.entities.push(line);
      this.map.setView({
        center: this.loc
      });
      this.user.setLocation(this.loc);
    }
  }

解决方案

Bing Maps在下周末发布了专门针对此目的开​​发的道路API.您传递GPS坐标,它将把它捕捉到道路上.此外,如果传递点数组,您还可以让它返回一条逻辑路径,该逻辑路径将通过捕捉点.观看Bing Maps博客中的公告: https://blogs.bing.com/maps

Was wondering if anyone has any experience or could help with the logic, to track a user (car) with Bing maps

As the user travels a line should be drawn of their journey, but snap to roads, the way I have things set at the moment, lines will be drawn through buildings.

Because whenever there is an update to the position, 2 points are calculated and a line is added to the map

(At the moment am using watchPosition but in future will get position every 30 seconds)

  watchPos() {
    let options = { timeout: 60000 }
    this.watchId = navigator.geolocation.watchPosition((position) => {
      this.lat = position.coords.latitude;
      this.lng = position.coords.longitude;
      this.setMap()
      console.log(this.lat, this.lng)
    }, this.errorHandler, options);

  }
  setMap() {
    this.loc = new Microsoft.Maps.Location(this.lat, this.lng);
    if (!this.initialised) {
      this.oldLoc = this.loc;
      this.initialised = true
      this.map = new Microsoft.Maps.Map(this.driveMap.nativeElement, {
        credentials: CONFIG.BING_API_KEY,
        center: this.loc,
        mapTypeId: Microsoft.Maps.MapTypeId.road,
        navigationBarMode: 2,
        zoom: this.zoom
      });
      this.user = new Microsoft.Maps.Pushpin(this.loc, { icon: '../images/icon.svg' });
      this.map.entities.push(this.user);
      // console.log(loc)
    } else {
      // Draw line
      // from this.oldLoc to this.loc
      let lineVertices = new Array(this.oldLoc, this.loc);
      let line = new Microsoft.Maps.Polyline(lineVertices);
      // Then set oldLoc to new loc
      this.oldLoc = this.loc
      this.map.entities.push(line);
      this.map.setView({
        center: this.loc
      });
      this.user.setLocation(this.loc);
    }
  }

解决方案

Bing Maps has a snap to road API coming out near the end of next week which is specifically designed for this. You pass in your GPS coordinates and it will snap it to the roads, additionally, if you pass in an array of points you can also have it return a logical path that passes through the snapped points. Watch the Bing Maps blog for the announcement: https://blogs.bing.com/maps

这篇关于跟踪用户绘制折线捕捉到道路地形图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆