精华内容
下载资源
问答
  • 一个后台执行的服务采用百度地图定位每隔五分钟获取一次经纬度,然后将经纬度上传到服务器,客户端从服务器获得一系列点之后将他们连起来,但是效果不是很好,出来的路线很直也很乱,有没有什么方法让出的轨迹...
  • 如何地图曲线轨迹(贝塞尔曲线) 标签: Android高德地图曲线地图贝塞尔曲线地图路径渐变色 2015-11-12 11:04 1011人阅读 评论(1) 收藏 举报  分类: Android开发高德地图部分(1)  ...
     

    如何在地图上画曲线轨迹(贝塞尔曲线)

    标签: Android高德地图曲线地图贝塞尔曲线地图路径渐变色
     1011人阅读 评论(1) 收藏 举报
     分类:

    做过地图开发的朋友都知道,对于高德或者百度地图来说,通过polylineOptions.add(point);aMap.addPolyline(polylineOptions);方法得到的地图路径是折线,而且颜色无法渐变,很难达到美观的项目需求。在我的上一个项目中,需求是行程结束后得到平滑的路径曲线,而且要有渐变色。本人开始从高德的API中找了很久也无法实现这样的需求,甚至想过自己写一个贝塞尔曲线的算法,但是水平有限只好放弃。最后采用的方法是在地图上面加一个画板,自定义一个View,通过path.quadTo(x1, y1, x2, y2)方法实现曲线需求,通过LinearGradient实现渐变色需求。以高德地图为例,详情如下:

    1.在行程结束的时候记录下形成过程中所有的定位点的坐标值,保存在实体类的集合中。代码如下:

    /**
     *
    定位点的数据结构实体类
    */
    public class FileRecordData {
        public double lat;
        public double lon;
    }

    在主Activity中,创建FileRecordData的List集合:

    ArrayList<FileRecordData> fileDatas;

    在每次定位重写的onLocationChanged方法里调用代码:

    FileRecordData .lat = aLocation.getLatitude();

    FileRecordData .lon = aLocation.getLongitude();

    fileDatas.add(FileRecordData );

    2.得到了所有的定位点,需要将所有的点都显示在可视化地图空间内:

    Projection projection = aMap.getProjection();

    public Point[] pointzu;

    pointzu = new Point[fileDatas.size()];


    if (fileDatas != null && 0 != fileDatas.size()) {

    //获得起点和终点坐标
    pointstart = new LatLng(fileDatas.get(0).lat, fileDatas.get(0).lon);
    pointend = new LatLng(fileDatas.get(fileDatas.size() - 1).lat,
    fileDatas.get(fileDatas.size() - 1).lon);
    }
    // 设置所有maker显示在View中
    if (null != fileDatas && 0 != fileDatas.size()) {
    LatLngBounds bounds;
    double xMax = fileDatas.get(0).lat, xMin = fileDatas.get(0).lat, yMax = fileDatas
    .get(0).lon, yMin = fileDatas.get(0).lon;
    // 挑选出最大和最小的经纬度
    for (int i = 0; i < fileDatas.size(); i++) {
    if (fileDatas.get(i).lat >= xMax) {
    xMax = fileDatas.get(i).lat;
    }
    if (fileDatas.get(i).lat <= xMin) {
    xMin = fileDatas.get(i).lat;
    }
    if (fileDatas.get(i).lon >= yMax) {
    yMax = fileDatas.get(i).lon;
    }
    if (fileDatas.get(i).lon <= yMin) {
    yMin = fileDatas.get(i).lon;
    }
    }

    //圈出一个能显示所有定位点的最左上、左下、右上、右下的区域的坐标
    double xx = (xMax - xMin) / 5, yy = (yMax - yMin) / 5;
    LatLng leftup = new LatLng(xMax + xx, yMin - yy);
    LatLng leftdown = new LatLng(xMin - xx, yMin - yy);
    LatLng rightup = new LatLng(xMax + xx, yMax + yy);
    LatLng rightdown = new LatLng(xMin - xx, yMax + yy);
    //将四个点放入可视化地图内
    bounds = new LatLngBounds.Builder().include(pointstart)
    .include(pointend).include(leftup).include(leftdown)
    .include(rightdown).include(rightup).build();

    aMap.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, 20));
    aMap.getUiSettings().setMyLocationButtonEnabled(false);
    aMap.getUiSettings().setZoomControlsEnabled(false);


    addOverlayToMap();
    }

    3.所有定位点的坐标已经有了,将定位坐标转化为屏幕坐标:

    for (int i = 0; i < fileDatas.size(); i++) {
    LatLng point = new LatLng(fileDatas.get(i).lat,
    fileDatas.get(i).lon);
    pointzu[i] = projection.toScreenLocation(point);
    }

    4.将pointzu传到自定义的View类中。重写onMeasure和onDraw方法。

    public Point[] pointzu;

    private Paint barPaint;

    private float x0,y0,x1,y1;//起始点和终点坐标

    /**
    * 初始化画笔等
    */
    private void init() {
    barPaint = new Paint();
    barPaint.setColor(Color.parseColor("#ed6731"));
    barPaint.setColor(0xff15B503);
    barPaint.setStrokeWidth(10);
    barPaint.setAntiAlias(true);// 设置画笔为无锯齿
    barPaint.setStyle(Style.STROKE);// 设置为空心
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);

    setMeasuredDimension(widthSize, heightSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
    Path pointPath = new Path();
    if (pointzu != null) {
    float firstX = (float) pointzu[0].x;
    float firstY = (float) pointzu[0].y;

    /**
      *
    设置曲线渐变色

    */

    LinearGradient lgGradient = new LinearGradient(x0, y0, x1, y1,
    new int[] { 0xff00ff00, 0xffff0000, 0xff0000ff }, null,
    TileMode.MIRROR);
    barPaint.setShader(lgGradient);


    /**
      * 设置贝塞尔曲线

    */

    pointPath.reset();
    pointPath.moveTo(firstX, firstY);
    x0 = (float) pointzu[0].x;
    y0 = (float) pointzu[0].y;
    x1 = (float)pointzu[pointzu.length-1].x;
    y1 = (float)pointzu[pointzu.length-1].y;

    for (int n = 1; n < pointzu.length; n++) {
    float x = (float) pointzu[n].x;
    float y = (float) pointzu[n].y;
    pointPath.quadTo(firstX, firstY, (firstX + x) / 2, (firstY + y) / 2);
    firstX = x;
    firstY = y;
    }
    pointPath.quadTo((firstX+(float)pointzu[pointzu.length-2].x)/2, (firstY+(float)pointzu[pointzu.length-2].y)/2, firstX, firstY);//三次贝塞尔曲线
    canvas.drawPath(pointPath, barPaint);


    /**
      *
    给曲线添加起点和终点图片
    */

    Bitmap bitmapStart = BitmapFactory.decodeResource(getResources(), R.drawable.riding_start_point);
    Bitmap bitmapEnd = BitmapFactory.decodeResource(getResources(), R.drawable.riding_end_point);


    /**
      *
    因为图片的坐标不是图片中心作为参照点的,而是从左上角作为参照点,所有需要偏移量将参照点移到图片中心。
    */

    canvas.drawBitmap(bitmapStart, x0-25, y0-34, barPaint);
    canvas.drawBitmap(bitmapEnd, x1-25, y1-34, barPaint);

    }else {
    System.out.println("pointzu = null");
    }
    super.onDraw(canvas);
    }

    5.进行到上一步就可以看到地图上的平滑渐变曲线啦,不过这个例子是行程结束得到的曲线,并且地图是不能放大的,因为已经被画板盖住了;如果需求是在行驶过程中的路线变为曲线,那么需要每次定位后都将重新刷新一次自定义View,不过因为被画板盖住,所以地图依然无法放大,这一点目前还没有太好的解决办法,如果有大神知道,请留言指教,谢谢!

    效果图如下:

    展开全文
  • 上篇文章讲述了如何地图显示位置点,这篇文章主要讲述如何地图运动轨迹,以及地图图层点击事件的处理。 很多运动类的app都有出跑步者运动轨迹的需求,拿咕咚来说,我们看一下它的效果图: 咕咚运动...

     

    上篇文章讲述了如何在地图显示位置点,这篇文章主要讲述如何在地图上画运动轨迹,以及地图图层点击事件的处理。

    很多运动类的app都有画出跑步者运动轨迹的需求,拿咕咚来说,我们看一下它的效果图:

    咕咚运动轨迹图


    本篇将要实现的效果
    1.跑步结束后,静态的画出整个运动轨迹
    2.跑步过程中,时时动态的画运动轨迹

    效果图


    如何实现:
    1.将点与点连成线,在百度地图MapView上画出线条图层;
    2.获取定位点List<LatLng>:通过百度定位sdk:LocationClient类获取,户外运动画运动轨迹,要求位置点的精度高,所以我们必须使用gps定位类型的位置结果。

    
    //允许使用gps定位
    mOption.setOpenGps(true);

    更多百度定位sdk参数详解请阅读篇头百度地图(一)文章

    一 静态画整个运动轨迹

    1.画轨迹

    
    //伪代码
    public void onCreate(){
      // 地图初始化
      MapView mMapView = (MapView) findViewById(R.id.bmapView);
      BaiduMap mBaiduMap = mMapView.getMap();
      // 开启定位图层
      mBaiduMap.setMyLocationEnabled(true);
    
      //获取运动后的定位点
      coordinateConvert();
    
      //设置缩放中点LatLng target,和缩放比例          
      MapStatus.Builder builder = new MapStatus.Builder();
      builder.target(target).zoom(18f);
    
      //地图设置缩放状态
      mBaiduMap.animateMapStatus(MapStatusUpdateFactory.newMapStatus(builder.build()));
    
      /**
      * 配置线段图层参数类: PolylineOptions
      * ooPolyline.width(13):线宽
      * ooPolyline.color(0xAAFF0000):线条颜色红色
      * ooPolyline.points(latLngs):List<LatLng> latLngs位置点,将相邻点与点连成线就成了轨迹了
      */
      OverlayOptions ooPolyline = new PolylineOptions().width(13).color(0xAAFF0000).points(latLngs);
    
      //在地图上画出线条图层,mPolyline:线条图层
      mPolyline = (Polyline) mBaiduMap.addOverlay(ooPolyline);
      mPolyline.setZIndex(3);
    }
    
    /**
     * 我这里是在google地图取下来的wgs84坐标集合Const.googleWGS84,模拟的运动后获取的坐标集合,
       所以需要转化成百度坐标;实际应该是将定位sdk返回的位置点加入到位置集合中,
       定位sdk需要设置返回坐标为百度坐标:mOption.setCoorType("bd09ll"),这样就直接用,不用转换了。
     */
    private void  coordinateConvert(){
      //百度坐标转化工具类CoordinateConverter 
      CoordinateConverter converter  = new CoordinateConverter(); 
    
      /**
      * 设置需要转化的坐标类型
        CoordType.COMMON:google地图、腾讯地图、高德地图所用坐标
        CoordType.GPS:设备采集的原始GPS坐标
      */
      converter.from(CoordType.COMMON);
    
      double lanSum = 0;
      double lonSum = 0;
      for (int i = 0; i < Const.googleWGS84.length; i++) {
        //"39.881970,116.456218"
        String[] ll = Const.googleWGS84[i].split(",");
        LatLng sourceLatLng = new LatLng(Double.valueOf(ll[0]), Double.valueOf(ll[1]));
        converter.coord(sourceLatLng);  //需要转化的坐标点
        LatLng desLatLng = converter.convert();  //转化成百度坐标点
        latLngs.add(desLatLng);//加入定位点集合
        lanSum += desLatLng.latitude;
        lonSum += desLatLng.longitude;
      }
    
      //我这里设置地图的缩放中心点为所有点的几何中心点
      target = new LatLng(lanSum/latLngs.size(), lonSum/latLngs.size());
    }

    运动轨迹效果

    轨迹图


    2.添加起始图标图层、点击图层响应事件

    
    //始点图层图标
    BitmapDescriptor startBD= BitmapDescriptorFactory
                .fromResource(R.drawable.ic_me_history_startpoint);
    //终点图层图标
    BitmapDescriptor finishBD= BitmapDescriptorFactory
                .fromResource(R.drawable.ic_me_history_finishpoint);
    
    //地图中显示信息窗口
    InfoWindow mInfoWindow;
    
    MarkerOptions oStart = new MarkerOptions();//地图标记类型的图层参数配置类 
    oStart.position(latLngs.get(0));//图层位置点,第一个点为起点
    oStart.icon(startBD);//设置图层图片
    oStart.zIndex(1);//设置图层Index
    //添加起点图层
    Marker mMarkerA = (Marker) (mBaiduMap.addOverlay(oStart)); 
    
    //添加终点图层
    MarkerOptions oFinish = new MarkerOptions().position(latLngs.get(latLngs.size()-1)).icon(finishBD).zIndex(2);
    Marker mMarkerB = (Marker) (mBaiduMap.addOverlay(oFinish));
    
    //设置图层点击监听回调
    mBaiduMap.setOnMarkerClickListener(new OnMarkerClickListener() {
      public boolean onMarkerClick(final Marker marker) {
        if (marker.getZIndex() == mMarkerA.getZIndex() ) {//如果是起始点图层
          TextView textView = new TextView(getApplicationContext());
          textView.setText("起点");
          textView.setTextColor(Color.BLACK);
          textView.setGravity(Gravity.CENTER);
          textView.setBackgroundResource(R.drawable.popup);
    
          //设置信息窗口点击回调
          OnInfoWindowClickListener listener = new OnInfoWindowClickListener() {
            public void onInfoWindowClick() {
              //这里是主线线程,可以实现自己的一些功能
              Toast.makeText(getApplicationContext(),"这里是起点", Toast.LENGTH_SHORT).show();
              mBaiduMap.hideInfoWindow();//隐藏信息窗口
            }
          };
    
          LatLng latLng = marker.getPosition();//信息窗口显示的位置点
    
          /**
          * 通过传入的 bitmap descriptor 构造一个 InfoWindow
          * bd - 展示的bitmap
            position - InfoWindow显示的位置点
            yOffset - 信息窗口会与图层图标重叠,设置Y轴偏移量可以解决
            listener - 点击监听者
          */
          mInfoWindow = new InfoWindow(BitmapDescriptorFactory.fromView(textView), latLng, -47, listener);
          mBaiduMap.showInfoWindow(mInfoWindow);//显示信息窗口
        } else if (marker.getZIndex() == mMarkerB.getZIndex()) {//如果是终点图层
          Button button = new Button(getApplicationContext());
          button.setText("终点");
          button.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
              Toast.makeText(getApplicationContext(),"这里是终点", Toast.LENGTH_SHORT).show();
              mBaiduMap.hideInfoWindow();
            }
          });
    
          LatLng latLng = marker.getPosition();
          /**
          * 通过传入的 view 构造一个 InfoWindow, 此时只是利用该view生成一个Bitmap绘制在地图中,监听事件由自己实现。
            view - 展示的 view
            position - 显示的地理位置
            yOffset - Y轴偏移量
          */
          mInfoWindow = new InfoWindow(button, latLng, -47);
          mBaiduMap.showInfoWindow(mInfoWindow);
        } 
        return true;
     }
    });
    
    //也可以给运动轨迹添加点击事件
    mBaiduMap.setOnPolylineClickListener(new BaiduMap.OnPolylineClickListener() {
      @Override
      public boolean onPolylineClick(Polyline polyline) {
        if (polyline.getZIndex() == mPolyline.getZIndex()) {
          Toast.makeText(getApplicationContext(),"点数:" + polyline.getPoints().size() + ",width:" + polyline.getWidth(), Toast.LENGTH_SHORT).show();
        }
        return false;
      }
    });

    运动轨迹效果,点击图标弹出信息窗口

    点击起始图标


    点击图标弹出信息窗口弹出Toast

    弹出Toast


    到这里,运动结束后画出整个轨迹图和图层添加点击事件就介绍完了。

    二 时时动态的画运动轨迹

    时时动态画运动轨迹效果

    运动轨迹:箭头为当前位置和方向


    关键在于取点:gps刚接收到信号时返回的一些点精度不高,容易造成位置偏移,如何取点很重要。

    
    //伪代码
    public void onCreate() {
      mMapView = (MapView) findViewById(R.id.bmapView);
      mBaiduMap = mMapView.getMap();
      // 开启定位图层
      mBaiduMap.setMyLocationEnabled(true);
    
      /**添加地图缩放状态变化监听,当手动放大或缩小地图时,拿到缩放后的比例,然后获取到下次定位,
      *  给地图重新设置缩放比例,否则地图会重新回到默认的mCurrentZoom缩放比例
      */
      mCurrentZoom = 18;
      mBaiduMap.setOnMapStatusChangeListener(new OnMapStatusChangeListener() {
        @Override
        public void onMapStatusChangeStart(MapStatus arg0) {
        }
    
        @Override
        public void onMapStatusChangeFinish(MapStatus arg0) {
          mCurrentZoom = arg0.zoom;//获取手指缩放地图后的值
        }
    
        @Override
        public void onMapStatusChange(MapStatus arg0) {
        }
      });
    
      //设置定位图标类型为跟随模式
      mBaiduMap.setMyLocationConfiguration(new MyLocationConfiguration(
                    com.baidu.mapapi.map.MyLocationConfiguration.LocationMode.FOLLOWING, true, null));
    
      // 定位初始化
      mLocClient = new LocationClient(this);
      mLocClient.registerLocationListener(myListener);
      LocationClientOption option = new LocationClientOption();
      option.setLocationMode(LocationMode.Device_Sensors);//只接受gps位置
      option.setOpenGps(true); // 允许gps定位
      option.setCoorType("bd09ll"); // 设置坐标类型
      option.setScanSpan(1000);//一秒一个gps
      mLocClient.setLocOption(option);
    }
    
    //开始获取位置点
    public void onStart() {
      start.setOnClickListener(new OnClickListener() {
    
        @Override
        public void onClick(View v) {
            if (mLocClient != null && !mLocClient.isStarted()) {
                mLocClient.start();
            }
        }
      });
    }
    
    //位置回调,取点很重要
    public class MyLocationListenner implements BDLocationListener {
    
        @Override
        public void onReceiveLocation(final BDLocation location) {
    
            if (location == null || mMapView == null) {
                return;
            }
    
            if (location.getLocType() == BDLocation.TypeGpsLocation) {//只要gps点
    
                if (isFirstLoc) {//首次定位
                    /**第一个点很重要,决定了轨迹的效果,gps刚接收到信号时返回的一些点精度不高,
                    * 尽量选一个精度相对较高的起始点,这个过程大概从gps刚接收到信号后5-10秒就可以完成,不影响效果。
                    * 注:gps接收卫星信号少则十几秒钟,多则几分钟,
                    * 如果长时间手机收不到gps,退出,重启手机再试,这是硬件的原因
                    */
                    LatLng ll = null;
    
                    //选一个精度相对较高的起始点
                    ll = getMostAccuracyLocation(location);
                    if(ll == null){
                        return;
                    }
                    isFirstLoc = false;
                    points.add(ll);//加入集合
                    last = ll;
    
                    //显示当前定位点,缩放地图
                    locateAndZoom(location, ll);
    
                    //标记起点图层位置
                    MarkerOptions oStart = new MarkerOptions();// 地图标记覆盖物参数配置类
                    oStart.position(points.get(0));// 覆盖物位置点,第一个点为起点
                    oStart.icon(startBD);// 设置覆盖物图片
                    mBaiduMap.addOverlay(oStart); // 在地图上添加此图层
                    return;//画轨迹最少得2个点,首地定位到这里就可以返回了
                }
    
                //从第二个点开始
                LatLng ll = new LatLng(location.getLatitude(), location.getLongitude());
                //sdk回调gps位置的频率是1秒1个,位置点太近动态画在图上不是很明显,可以设置点之间距离大于为5米才添加到集合中
                if (DistanceUtil.getDistance(last, ll) < 5) {
                    return;
                }
    
                points.add(ll);//如果要运动完成后画整个轨迹,位置点都在这个集合中
    
                last = ll;
    
                //显示当前定位点,缩放地图
                locateAndZoom(location, ll);
    
                //清除上一次轨迹,避免重叠绘画
                mMapView.getMap().clear();
    
                //起始点图层也会被清除,重新绘画
                MarkerOptions oStart = new MarkerOptions();
                oStart.position(points.get(0));
                oStart.icon(startBD);
                mBaiduMap.addOverlay(oStart);
    
                //将points集合中的点绘制轨迹线条图层,显示在地图上
                OverlayOptions ooPolyline = new PolylineOptions().width(13).color(0xAAFF0000).points(points);
                mPolyline = (Polyline) mBaiduMap.addOverlay(ooPolyline);
            }
        }
    }
    
    //首次定位很重要,选一个精度相对较高的起始点
    private LatLng getMostAccuracyLocation(final BDLocation location){
    
        if (location.getRadius()>25) {//gps位置精度大于25米的点直接弃用
            return null;
        }
    
        LatLng ll = new LatLng(location.getLatitude(), location.getLongitude());
    
        if (DistanceUtil.getDistance(last, ll ) > 5) {
            last = ll;
            points.clear();//有两点位置大于5,重新来过
            return null;
        }
        points.add(ll);
        last = ll;
        //有5个连续的点之间的距离小于5,认为gps已稳定,以最新的点为起始点
        if(points.size() >= 5){
            points.clear();
            return ll;
        }
        return null;
    }
    
    //显示当前定位点,缩放地图
    private void locateAndZoom(BDLocation location, LatLng ll) {
        /**
        * 记录当前经纬度,当位置不变,手机转动,取得方向传感器的方向,
          给地图重新设置位置参数,在跟随模式下可使地图箭头随手机转动而转动
        */
        mCurrentLat = location.getLatitude();
        mCurrentLon = location.getLongitude();
        locData = new MyLocationData.Builder().accuracy(0)//去掉精度圈
                //此mCurrentDirection为自己获取到的手机传感器方向信息,顺时针0-360
                .direction(mCurrentDirection).latitude(location.getLatitude())
                .longitude(location.getLongitude()).build();
        mBaiduMap.setMyLocationData(locData);//显示当前定位位置点
    
        //给地图设置缩放中心点,和缩放比例值
        builder = new MapStatus.Builder();
        builder.target(ll).zoom(mCurrentZoom);
        mBaiduMap.animateMapStatus(MapStatusUpdateFactory.newMapStatus(builder.build()));
    }
    
    //运动结束增加终点图标
    finish.setOnClickListener(new OnClickListener() {
    
        @Override
        public void onClick(View v) {
    
            if (mLocClient != null && mLocClient.isStarted()) {
                mLocClient.stop();//停止定位
    
                if(points.size() <= 0){
                    return;
                }
    
                //运动结束记得标记终点图标
                MarkerOptions oFinish = new MarkerOptions();
                oFinish.position(points.get(points.size() - 1));
                oFinish.icon(finishBD);
                mBaiduMap.addOverlay(oFinish); 
            }
        }
    });

    退出记得释放资源

    
    //伪代码
    protected void onDestroy() {
      // 退出时销毁定位
      mLocClient.unRegisterLocationListener(myListener);
      mLocClient.stop();
      // 关闭定位图层
      mBaiduMap.setMyLocationEnabled(false);
      mMapView.getMap().clear();
      mMapView.onDestroy();
      mMapView = null;
      startBD.recycle();
      finishBD.recycle();
    }

    注:我们画运动轨迹要求定位sdk返回的位置精度很高,轨迹的效果才会好,因而必须接受gps位置点。但是gps位置的在刚开始收到信号时精度不高,会出现位置漂移的情况,所以要选取一个精度较好的点。在建筑物、桥梁、大树、隧道里面,gps信号不好,精度不高,所以在开阔地带,运动轨迹效果更好。

    展开全文
  • vue项目中 使用百度地图 轨迹动画

    千次阅读 热门讨论 2020-04-09 16:55:08
    在上篇博客中,介绍了如何在vue项目中集成百度地图,这篇博客主要是说如何在vue项目中使用轨迹动画 在项目开发过程中,比如你需要实时的观察一个人的行走路线,行走过程. 这个时候我们就需要在地图上使用轨迹动画了,...

        在上篇博客中,介绍了如何在vue项目中集成百度地图,这篇博客主要是说如何在vue项目中使用轨迹动画

        在项目开发过程中,比如你需要实时的观察一个人的行走路线,行走过程.  这个时候我们就需要在地图上使用轨迹动画了,根据不同的坐标点来设置人物或者车辆的行走轨迹.

        具体代码如下:

    <template>
      <div class="patrol_area">
        <div id="allmap" style="height:600px;margin-top:5px;"></div>
      </div>
    </template>
    
    <script>
    import { mapGetters } from 'vuex'
    export default {
      name: 'Dashboard',
      data(){
        return {
          path : [{
            'lng': 121.814224,
            'lat': 31.156484
            }, {
              'lng': 121.808547,
              'lat': 31.165754
            }, {
              'lng': 121.796186,
              'lat': 31.184848
            }, {
              'lng': 121.788353,
              'lat': 31.192015
            }, {
              'lng': 121.771752,
              'lat': 31.194734
            },
            {
              'lng':  121.74969,
              'lat': 31.189791
            },
            {
              'lng': 121.754217,
              'lat': 31.179658
            }, {
              'lng': 121.757523,
              'lat': 31.167794
            }],
            maps:'',
            pls:''
    
        }
      },
      mounted(){
        this.pathStart()
       
      },
      computed: {
        ...mapGetters([
          'name'
        ])
      },
      methods:{
       
        // 创建地图实例,并给设置移动路径
          pathStart(){
              // GL版命名空间为BMapGL
          // 按住鼠标右键,修改倾斜角和角度
            var map = new BMapGL.Map("allmap");    // 创建Map实例
            map.centerAndZoom(new BMapGL.Point(121.814224,31.156484), 17);  // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      
              var point = [];
              for (var i = 0; i < this.path.length; i++) {
                  point.push(new BMapGL.Point(this.path[i].lng, this.path[i].lat));
              }
            var pl = new BMapGL.Polyline(point);
            
            this.maps = map
            this.pls = pl
            setTimeout(this.start, 3000);
       
             map.setHeading(64.5);
             map.setTilt(73);
          },
          // 创建个轨迹动画对象,并配置参数
          start (){
            var trackAni = new BMapGLLib.TrackAnimation(this.maps, this.pls, {
                  overallView: true,
                  tilt: 30,
                  duration: 20000,
                  delay: 300
              });
              trackAni.start();
          }
          
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .dashboard {
      &-container {
        margin: 30px;
      }
      &-text {
        font-size: 30px;
        line-height: 46px;
      }
    }
    </style>
    

         因为百度api中的方法是是不适用于vue项目的,所以我将其进行了改动, maps和pls是用来存储map对象和pl对象的,因为在我们的start中也是要用到的.  刚开始,我是使用了参数进行传值,就是setTimeout(this.start(map,pl), 3000);.可是如果这样写,start方法则会立刻执行,那我们设置的setTimeout也就无用了.所以换了现在的方法.path是一个个位置点

        这个就是地图中的 轨迹动画,欢迎指正, 希望对您有所帮助,欢迎探讨

        一直学习,一直踩坑中

    展开全文
  • 比如,我将app打开,原地不动5分钟,都会显示有几十上百米的位置移动,谷歌地图或华为运动却能做的相对比较准确的绘制真实的运动轨迹。有没有办法能够提高这个位置精度,能够尽量减少位置偏移量,即便是100米偏移...
  • 从来没做过地图这一块,现在有个问题: 后台传过来一组坐标,前台jsp页面如何根据这些坐标,把坐标点连起来,形成一个地图轨迹? 最好是百度地图,有没这方面的例子可以参考的?
  • 根据经纬度画轨迹

    千次阅读 2020-05-26 21:53:28
    folium简单应用导入库读取json经纬度数据并画图,保存成html添加鼠标点击地图显示经纬度功能效果合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表...

    folium简单应用

    # 导入库
    
    import folium
    import os,json
    import numpy as np
    
    
    ## 读取json经纬度数据并画图,保存成html
    
    
    with open('dataplt.json') as f:
        data = json.load(f)
        
    '''创建Map对象'''
    m = folium.Map(location=data[0],
                  zoom_start=14)
    
    '''查看m的类型'''
    m.__class__
    
    ls = folium.PolyLine(locations=[data],
                        color='blue')
    ls.add_to(m)
    
    '''为m添加标记部件'''
    folium.Marker(
        location=data[-1],
        popup='End Point Location',
        icon=folium.Icon(color='red', icon='info-sign')
    ).add_to(m)
    
    '''为m添加标记部件--圆圈'''
    folium.Circle(
        radius=200,
        location=data[2],
        popup='The Waterfront',
        color='crimson',
        fill=False,
    ).add_to(m)
    
    #print(data)
    # 添加鼠标点击地图显示经纬度功能
    m.add_child(folium.LatLngPopup())
    
    
    
    m.save('folium_plot.html')
    

    m.save(‘folium_plot.html’)

    效果

    在这里插入图片描述

    展开全文
  • 1. 如何在arcgis for silverlight中点、线 2. 如何将经纬度坐标转换成地方坐标系 1. 如何在arcgis for silverlight中点、线  首先,定义两个对象层,之后的点和线都将分别在这两个层上显示出来。 ...
  • 上一篇文章介绍了地图画轨迹的基本原理和实现。不难发现,当位置处于建筑物密集区、桥梁、高架桥下,gps信号较差时,画出来的轨迹效果会比较差。即使是在空旷地带,也难免会出现gps漂移的情况而造成轨迹的偏差。这时...
  • MapKit出运行轨迹

    千次阅读 2014-05-13 15:54:21
    iOS开发之在地图上绘制出你运行的轨迹 首先我们看下如何地图上绘制曲线。在Map Kit中提供了一个叫MKPolyline的类,我们可以利用它来绘制曲线,先看个简单的例子。  使用下面代码从一个文件中读取出经纬度,然后...
  • 最近把之前的地图代码再看了一遍,想借此机会小结一番,下面是效果图,点没取好,...下面详细讲讲具体如何使用百度地图,直至出我们要的行为轨迹。 初始化设置 第一步,先在 XML 中放入地图控件: <com.baidu.m
  • 点均可成功出,单条轨迹也可完全无误的出。就是两条轨迹间会有第一条轨迹的尾端和第二条轨迹头部相连的情况。 在高德的网上找了demo中的数据 ``` pathSimplifierIns.setData([{ name: '轨迹0', path: ...
  • 百度路书实现轨迹回放(标准)

    千次阅读 2020-10-20 00:44:40
    因此,在查看了多个文档后,选择了一个勉强达到需求的办法,就跟canvas的方式一样,每秒清除地图上的所有覆盖物,然后车重新定位地图中心点,出运行到的轨迹,虽然可行,但是整个车运行的过程中,就宛如地图在移动...
  • 思想:如果需要在地图上实现实时跟踪,那么首先就需要实现定位功能,在实现了定位功能的基础上,需要在地图上画出行走轨迹,那么如何画出行走轨迹?就需要实时地记录行走的经纬度,两点之间画一条直线,中间设置定位...
  • ArcGIS Api For Flex 动态点和线 上一篇 / ...在项目当中往往会用到在地图上跟踪GPS目标,这就需要在地图上动态GPS点和行动轨迹,下面来看看在Flex 中是如何做到的: 代码如下: ht
  • 这个方法主要就是从文件中读出经纬度然后在百度地图画轨迹,每次执行的时候,如果轨迹没有完全画完就退出,程序就会崩溃,如果一直等待画完再退出,就不会崩溃,小弟菜鸟,不知道如何解决,各位大神帮帮忙。
  • ArcGIS Api For Flex 动态点和线

    千次阅读 2013-12-05 11:21:15
    在项目当中往往会用到在地图上跟踪GPS目标,这就需要在地图上动态GPS点和行动轨迹,下面来看看在Flex 中是如何做到的:     代码如下:   http://ns.adobe.com/mxml/2009”  xmlns:s=”library:/...
  • 我目前正在做一个openlayers项目,项目需要实现的功能是在geoserver中读取地图,然后访问数据库中的地理位置数据表,呈现在地图上,并进行实时定位,并出位置移动的轨迹。跪求大神解决!
  • 项目需求:在地图tiff文件上轨迹轨迹周围一定距离的范围 难点:tiff文件格式的读取,图片与经纬度之间的转换,图片具有透明度,在图片上作图 [boston,R] = geotiffread('boston.tif'); figure %mapshow...
  • openLayers geoserver常见问题

    热门讨论 2011-03-23 17:43:21
    OpenLayers 中最短轨迹 4 使用TileCache配合OpenLayers 4 openlayers如何准确测距 9 openlayers简单实用例子 9 关于TileCache函数 13 openlayers 有函数说明的类图 14 go 14 Maker 一多,客户端就死掉 15 ...
  • GIS、GPS监控界面设计

    千次阅读 2013-10-31 12:31:13
    无论是开发地理信息系统还是开发视频监控系统,都会面临者一个问题:界面如何设计,实质是信息数据的如何组合搭配的问题。 因为需要展现的数据不单单是一个破地图和一个坐标,而是将一切与监控对象相关的所有的...
  • mapxtreme练习笔记

    2010-07-20 08:58:11
    28. 线轨迹 31 29. 多点一线 31 30. 改变线或区域的样式 32 31. 显示多边形 32 32. 添加图元 32 33. 控制显示比例 33 34. 显示多行InfoTips 33 35. 取得选择图元的ID列表 35 36. 用程序选择指定层中符合条件的...
  • 智能扫地机VHDL FPGA

    2012-07-12 19:02:40
    如何设计地图设置方案,并且将地图保存下来。  状态机的设计  通过控制键盘实现上下左右的移动.  动画的制作,用什么样的程序才能形成漂亮的动画。  扫描速度的控制的实现,利用本身所采集的数据来作用...
  • 17.2.7 触控和轨迹球事件处理范例——Touch & Trackball 389 17.2.8 透明事件范例——Transparent 391 17.2.9 半透明事件范例——Translucent 394 第18章 Android动态壁纸——Live Wallpaper 18.1 Android动态...
  • 此view的难点是外围文字在环绕过程中,坐标位置的确认,即依圆心坐标,半径,扇形角度,如何计算出扇形终射线与圆弧交叉点的xy坐标,所幸网上都能找到解决方案及背后的数学模型。 拖动的实现是在规定的区域内,当...
  • 6.23 一颗心,打电话给HONEY 6.24 开启内置闹钟与已安装的应用程序设置 6.25 在SDK开发环境中访问JNI接口 第7章 娱乐多媒体 7.1 访问Drawable资源的宽和高 7.2 绘制几何图形 7.3 手机屏幕保护程序 7.4 用手指移动...

空空如也

空空如也

1 2 3
收藏数 51
精华内容 20
关键字:

地图如何画轨迹