canvas模拟中国铁路运行图

function drawShapeOptionFun () {
   // 绘制中国地图
   chinaGeometry.features.forEach(function (chinaItem, chinaIndex) {
      var length = chinaItem.geometry.coordinates.length;
      var multipleBool = length > 1 ? true : false;
      chinaItem.geometry.coordinates.forEach(function (chinaChildItem, wordItemIndex) {
          if (multipleBool) {
             // 值界可以使用的经纬度信息
             if (chinaChildItem.length && chinaChildItem[0].length == 2) {
                 drawCanvasFun(chinaChildItem);
             }
             // 需要转换才可以使用的经纬度信息
             if (chinaChildItem.length && chinaChildItem[0].length > 2) {
                 chinaChildItem.forEach(function (countryItem, countryIndex) {
                     drawCanvasFun(countryItem);
                 })
             }
          } else {
              var countryPos = null;
              if (chinaChildItem.length > 1) {
                  countryPos = chinaChildItem;
              } else {
                 countryPos = chinaChildItem[0];
              }
              if (countryPos) {
                  drawCanvasFun(countryPos);
              }
           }
        })
     })
}
// canvas绘制平面
function drawCanvasFun (itemPosition) {
    ctx.fillStyle = mapColor;
    ctx.strokeStyle = mapLineColor;
    ctx.beginPath();
    ctx.moveTo(width / 2 + (itemPosition[0][0] - averageX) * range, height / 2 - (itemPosition[0][1] - averageY) * range);
        itemPosition.forEach(function (item) {
        ctx.lineTo(width / 2 + (item[0] - averageX) * range, height / 2 - (item[1] - averageY) * range);
    })
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
}

function drawMetapFun (pointObj,index) {
      ctx.shadowOffsetX = 0; // 设置水平位移
      ctx.shadowOffsetY = 0; // 设置垂直位移
      ctx.shadowBlur = 1; // 设置模糊度
      ctx.shadowColor = pointObj.color; // 设置阴影颜色
      ctx.strokeStyle = pointObj.color;
      ctx.lineWidth = pointObj.lineWidth;
      ctx.beginPath();
      ctx.moveTo(width / 2 + (pointObj.data[0][0] - averageX) * range,height / 2 - (pointObj.data[0][1] - averageY) * range)
      pointObj.data.forEach(function (item, index) {
        if (index != 0) {
            ctx.lineTo(width / 2 + (item[0] - averageX) * range,height / 2 - (item[1] - averageY) * range)
         }
      })
      ctx.stroke();
      // 轨迹上运行的点
      ctx.shadowOffsetX = 0; // 设置水平位移
      ctx.shadowOffsetY = 0; // 设置垂直位移
      ctx.shadowBlur = 1; // 设置模糊度
      ctx.shadowColor = pointObj.color; // 设置阴影颜色
      ctx.fillStyle = pointObj.color;
      ctx.beginPath();
      ctx.arc(width / 2 + (pointPositionArray[index].data[pointPositionArray[index].index][0] - averageX) * range,
          height / 2 - (pointPositionArray[index].data[pointPositionArray[index].index][1] - averageY) * range,
          ballRadius,0,2*Math.PI);
//                  ctx.arc(pointPositionArray[index].data[pointPositionArray[index].index][0] + offsetX,pointPositionArray[index].data[pointPositionArray[index].index][1] + offsetY,ballRadius,0,2*Math.PI);
      ctx.closePath();
      ctx.fill();
      if (pointPositionArray[index].index >= pointPositionArray[index].length - 1) {
         pointPositionArray[index].index = 0; 
       }
      pointPositionArray[index].index ++;
}
function getMetap (pointArray) {
      pointArray.forEach(function (item) {
        getMetapFun(item);
      })
}
function getMetapFun (pointObj) {
      var dataArray = [];
      pointObj.data.forEach(function (item, index) {
        metapXMax = item[0] > metapXMax ? item[0] : metapXMax;
        metapYMax = item[1] > metapYMax ? item[1] : metapYMax;
        metapXMin = item[0] < metapXMin ? item[0] : metapXMin;
        metapYMin = item[1] < metapYMin ? item[1] : metapYMin;
        if (index != 0) {
               ctx.lineTo(item[0],item[1]);
               space = Math.abs(space);
              var diffX = item[0] - pointObj.data[index - 1][0];
               var diffY = item[1] - pointObj.data[index - 1][1];
               var num = 0;
               var _space = 0;
               dataArray.push[pointObj.data[index - 1][0],pointObj.data[index - 1][1]];
               if (Math.abs(diffX) > Math.abs(diffY)) {
                   num = parseInt(Math.abs(diffX) / space);
                   _space = diffY / num;
                   space = diffX > 0 ? space : -space;
                   for (var i = 0; i < num; i ++) {
                      dataArray.push([pointObj.data[index - 1][0] + i * space,pointObj.data[index - 1][1] + i * _space])
                   }
               } else {
                   num = parseInt(Math.abs(diffY) / space);
                   _space = diffX / num;
                   space = diffY > 0 ? space : -space;
                   for (var i = 0; i < num; i ++) {
                      dataArray.push([pointObj.data[index - 1][0] + i * _space,pointObj.data[index - 1][1] + i * space])
                   }
               }
         }
      })
      pointPositionArray.push({
        index: 0,
        length: dataArray.length,
        data: dataArray
      })
}