背景: 同社は当初 Gaode オンライン マップを使用していましたが、一部の顧客がイントラネットを使用しているため、マップを開くと空白になっていました。そこで、オフラインマップ機能を追加し、タブでマップを切り替え、デフォルトではオンラインマップが表示され、オフラインタブをクリックすると、echartsのオフラインマップが表示されます。
重要: ---- デモ ソース リンク ----
リンク: https://pan.baidu.com/s/1tIKVs1exU_fDctbcoP7beg
抽出コード: 81e6
内容: my-offline-map.rar (デモ ソース コード) オフライン マップ開発手順.doc (ドキュメント)
1. 以下を達成します。
1.1世界地図として初期化されます。
1.2マウスオーバー、ハイライト効果あり。マップマーカーレンダリング機能を使用すると、マーカーをクリックするとマーカー情報ポップアップウィンドウが表示されます。右上隅にある閉じるボタンをクリックして、ポップアップ ウィンドウを閉じます。
1.3他の国をクリックすると、他の国を入力してその国の地図が表示されます。国の行政地域をクリックすると行政地域の地図が表示されます。ドリルダウンを続けて最初の世界地図に戻ります。
1.4中国をクリックすると中国の地図が表示されます; 省をクリックすると地方地図が表示されます; 対応する都市をクリックすると表示されます
都市の地図。都市内の郡をクリックして郡レベルの地図を表示します。ドリルダウンを続けて最初の世界地図に戻ります。
2. 主要技術 Echarts フレームワーク angular
3. 主な文書:
Assets フォルダーの下の data フォルダーと echarts フォルダーは、中国語から英語に翻訳されたすべての Json ファイルと JS マップ ファイルを保存するために使用されます。
4. 一般的な問題解決:
4.1 Echarts マップのクリック イベントが複数回トリガーされる理由 (一部は 3 回トリガーされ、一部は 2 回トリガーされる)
地図にドリルダウンがあるからだと思いますが、中国の地図をクリックしたのに、省の地図もクリックしてしまいました。
myChart.off('click'); // 繰り返しの呼び出しを避けるために、ここでは off を使用します
4.2 Echart マップの 3 レベルのドリルダウン マップ パンとズームを行った後、州をクリックすると、中心点のオフセットにより、州がコンテナの外側の場所に移動し、新しく生成されたマップが表示されなくなります。 。－－－ 解決策: チャートを再描画する場合、myChart.setOption(option,true)、setOption() メソッドに true を追加する（再描画を意味する）必要があることが後で判明し、最終的に完全に解決されました。
5.効果画像:
6. その他の注意事項
6.1すべての地理名は中国語に翻訳されます。countrys-map.js--他の国の名前を中国語に翻訳します。other-province-map.js--他の国の行政区域を中国語に翻訳します。
6.2他の国の json ファイル名と英語名との違いにより、一部の国では、ファイル名がリクエスト クエリの名前と一致しないため、クリックして json ファイルを 404 としてリクエストする場合があります。コードは getCountriesFileName 関数によって処理されます。世界地図上に国があり、クリックしてもその国地図にドリルできない場合は、コンソールを開いて、国の JSON ファイルに対応するリクエスト パスの JSON ファイル名を表示します。 all-countries フォルダー内の名前が一致しているかどうか、一致していない場合は、getCountriesFileName 関数で eleList 配列に追加し続けてください。
