[フロントエンドの小さなスキル] Vue は Baidu オフライン マップを統合します

Vue プロジェクトが Baidu オフライン マップを統合

仕事で要件に遭遇しました。イントラネットで百度地図を使用したい場合は、オフライン地図でなければなりません。いくつかのブログ投稿を参照した後、開発プロセス中にさまざまな問題にも遭遇しました。ここに記録を残しておきます。落とし穴を避けるために、過去 2 日間の展開の概要も説明します。

必要：

• イントラネットで百度地図を使用する

• 鄭州市の地図のみを表示し、鄭州市の地図の輪郭を丸で囲みます。

• 点の描画のサポート

• 線の描画のサポート

• マルチポイント集約をサポート

テクノロジースタック

• ビュー2
• Bマップ

レンダリング

始める

1. プロジェクトの構築

Vue スキャフォールディングの詳細については説明しません。デフォルトでは、この時点で vue-cli プロジェクトが作成されています。この時点で、フォルダーの下にpublicフォルダーを作成しstatic、必要なリソースをこのフォルダーに置きます。ファイルは後で提供します。パスに注意してください。パスに必ず注意してください。ファイル内のパスは長い間変更されています。

2. 書類の説明とピット回避方法

• 画像: 木、建物などの地図上のアイコン。
• モジュール: 必要な js モジュール
• bmap_offline_api_v3.0.min.js: さまざまな地図操作のための API などを含む地図を作成します。
• m4.png: 集計アイコン、上の画像の紫色の画像 (プロジェクトのスタイルに応じて置き換え可能)
• map_load.js: ファイル パス、タイル マップの読み込みパス、bmap_offline_api_v3.0.min.js ファイルの動的読み込みなど、いくつかのグローバル変数を初期化します。
• MarkerClusterer_min.js: ポイント集約を実装する
• TextIconOverlay_min.js: ポイント集約関連

通過列車を変更します。

1. タイルマップパス処理

map_load.js, インターネット上のブロガーが書いた設定を見ましたtiles_dirが、設定がありませんtiles_path。つまり、タイル画像を自分のプロジェクトに配置することしかできません。画像がたくさんあり、Vue プロジェクトは直接コンパイルされてクラッシュします。開発の都合上、タイル画像を配置します。画像はサーバーに配置されており、ここにインポートできます。tiles_pathでサーバーアドレスを設定します。

map_laod.jsピット 1 を踏む: 注意:比較して独自の js を設定するだけでなく、bmap_offline_api_v3.0.jsタイル アドレスの設定方法にも注意する必要があります

let bmapcfg = {
  'imgext'      : '.png',   //瓦片图后缀
  'tiles_dir'   : 'tiles',  //瓦片图文件夹
  'tiles_path'  : 'http://localhost:5000/', //如果在服务器上，需要配置服务器地址
  'tiles_hybrid': '',
  'tiles_self'  : ''
};

bmap_offline_api_v3.0.jsモジュールの読み込みコードに対応します。注: あなたのコードは私のコードとは異なる可能性があるため、map_load.jsそれに対応する必要があります。

 var tdir =
 bmapcfg.tiles_path ? (bmapcfg.tiles_path + bmapcfg.tiles_dir) : bmapcfg.tiles_dir
 return tdir + '/' + b + '/' + e + '/' + a + bmapcfg.imgext // 使用本地的瓦片

もちろん、開発段階では、まずタイル イメージをローカルにダウンロードし、新しいフォルダーを作成しdirName、

それから対応するフォルダーでそれを使用します:serve 你的文件夹名ローカル サービスを有効にします。この時点では、イメージにはリンク アドレス。

次にタイル パスを設定します。

let bmapcfg = {
  'imgext'      : '.png',   //瓦片图后缀
  'tiles_dir'   : 'tiles',       //普通瓦片图的地址，为空默认在 offlinemap/tiles/ 目录
  'tiles_path'  : 'http://localhost:5000/',
  ...
};

2. モジュールロードパスの構成

bmap_offline_api_v3.0.js

モジュールのアドレスは modulesフォルダーの下に配置されているため、構成は次のようになります。

// 修改 加载本地模块文件，在 modules 目录下
console.log(a) //打印所需模块
if (a.length > 0) {
    
    
    for (i = 0; i < a.length; i++) {
    
    
        mf = bmapcfg.home + 'modules/' + a[i] + '.js'
        oa(mf)
    }
} else {
    
    
	f.kL()
}

3. マップを読み込めない

注: タイル マップのパスにエラーがあると、マップの読み込み時にエラーが発生します。必ず設定パスを確認してください。js を読み込めない場合、それもパスに問題があり、パスに問題があります。！！！

3. マップ構築の準備

1. コンテナ

いつものようにマップコンテナを用意してコンテナサイズを設定します

<template>
  <div class="home">
    <div id="container"></div>
  </div>
</template>

<script>
    ....
</script>

<style lang="scss">
#container {
  height: 100vh;
  width: 100vw;
}
</style>

2. 初期化

 data() {
    
    
    return {
    
    
      map: null,
      mapPoints: [],
      markerClusterer: [],
    }
  },

マップを初期化する

initMap() {
    
    
    let BMap = window.BMap
    this.map = new BMap.Map('container')
    console.dir(this.map)
    let point = new BMap.Point(113.5001, 34.60468) // 创建点坐标
    this.map.centerAndZoom(point, 10) // 初始化地图，设置中心点坐标和地图级别
    //添加地图类型控件
    this.map.setMinZoom(10)
    this.map.setMaxZoom(18)
    this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
    // 添加点
    this.addMarker()
    // 添加线
    this.addLine()
    // 添加郑州市的轮廓线
    this.addBorderLine()
},

3. ポイントの追加、ポイント集計の追加

addMarker() {
    
    
      let BMap = window.BMap
      let BMapLib = window.BMapLib
      // 初始化要显示的点的坐标
      this.initPoints()
      let mapMarkers = []
      this.mapPoints.forEach((point) => {
    
    
        let marker = new BMap.Marker(point)
        mapMarkers.push(marker)
        this.map.addOverlay(marker)
      })
      let markerClusterer = new BMapLib.MarkerClusterer(this.map, {
    
    
        markers: mapMarkers,
        styles: [
          {
    
    
            url: './static/m4.png',
            size: new BMap.Size(90, 90),
          },
        ],
      })
      markerClusterer.setMinClusterSize(2)
      this.markerClusterer = markerClusterer
    },
    initPoints() {
    
    
      let BMap = window.BMap
      var point = new BMap.Point(113.5001, 34.60468) // 创建点坐标
      var point1 = new BMap.Point(113.6001, 34.61468) // 创建点坐标
      var point2 = new BMap.Point(113.7001, 34.62468) // 创建点坐标
      var point3 = new BMap.Point(113.9001, 34.63468) // 创建点坐标
      this.mapPoints.push(point)
      this.mapPoints.push(point1)
      this.mapPoints.push(point2)
      this.mapPoints.push(point3)
    },

4. 行を追加

addLine() {
      let BMap = window.BMap
      let point = new BMap.Point(113.5001, 34.60468) // 创建点坐标
      let point1 = new BMap.Point(113.7001, 34.62468) // 创建点坐标
      let polyline = new BMap.Polyline([point, point1], {
        strokeColor: 'red',
        strokeWeight: 1,
        strokeOpacity: 1,
      })
      this.map.addOverlay(polyline)
    },

5. 街の端を描く

このデータはオンライン地図 API を通じて取得できます。取得後、データをファイルに保存しline.js、そのファイルをsrc/dataプロジェクト フォルダーに配置すると、オフラインで使用できるようになります。

let boundary = new BMap.Boundary()
boundary.get('郑州市', (rs) => {
// res: 郑州市边缘数据
})

エッジ データを追加します。

addBorderLine() {
    
    
    let BMap = window.BMap
    let pointArr = []
    dataLine.forEach((pointDetail) => {
    
    
        var point = new BMap.Point(pointDetail.lng, pointDetail.lat) // 创建点坐标
        pointArr.push(point)
    })
    let polyline = new BMap.Polyline(pointArr, {
    
    
        strokeColor: 'red',
        strokeWeight: 3,
        strokeOpacity: 1,
    })
    this.map.addOverlay(polyline)
}

プロジェクトのアドレスは次のとおりです: https://gitee.com/shanghaipingzi/offlinebmap

タイル画像のダウンロード

Baidu ネットワーク ディスク内のファイルを抽出し、exe ファイルを実行して、ダウンロードするレベルと地域を選択します

百度网盘链接：https://pan.baidu.com/s/16sOJ9ws7HCgNH3EMf7Ejyg?pwd=0q0e 
提取码：0q0e

ご質問がある場合は、コメント エリアにメッセージを残してください。
この記事は、ブロガーのオフライン マップのオープン ソース コードを利用しています。ブロガーは純粋な HTML で開発しています。これに基づいて、それを Vue に統合し、要件を追加しました。チェックするにはリンクが多すぎます。幸運にもブロガーの目に入ったら、プライベート チャットしてリンクを切ってください。ブロガーさん、改めてありがとう！