Web GPS Templateのダウンロード - Web GPS Templateソースコードのダウンロード

Web GPS Template

ウェブサイトデータ

1.0.0

ダウンロード

Web-GPS-テンプレート

ハイブリッドアプリを作成する予定ですか? GPS を使用する予定ですか?それなら、このテンプレートがぴったりです!

編集するページ:

marker.js -> マップ内にマーカーを保持します
nav-dialogs.js -> ドロワーテンプレートで使用されるメソッドを保持します (サイドバー)
info.js -> ユーザーが地図内のマーカーをクリックまたはタップしたときにイベントが使用するメソッドを保持します
Navigation.js -> アプリで使用されるダイアログボックスを制御します
main.css -> このページのレイアウト
templates.css ->index.html とこのページの両方で共有されるいくつかのデザインの選択肢 (背景色)

webinterface フォルダーは、qgis の qgis2web プラグインによって自動的に作成されます。新しいマップを作成して qgis2web プラグインを使用する場合、このテンプレートは非常に互換性があります。手動モード (GPS 座標を手動で設定する) に対応するために、qgis2web.js 内でいくつかの変更を加えましたが、Web インターフェイスのコンテンツを変更するときはそのことに留意してください。

このテンプレートは座標位置を検索または比較しませんが、独自のテンプレートを作成できます。この Javascript メソッドを使用して、現在の位置を取得するだけです。

使用する注目すべき JavaScript メソッドと変数:

geolocation.getPosition() -> このメソッドはユーザーの現在の GPS 位置を提供します。
externalGeoLocate() -> ユーザーの現在の GPS 位置を更新します
Manualcoords -> 手動で設定した GPS 座標。この変数は、manualmode が true に設定されている場合にのみ呼び出します。

OpenLayers (このテンプレートを可能にしたもの) には座標を比較する独自の方法があると思います。それを使用することもできます。

座標の比較と検索のサンプルコード

  if ( typeof ( geolocation . getPosition ( ) ) === "undefined" && manualmode == false ) {
    return false ;
  }

  if ( manualmode ) {
    coords = manualcoords ;
  }
  else {
    coords = geolocation . getPosition ( ) ;
  }
  
  // Assume that we have a list of coordinates (objects that contain
  // x and y values). We compare each one of them using the classic
  // formula of [distance between two points]
  // (http://www.mathwarehouse.com/algebra/distance_formula/index.php) 
  // then push it to an array called selected
  for ( var i = 0 ; i < list . length ; i ++ ) {
    var icon = list [ i ] ;
    var dist = Math . sqrt ( Math . pow ( ( coords [ 0 ] - icon . x ) , 2 ) + Math . pow ( ( coords [ 1 ] - icon . y ) , 2 ) ) ;
    
    // If distance is close to the 2500m radius, then it is included
    if ( dist <= 2500 ) {
      selected . push ( icon ) ;
    }
  }