bMap-mapSmoothMarker
/
views
/
index-gd.ejs

<!doctype html>
<html lang="zh-CN">

<head>
  <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/expand-path.html -->
  <!-- <base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/" /> -->
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>高德地图平移</title>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0px;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script type="text/javascript" src="/javascripts/socket.io-client/socket.io.js"></script>
  <script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.8&key=fa377a69f324103dd2b2e3dd1bc3d10a&plugin=AMap.Driving'></script>
  <!-- UI组件库 1.0 -->
  <script type="text/javascript" src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
  <script src="https://unpkg.com/gcoord/dist/gcoord.js"></script>
  <script>
    //连接socket后端服务器
    var socket = io.connect("ws://127.0.0.1:33660");
    socket.on('connect', function () {
      //连接成功
      console.log("Socket->ok:33660", new Date());
      socket.send('欢迎连接Socket！');
    });
    socket.on('disconnect', function (data) {
      //连接断开
      console.error("Socket->Error", data, new Date());
    });
  </script>
  <script>
    //转换经纬度
    var toLnglats = function (lng, lat) {
      var lnglats = gcoord.transform([lng, lat], // 经纬度坐标
        gcoord.BD09, // 当前坐标系
        gcoord.GCJ02, // 目标坐标系
      );
      return lnglats;
    }
  </script>
  <script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
      zoom: 12,
      center: [106.757, 31.873],
    });
  </script>
  <script>
    //构造路线导航类
    var driving = new AMap.Driving({
      map: map,
      autoFitView: true,
      hideMarkers: true,
    });
    var startLngLat = new AMap.LngLat(toLnglats(106.7632446289062, 31.862472517752668)[0], toLnglats(106.7632446289062, 31.862472517752668)[1]);
    var endLngLat = new AMap.LngLat(toLnglats(106.75643157958979, 31.876993165787926)[0], toLnglats(106.75643157958979, 31.876993165787926)[1]);
    var zts1LngLat = new AMap.LngLat(toLnglats(106.75920483336039, 31.866551324204966)[0], toLnglats(106.75920483336039, 31.866551324204966)[1]);
    var waypoints = [zts1LngLat];
    // 根据起终点经纬度规划驾车导航路线
    driving.search(startLngLat, endLngLat, {
      waypoints: waypoints,
    });
  </script>
  <script>
    AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {
      if (!PathSimplifier.supportCanvas) {
        alert('当前环境不支持 Canvas！');
        return;
      };
      var pathSimplifierIns = new PathSimplifier({
        zIndex: 999999999,
        autoSetFitView: false,
        map: map, //所属的地图实例
        getPath: function (pathData, pathIndex) {
          return pathData.path;
        },
        renderOptions: {
          renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
        }
      });
      window.pathSimplifierIns = pathSimplifierIns;
      var allPioit = [toLnglats(106.7632446289062, 31.862472517752668)];
      var data = [{
        name: '动态路线',
        path: [allPioit[0]]
      }];
      pathSimplifierIns.setData(data);
      //对第一条线路（即索引 0）创建一个巡航器
      var navg1 = pathSimplifierIns.createPathNavigator(0, {
        loop: true, //循环播放
        speed: 100 //巡航速度，单位千米/小时
      });
      navg1.start();
      socket.on('message-client', function (res) {//接受到车辆移动->地图推送
        var cursor = navg1.getCursor().clone(), status = navg1.getNaviStatus();
        var zts1LngLat = new AMap.LngLat(toLnglats(res.lon, res.lat)[0], toLnglats(res.lon, res.lat)[1]);
        waypoints.push(zts1LngLat);
        // driving.search(startLngLat, endLngLat, {
        //   waypoints: [zts1LngLat]
        // });
        allPioit.push(toLnglats(res.lon, res.lat));
        data[0].path = allPioit;
        pathSimplifierIns.setData(data); //延展路径
        //重新建立一个巡航器
        navg1 = pathSimplifierIns.createPathNavigator(0, {
          speed: 500, //巡航速度，单位千米/小时
          pathNavigatorStyle: {
            width: 24,
            height: 24,
            //使用图片
            content: PathSimplifier.Render.Canvas.getImageContent('/stationPoint.png', onload, onerror),
            strokeStyle: null,
            fillStyle: null,
            //经过路径的样式
            pathLinePassedStyle: {
              lineWidth: 6,
              strokeStyle: 'black',
              dirArrowStyle: {
                stepSpace: 15,
                strokeStyle: 'red'
              }
            }
          }
        });
        if (status !== 'stop') {
          navg1.start();
        }
        //恢复巡航器的位置
        if (cursor.idx >= 0) {
          navg1.moveToPoint(cursor.idx, cursor.tail);
        }
      });
    });
  </script>
</body>

</html>