关于BigeMap在vue中离线地图二次开发的初始化

        前言： 公司要求对项目进行更换地图服务，以前用的是高德和百度，现在更换成BigeMap来提供地图服务，地图瓦片数据均需要自己下载放在服务器上。

        ps： 官方的文档一言难尽，比起高德和百度的文档不要太烧脑，以下是整理出来的vue中初始化方法，比较详细。

1.js中加载资源(包括css文件和js文件)

const scriptList = [
  `http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js`,
  '/fly/echarts.min.js',
  '/fly/iclient9.min.js'
]
// 引入所需的js文件，可以将地址换成本地服务器的js文件地址 
// 如果有多个js文件(比如你需要实现模拟迁徙的效果也可以用逗号隔开进行引入
// 这里我是将模拟迁徙效果的两个js下载在本地保存在项目的public文件夹下的fly文件夹中)

const linkList = [`http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css`]

// 引入css样式文件，可以将地址换成本地服务器的css文件地址

// 需要用Promise进行包裹保证在未来一定能获取到异步操作的消息
// 简单来说就是保证在初始化地图时保证已经完成了相关js和css文件引入的操作

export default new Promise((resolve) => {
  linkList.map((v, index) => {
// 根据元素的id获取元素对象，判断是否已经进行引入操作
    const has = document.getElementById(`bigemap_link_${index}`)
    if (has) return
    const link = document.createElement('link')   // 创建link标签
    link.rel = 'stylesheet' // 表示link链接的是一个样式表(只有stylesheet值得到所有浏览器支持)
    link.async = false  // 非异步 link 即会等待请求完此资源后再继续解析HTML
    link.href = v
    link.id = `bigemap_link_${index}`
    document.head.appendChild(link)  // 将link标签作为子标签插入head标签下
  })
  const loads = scriptList.map((v, index) => {
// 根据元素的id获取元素对象，判断是否已经进行引入操作
    const has = document.getElementById(`bigemap_script_${index}`)
    if (has) return
    const script = document.createElement('script') // 创建script标签
    script.type = 'text/javascript' // script标签的MIME 类型
    script.id = `bigemap_script_${index}`
    script.async = false // 非异步 link 即会等待请求完此资源后再继续解析HTML
    script.src = v
    document.head.appendChild(script)  // 将script标签作为子标签插入head标签下
    return script 
  })

// 判断loads是否存在 
  if (loads) {
    const end = loads.pop()
    end.onload = resolve   
// 将resolve函数作为onload事件的回调函数，当onload事件触发时resolve函数将会被调用 
//onload用于在网页加载完毕后立刻执行的操作避免调用DOM树中元素时发生undefined的错误
  } else {
    resolve()
  }
})

2.地图的初始化

• 创建div标签作为地图的容器

<div id='map' ref='map'></div>

• 导入我们刚刚创建的js文件(bigemap.js)

import bigemap from '@/api/bigemap' //这里注意换成自己的js文件地址

• 初始化地图

<script>
import bigemap from '@/api/bigemap'

export default {
    data() {
        bm: '',
        map: '',
    },
    mounted() {
        this.initMap()
    },
    methods: {
        initMap() {
            bigemap.then(()=>{
                    this.bm = window.BM
                    // 这里URL填写的是离线地图的服务器地址
                    this.bm.Config.HTTP_URL = 'http://www.bigemap.com:9000' 
                    // 参数分别为 
                    // DOM元素 可以用this.$ref.标签的ref值获取也可以直接为标签的id属性例如"map"
                    // 地图样式id
                    // 初始化地图的选项
                    this.map = this.bm.map(this.$refs.map,'bigemap.googlemap-streets',{
                        center: [ 30,104 ], // 中心点的坐标[纬度,经度]
                        zoom: 4,  // 缩放级别
                        zoomControl: false  // 缩放控件是否可见
                    })
                    // 这下面可以接之后的操作例如添加锚点的方法、添加图层等等
                })
        
    
        }
    
    }

}
</script>

3.map的常用选项 

选项名	类型	默认值	描述
center	LatLng/[Number,Number]	undefined	设置地图的中心点
zoom	Number	undefined	地图缩放级别
minZoom	Number	*	最小缩放级别
maxZoom	Number	*	最大缩放级别
crs	CRS	BM.CRS.EPSG3857	要使用的坐标参考系统

4.关于水印

水印的去除可以在css样式或者<style>标签中使用下面的代码

::v-deep .bigemap-left {
  display: none;
}
::v-deep .bigemap-control{
  display: none;
}