bmaplib vue 调用_vue引入百度地图BMapGL,以及辅助工具BMapGLLib 的引入,BMapGL鼠标绘制功能。...

BMapGL画图工具的引入.jpg

写在前面

前面有篇文章【vue引入百度地图BMapGL,或者其他个性化地图】写了一个关于vue百度地图BMapGL的引入,有人问怎么引入BMapGLLib ,因为我在项目只用了其中的一点点简单的,所以关于绘制的是自己撸的没有引入BMapGLLib 。既然有人问,那么就弄了一下。

文件结构

BMapGLLib.vue是文件,bmpgl_lib.js是调用方法

文件结构.jpg

在src里面创建一个bmpgl_lib.js

其实建立在哪看你自己的意愿啦。(小声逼逼)

如果只用BMapGL那么只用loadBaiDuMap() 这个方法就好了。(再次小声逼逼)

const ak = 'XXXXXX' // 百度的地图密钥

/**

* 异步加载百度地图

* @returns {Promise}

* @constructor

*/

function loadBaiDuMap() {

return new Promise(function (resolve, reject) {

try {

console.log('BMap is defined:', BMapGL === undefined || BMapGL)

resolve(BMapGL)

} catch (err) {

window.init = function () {

resolve(BMapGL)

}

let script = document.createElement('script')

script.type = 'text/javascript'

script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`

script.onerror = reject

document.body.appendChild(script)

}

})

}

export { loadBaiDuMap }

/**

* 异步加载百度地图,以及绘制工具

* @returns {Promise}

* @constructor

*/

function loadBaiDuDrawMap() {

return loadBaiDuMap().then(BMapGL => {

let loaded = false

try {

loaded = (BMapGLLib && BMapGLLib.DrawingManager)

} catch (err) {

loaded = false

}

if (!loaded) {

console.log('BMapLib.DrawingManager loading!')

let script = document.createElement('script')

script.type = 'text/javascript'

script.src = 'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js'

document.body.appendChild(script)

let link = document.createElement('link')

link.rel = 'stylesheet'

link.href = 'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css'

document.body.appendChild(link)

} else {

console.log('BMapLib.DrawingManager is loaded!')

}

return BMapGL

})

}

export { loadBaiDuDrawMap }

vue页面里面引入

// 引入异步引入地图的方法

import { loadBaiDuDrawMap } from "@/bmpgl_lib.js";

export default {

name: "home",

data() {

return {

map: null,

actNav: "",

};

},

mounted() {

this.initMap();

},

methods: {

initMap() {

// 初始化地图

loadBaiDuDrawMap().then((BMapGL) => {

// 创建地图实例

let map = new BMapGL.Map("container");

// 添加比例尺控件

map.addControl(

new BMapGL.ScaleControl({

anchor: BMAP_ANCHOR_BOTTOM_LEFT,

offset: new BMapGL.Size(10, 10),

})

);

// 添加缩放控件

map.addControl(

new BMapGL.ZoomControl({

anchor: BMAP_ANCHOR_BOTTOM_RIGHT,

offset: new BMapGL.Size(10, 10),

})

);

// 保存地图

this.map = map

// 创建点坐标 axios => res 获取的初始化定位坐标

const point = new BMapGL.Point(114.031761, 22.542826);

// 初始化地图,设置中心点坐标和地图级别

map.centerAndZoom(point, 19);

//开启鼠标滚轮缩放

map.enableScrollWheelZoom(true);

map.setHeading(64.5);

map.setTilt(73);

});

},

draw(type) {

this.actNav = type

const styleOptions = {

strokeColor: "#5E87DB", // 边线颜色

fillColor: "#5E87DB", // 填充颜色。当参数为空时,圆形没有填充颜色

strokeWeight: 2, // 边线宽度,以像素为单位

strokeOpacity: 1, // 边线透明度,取值范围0-1

fillOpacity: 0.2, // 填充透明度,取值范围0-1

};

const labelOptions = {

borderRadius: "2px",

background: "#FFFBCC",

border: "1px solid #E1E1E1",

color: "#703A04",

fontSize: "12px",

letterSpacing: "0",

padding: "5px",

};

// 实例化鼠标绘制工具

const drawingManager = new BMapGLLib.DrawingManager(this.map, {

// isOpen: true, // 是否开启绘制模式

enableCalculate: false, // 绘制是否进行测距测面

enableSorption: true, // 是否开启边界吸附功能

sorptiondistance: 20, // 边界吸附距离

rectangleOptions: styleOptions, // 矩形的样式

});

if (drawingManager.isOpen_ && drawingManager.getDrawingMode() === type) {

drawingManager.close();

} else {

drawingManager.setDrawingMode(type);

drawingManager.open();

}

},

},

};

// 隐藏版权信息

.BMap_cpyCtrl {

display: none;

}

// 隐藏版权图标

.anchorBL img {

display: none;

}

.allmap {

width: 100%;

height: 100vh;

position: relative;

z-index: 1;

}

.change-map-type {

position: absolute;

right: 50px;

bottom: 10px;

z-index: 2;

}

ul li {

list-style: none;

}

.info {

z-index: 999;

width: auto;

min-width: 22rem;

padding: 0.75rem 1.25rem;

margin-left: 1.25rem;

position: fixed;

top: 1rem;

background-color: #fff;

border-radius: 0.25rem;

font-size: 14px;

color: #666;

box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);

}

.drawing-panel {

z-index: 999;

position: fixed;

top: 20px;

right: 20px;

border-radius: 0.25rem;

height: 47px;

box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);

}

.bmap-btn {

border-right: 1px solid #d2d2d2;

float: left;

width: 64px;

height: 100%;

background-image: url(http://api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);

cursor: pointer;

}

.drawing-panel .bmap-marker {

background-position: -65px 0;

}

.drawing-panel .bmap-polyline {

background-position: -195px 0;

}

.drawing-panel .bmap-rectangle {

background-position: -325px 0;

}

.drawing-panel .bmap-polygon {

background-position: -260px 0;

}

.drawing-panel .bmap-circle {

background-position: -130px 0;

}

你可能感兴趣的:(bmaplib,vue,调用)