欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

前端小技能之Vue集成百度離線地圖功能總結(jié)

 更新時間：2023年01月06日 09:30:46   作者：小球?qū)W前端  
最近項(xiàng)目里集成了百度地圖的一些功能,所以下面這篇文章主要給大家介紹了關(guān)于前端小技能之Vue集成百度離線地圖功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

引言

工作中遇到了一個需求，要在內(nèi)網(wǎng)使用百度地圖，那么肯定就是離線的地圖了，查閱了一些博文，開發(fā)過程中也遇到了各種各樣的問題，在此做下記錄，希望帶大家避坑，也給自己這兩天的開發(fā)做一下總結(jié)。

需求：

  • 內(nèi)網(wǎng)中使用百度地圖
  • 僅展示鄭州市地圖，并將鄭州市地圖輪廓圈出
  • 支持繪制點(diǎn)
  • 支持繪制線
  • 支持多點(diǎn)聚合

技術(shù)棧

  • Vue2
  • BMap

效果圖

開始

1、項(xiàng)目搭建

vue腳手架搭建不再贅述，默認(rèn)此刻你已經(jīng)創(chuàng)建好一個vue-cli項(xiàng)目，此時，在public文件夾下創(chuàng)建文件夾static，將我們所需要的資源放到這個文件夾里，文件后續(xù)有給出。注意路徑，一定注意路徑，踩坑很久，文件中路徑已經(jīng)改好。

2、文件說明及避坑大法

  • images：地圖中圖標(biāo)，例如：樹、建筑物等
  • modules： 所需要的js模塊
  • bmap_offline_api_v3.0.min.js: 創(chuàng)建地圖，包含各種地圖上操作的api等
  • m4.png: 聚合圖標(biāo)，上圖中的紫色圖（可根據(jù)項(xiàng)目風(fēng)格進(jìn)行替換）
  • map_load.js: 初始化一些全局變量，包括文件路徑，瓦片圖加載路徑，動態(tài)加載bmap_offline_api_v3.0.min.js文件等
  • MarkerClusterer_min.js: 實(shí)現(xiàn)點(diǎn)聚合
  • TextIconOverlay_min.js: 點(diǎn)聚合相關(guān)

修改直通車：

1、瓦片圖路徑處理

map_load.js,在網(wǎng)上看博主寫的配置有tiles_dir,但是沒有tiles_path,就意味著只能將瓦片圖放置到自己項(xiàng)目中，圖片有很多很多，vue項(xiàng)目直接編譯崩潰，所以為了開發(fā)方便，我們還是將瓦片圖放置到服務(wù)器中，我們這邊做引入即可。在tiles_path中進(jìn)行配置服務(wù)器地址。

踩坑1：注意：一定不要只對照map_laod.js來配置自己的js，一定要看bmap_offline_api_v3.0.js中瓦片地址的配置方法

let bmapcfg = {
  'imgext'      : '.png',   //瓦片圖后綴
  'tiles_dir'   : 'tiles',  //瓦片圖文件夾
  'tiles_path'  : 'http://localhost:5000/', //如果在服務(wù)器上，需要配置服務(wù)器地址
  'tiles_hybrid': '',
  'tiles_self'  : ''
};

對應(yīng)bmap_offline_api_v3.0.js中模塊加載代碼，注意：你的可能跟我的不一樣，一定要跟map_load.js進(jìn)行對應(yīng)。

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

當(dāng)然了，開發(fā)階段我們可以先將瓦片圖下載到本地，新建文件夾 dirName,

然后在對應(yīng)文件夾中使用：serve 你的文件夾名開啟本地服務(wù)，此刻，圖片也可以用鏈接地址進(jìn)行訪問了

請?zhí)砑訄D片描述

此刻配置我們的瓦片路徑：

let bmapcfg = {
  'imgext'      : '.png',   //瓦片圖后綴
  'tiles_dir'   : 'tiles',       //普通瓦片圖的地址，為空默認(rèn)在 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、地圖加載不出來

注意：瓦片圖路徑出錯會導(dǎo)致地圖加載出錯。一定要看配置路徑，js加載不到也是路徑問題，路徑問題?。。?！

3、地圖搭建準(zhǔn)備工作

1、容器

跟平時一樣，準(zhǔn)備一個地圖容器，設(shè)置容器大小

<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) // 創(chuàng)建點(diǎn)坐標(biāo)
    this.map.centerAndZoom(point, 10) // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級別
    //添加地圖類型控件
    this.map.setMinZoom(10)
    this.map.setMaxZoom(18)
    this.map.enableScrollWheelZoom(true) //開啟鼠標(biāo)滾輪縮放
    // 添加點(diǎn)
    this.addMarker()
    // 添加線
    this.addLine()
    // 添加鄭州市的輪廓線
    this.addBorderLine()
},

3、添加點(diǎn)、添加點(diǎn)聚合

addMarker() {
      let BMap = window.BMap
      let BMapLib = window.BMapLib
      // 初始化要顯示的點(diǎn)的坐標(biāo)
      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) // 創(chuàng)建點(diǎn)坐標(biāo)
      var point1 = new BMap.Point(113.6001, 34.61468) // 創(chuàng)建點(diǎn)坐標(biāo)
      var point2 = new BMap.Point(113.7001, 34.62468) // 創(chuàng)建點(diǎn)坐標(biāo)
      var point3 = new BMap.Point(113.9001, 34.63468) // 創(chuàng)建點(diǎn)坐標(biāo)
      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) // 創(chuàng)建點(diǎn)坐標(biāo)
      let point1 = new BMap.Point(113.7001, 34.62468) // 創(chuàng)建點(diǎn)坐標(biāo)
      let polyline = new BMap.Polyline([point, point1], {
        strokeColor: 'red',
        strokeWeight: 1,
        strokeOpacity: 1,
      })
      this.map.addOverlay(polyline)
    },

5、繪制城市邊緣

這個數(shù)據(jù)我們可以通過在線地圖API進(jìn)行獲取，獲取到以后將數(shù)據(jù)保存到文件line.js中，將文件放置項(xiàng)目src/data文件夾下，便于我們離線使用

let boundary = new BMap.Boundary()
boundary.get('鄭州市', (rs) => {
// res: 鄭州市邊緣數(shù)據(jù)
})

添加邊緣數(shù)據(jù)：

addBorderLine() {
    let BMap = window.BMap
    let pointArr = []
    dataLine.forEach((pointDetail) => {
        var point = new BMap.Point(pointDetail.lng, pointDetail.lat) // 創(chuàng)建點(diǎn)坐標(biāo)
        pointArr.push(point)
    })
    let polyline = new BMap.Polyline(pointArr, {
        strokeColor: 'red',
        strokeWeight: 3,
        strokeOpacity: 1,
    })
    this.map.addOverlay(polyline)
}

奉上項(xiàng)目地址：https://gitee.com/shanghaipingzi/offlinebmap

瓦片圖下載

提取百度網(wǎng)盤中文件，然后運(yùn)行exe文件，選擇要下載的層級及地區(qū)即可

鏈接: https://pan.baidu.com/s/1zMEgtdaL2oBZ7vbl-LWeEQ

提取碼: hucc 

文章借鑒了一個博主離線地圖的開源代碼，博主是在純html中進(jìn)行開發(fā)的，我這邊在此基礎(chǔ)之上集成到了vue中，并添加了我們的需求實(shí)現(xiàn)，查看的鏈接太多了！

總結(jié)

到此這篇關(guān)于前端小技能之Vue集成百度離線地圖功能的文章就介紹到這了,更多相關(guān)Vue集成百度離線地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論