キャンバスシミュレーション中国の鉄道の運転チャート

理由

図1は、既知のキャンバスキャンバスサイズの場合には、キャンバスに地理的な緯度及び経度情報にキャンバスのx、y座標、中国の地理的地図の緯度と経度の座標を必要とするので73.33から135.05までの範囲（経度）37-50（寸法）は、第1ステップは、ここでcenterXとcenterY命名キャンバスの中心の位置を確認するために必要とされる、ここでpositionX、位置j名前中国のマップに対応する同一の中心位置の緯度と経度を確認しました。

図2に示すように、拡大任意に定義された値の範囲、主な役割は、中国におけるキャンバスズームインキャンバスに比例した値であり、値の範囲は、分割マップ中国スパン値の経度と緯度と経度のスパン値の横方向の寸法に応じてキャンバスのうち解決する必要があります。

3.キャンバスキャンバスに描かれた中国のマップの割合の範囲値。

図4に示すように、トラックのマップは、キャンバス上の上記2,3キャンバスに従って描か緯度と経度の情報を、表示する必要があります。

図5に示すように、必要な横幅と軌道の2点間の長手方向のスパンを得るために、トラックランに沿ってオブジェクトの動作軌跡を確保するために、トラック上のオブジェクトの動作速度を示し、最大スパンに定義されたレート値トラックポイントの数を解決するための基準トラック上に描画する必要があり、その後、上から誘導される対応するレートを解決するトラックポイントうちの少数のスパンで割ったもの。

6、交差点後および関数を呼び出すことによって、トラック上の縦速度、マーカーrequestAnimationFrameの効果の動きを決定します。

次のように図の効果（図架空軌道緯度及び経度情報）

中国のマッピング方法

関数drawShapeOptionFun（）{
    // 绘制中国地图 
   chinaGeometry.features.forEach（関数（chinaItem、chinaIndex）{
       VARの長さ= chinaItem.geometry.coordinates.length;
       VAR multipleBool =長さ> 1？真：偽。
      chinaItem.geometry.coordinates.forEach（関数（chinaChildItem、wordItemIndex）{
           IF （multipleBool）{
              // 緯度及び経度情報を使用することができる境界値
             IF（chinaChildItem.length && chinaChildItem [0] .LENGTH == 2 ）{
                 drawCanvasFun（chinaChildItem）。
             }
             // 緯度と経度の情報を使用することができる変換する必要が
             IF（chinaChildItem.length && chinaChildItem [0] .LENGTH> 2 ）{
                 chinaChildItem.forEach（関数（countryItem、countryIndex）{
                     drawCanvasFun（countryItem）。
                 }）
             }
          } 他{
               VAR countryPos = NULL ;
              もし（chinaChildItem.length> 1 ）{
                  countryPos = chinaChildItem。
              } 他{
                 countryPos = chinaChildItem [0 ]。
              }
              もし（countryPos）{
                  drawCanvasFun（countryPos）。
              }
           }
        }）
     }）
}
// キャンバス描画プレーン
機能drawCanvasFun（itemPosition）{
    ctx.fillStyle = mapColor。
    ctx.strokeStyle = mapLineColor。
    ctx.beginPath（）;
    ctx.moveTo（幅 / 2 +（itemPosition [0] [0] - averageX）*範囲、高さ/ 2 - （itemPosition [0] [1] - averageY）* 範囲）。
        itemPosition.forEach（関数（アイテム）{
        ctx.lineTo（幅 / 2 +（項目[0] - averageX）*範囲、高さ/ 2 - （項目[1] - averageY）* 範囲）。
    }）
    ctx.fill（）;
    ctx.stroke（）;
    ctx.closePath（）; 
}

トラックとトラックの確認方法の動作点のマップ座標上の中国

関数drawMetapFun（pointObj、インデックス）{
      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（幅 / 2 +（pointObj.data [0] [0] - averageX）*範囲、高さ/ 2 - （pointObj.data [0] [1] - averageY）* 範囲）
      pointObj.data.forEach（関数（項目、インデックス）{
         場合（インデックス！= 0 ）{
            ctx.lineTo（幅 / 2 +（項目[0] - averageX）*範囲、高さ/ 2 - （項目[1] - averageY）* 範囲）
         }
      }）
      ctx.stroke（）;
      // 実行軌跡点 
      ctx.shadowOffsetX = 0; // 設定水平変位 
      ctx.shadowOffsetY = 0; // 設定垂直変位 
      ctx.shadowBlur = 1; // 設定ぼけ度 
      ctx.shadowColor = pointObj.color; // セット影の色 
      ctx.fillStyle = pointObj.color。
      ctx.beginPath（）;
      ctx.arc（幅 / 2 +（pointPositionArray [インデックス] .DATA [pointPositionArray [インデックス] .INDEX] [0] - averageX）* 範囲、
          高さ / 2 - （pointPositionArray [インデックス] .DATA [pointPositionArray [インデックス] .INDEX] [1] - averageY）* 範囲、
          ballRadius、 0,2 * にMath.PI）。
//                   ctx.arc（pointPositionArray [インデックス] .DATA [pointPositionArray [インデックス] .INDEX] [0] + offsetX、pointPositionArray [インデックス] .DATA [pointPositionArray [インデックス] .INDEX] [1] + offsetY、ballRadius、0、 2 *にMath.PI）。
      ctx.closePath（）;
      ctx.fill（）;
      もし（pointPositionArray [インデックス] .INDEX> = pointPositionArray [インデックス] .LENGTH - 1 ）{
         pointPositionArray [インデックス] .INDEX = 0 。
       }
      pointPositionArray [インデックス] .INDEX ++ ;
}
関数getMetap（pointArray）{
      pointArray.forEach（関数（アイテム）{
        getMetapFun（アイテム）
      }）
}
FUNCTION getMetapFun（pointObj）{
      データ配列= [];
      pointObj.data.forEach（関数（項目、インデックス）{
        metapXMax =項目[0]> metapXMax？項目[0 ]：metapXMax。
        metapYMax =項目[1]> metapYMax？項目[1 ]：metapYMax。
        metapXMin =項目[0] <metapXMin？項目[0 ]：metapXMin。
        metapYMin =項目[1] <metapYMin？項目[1 ]：metapYMin。
        もし（インデックス！= 0 ）{
               ctx.lineTo（項目[ 0]、項目[1 ]）。
               スペース = Math.abs（空間）
              VAR diffX =項目[0] - pointObj.data [索引- 1] [0 ]。
               VAR diffY =項目[1] - pointObj.data [索引- 1] [1 ]。
               VAR NUM = 0 ;
               VAR _space = 0 ;
               dataArray.push [pointObj.data [索引 - 1] [0]、pointObj.data [索引- 1] [1 ]。
               もし（Math.abs（diffX）> Math.abs（diffY））{
                   NUM =のparseInt（Math.abs（diffX）/ スペース）;
                   _space = diffY / NUM。
                   スペース = diffX> 0？スペース： - スペース。
                   用（VAR ; I <NUM I ++は、I = 0 ）{
                      dataArray.push（[pointObj.data [索引 - 1] [0] + iは、スペースを*、pointObj.data [索引- 1] [1] + i *が_space]）
                   }
               } 他{
                   NUM =のparseInt（Math.abs（diffY）/ スペース）;
                   _space = diffX / NUM。
                   スペース = diffY> 0？スペース： - スペース。
                   用（VAR ; I <NUM I ++は、I = 0 ）{
                      dataArray.push（[pointObj.data [索引 - 1] [0] + i *が_space、pointObj.data [索引- 1] [1] + i *が空白]）
                   }
               }
         }
      }）
      pointPositionArray.push（{
        インデックス： 0 、
        長さ：dataArray.lengthと、
        データ：dataArray
      }）
}

例プレビュー住所：キャンバスシミュレーション中国の鉄道の運転チャート

言葉の後

私は、これは読者に説明するのに役立つことを願って！！！

キャンバスシミュレーション中国の鉄道の運転チャート

おすすめ