天然ガス追跡監視システム情報の更新

システムの初期化時に、ブラウザは Tiantu イメージ マップと必要なツールバーをロードします。この時点では、マップ上に倉庫は表示されていません。インターフェースの右上隅にあるツールバーの「倉庫」ドロップダウン ボタンをクリックすると、「倉庫」ドロップダウン リストが表示されます。「倉庫の編集」を選択します。オプションをクリックすると、[倉庫の編集] ダイアログ ボックスが表示されます。このダイアログでは、ボックス内の倉庫を編集するツールを選択すると、図に示すように、必要に応じて倉庫の追加、編集、削除などの操作を行うことができます。 。

図 「ウェアハウス編集」ダイアログボックス

① 新しい倉庫を追加し、

導入の主要なプロセスには次の 3 つのステップがあります。

最初のステップは、[ウェアハウスの編集] ダイアログ ボックスに新しい列を追加することです。

、倉庫ジオメトリを選択し、マップ上にベクター倉庫を描画します。ジオメトリを描画するときに、leaflet.draw.js プラグインを参照します (プラグインのダウンロード アドレスは https://github.com/Leaflet/Leaflet.draw です)。 , そして、ジオメトリを描画し、それをアクティブにします。マップ上の任意の位置にマウスを使用して、必要な幾何学図形を描画できます。コードは次のとおりです: コードの説明: ベクトル要素を作成および描画します。幾何学図形に従って、それらは次のようになります
。多角形、長方形、円に分割されます。作成後、enabled() 関数を使用します。この関数を有効にすると、地図上に多角形のベクトル フィーチャが描画されます。ベクター フィーチャ レイヤー グループを作成してマップに追加し、ポリゴンの描画が完了したら描画完了イベントを登録し、描画完了イベントをトリガーして、描画されたベクター フィーチャ レイヤーをベクター フィーチャ レイヤー グループに追加し、完成したベクターを描画しますフィーチャが地図上に表示されます。

図面が完成すると、図のような「倉庫の追加」ダイアログボックスが表示されるので、倉庫名、倉庫担当者、階数などの倉庫の基本情報を入力し、 「確認」ボタンをクリックしてください。

図 「ウェアハウスの追加」ダイアログボックス

2 番目のステップは、新しいウェアハウスの jQuery シリアル化フォームを送信することです。

、ウェアハウスの新しいインターフェイス AddWareHouse を呼び出し、Ajax の GET リクエストと POST リクエストを通じて基本的なウェアハウス情報とウェアハウス ジオメトリ情報をバックエンド サーバーに送信します。コードは次のとおりです: コードの説明: このアプリケーションは、jQuery で Ajax リクエストを頻繁に使用して、
, 削除、変更、クエリ操作を行うため、Ajax の GET リクエストは commonGetAjax() 関数としてカプセル化され、Ajax の POST リクエストは commonPostAjax() 関数としてカプセル化されます。

カプセル化関数 commonGetAjax() および commonPostAjax() を使用した後、ユーザーはプログラム内の冗長なコードを削除できます。すべての Ajax リクエストは、これら 2 つのカプセル化関数を通じて完了します。コードは次のとおりです。 コードの説明: このアプリケーションは、jQuery で Ajax リクエストを頻繁に使用します。
追加、削除、変更、クエリ操作を行うため、Ajax の GET リクエストは commonGetAjax() 関数としてカプセル化され、Ajax の POST リクエストは commonPostAjax() 関数としてカプセル化されます。
カプセル化関数 commonGetAjax() および commonPostAjax() を使用した後、ユーザーはプログラム内の冗長なコードを削除できます。すべての Ajax リクエストは、これら 2 つのカプセル化関数を通じて完了します。コードは次のとおりです。 コードの説明: ウェアハウス データを処理のためにバックグラウンドに送信します。 Ajax
リクエストを介して、AddWareHouse インターフェイスを介して SQL ステートメントを実行し、データベースにウェアハウス レコードを追加し、追加が成功した後にフロント エンドに戻り、マップ上のウェアハウス データを初期化します。

3 番目のステップは、新しい倉庫を正常に追加することです。

、マップ上にベクトル倉庫とラベルを表示し、倉庫ポリゴン (長方形または円) をクリックして倉庫フロア切り替えツールを表示します。倉庫ラベルの上にマウス ポインターを置くと、図②に示すように、倉庫の基本情報が表示されます。倉庫の編集、
達成 主なプロセスは次の 3 つのステップです。

最初のステップは編集オブジェクトを作成することです

, ジオメトリを編集します。編集後、マップの任意の領域をクリックします。倉庫にユニット データがある場合は、「倉庫にデータがあります。空の倉庫を編集してください」というプロンプトが表示されます。それ以外の場合は、倉庫の変更コンテンツを送信します。コードの説明: ジオメトリの作成と編集
. ベクター フィーチャ レイヤー グループは、編集オブジェクトをアクティブ化し、倉庫のジオメトリを変更するための編集レイヤー グループとして使用されます。

2 番目のステップは、倉庫の変更された形状と面積のデータを取得することです。

、Ajax リクエストを処理のためにバックグラウンドに送信し、データベース内のウェアハウスの変更されたコンテンツを更新し、更新が成功した後にフロントエンドに戻り、マップ上のウェアハウス データを初期化します。コードは次のとおりです。