Vue 使用百度地图GL

项目开发笔记

一、引入

public index文件引入百度地图Gl

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=KEY"></script>

里面的KEY为自己的百度key，在百度地图开发平台里注册获取 链接

二、基础使用

 // 创建地图实例
this.BMapGL = BMapGL; //把百度地图库引入到this

this.map = new BMapGL.Map("container");  //container为dom元素id，创建Map实例

//this.lng this.lat 自己设置的坐标
let marker1 = new BMapGL.Marker(new BMapGL.Point(this.lng, this.lat));

this.map.addOverlay(marker1); //添加坐标

// 初始化地图，设置中心点坐标和地图级别
this.map.centerAndZoom(new BMapGL.Point(this.lng, this.lat), 19);

//开启鼠标滚轮缩放
this.map.enableScrollWheelZoom(true);

//地图旋转角度
this.map.setHeading(10)

//地图倾斜角度
this.map.setTilt(19);

//修改地图中心点
this.map.setCenter(lng,lat);

//设置map显示类型
//BMAP_EARTH_MAP 地图卫星模式
//BMAP_NORMAL_MAP 普通模式
this.map.setMapType(BMAP_EARTH_MAP) 

//地图个性化样式
map.setMapStyleV2({     
   styleId: 'a0c43e8c7279db0a4a032712d0e4c32c' //官网地图api个性化获取
//   styleJson:[{}] //也可以json方式个性化
});

地图个性化网址： 百度地图个性化编辑器

2.1 绘制

（1）图标标注

// 创建标注   	
let myIcon = new BMapGL.Icon(
        "https://www.youbaobao.xyz/datav-res/datav/location.png", //图标样子
	     new BMapGL.Size(60, 60),  //大小
         {
		    anchor: new BMapGL.Size(30, 30),  //图标定位点左上角偏移量
			imageOffset: new BMapGL.Size(0, 0) //图标可视偏移
		 }
	);
// 将标注添加到地图中
let marker = new BMapGL.Marker(point, { icon: myIcon });

（2）折线/多边形

	var polyline = new BMapGL.Polyline([
		new BMapGL.Point(116.399, 39.800), //第一个点
		new BMapGL.Point(116.405, 39.810), //第二个点
		new BMapGL.Point(116.425, 39.820)    //第三个点
	], {
		strokeColor: "blue",  //线段颜色
		strokeWeight: 2, //线段粗细
		strokeOpacity: 0.5 //线段透明度
        fillColor:'blue' //绘制多边形 填充颜色
	});

(3)文本标注

	let content = "欢迎学习数据可视化体系课";
	let label = new BMapGL.Label(content, {    // 创建文本标注
		position: point,  // 设置标注的地理位置 point地图中心点位置
		offset: new BMapGL.Size(200, 20)   // 设置标注的偏移量
	});
	label.setStyle({         // 设置label的样式
        width: '100px',
		height: '20px',
		padding: '20px',
		color: '#fff',
        fontSize: '20px',
        border: '2px solid #1E90FF',
		background: 'red',
		whiteSpace: 'wrap',
		overflow: 'hidden',
		lineHeight: '20px'
	});
	label.addEventListener('click', function(e) { //给label添加点击事件
		alert(e.target.content);
	});
	map.addOverlay(label);  //添加进地图

 (4)地图弹窗信息

	marker.addEventListener("click", function(){    //添加点击事件
        let content="<div>内容</div>" //显示内容 也可以用div传入字符串修改样式
        let opts = {
    	    width: 250,     // 信息窗口宽度
    	    height: 100,    // 信息窗口高度
    	    title: "标题"  // 信息窗口标题
		}
		let infoWindow = new BMapGL.InfoWindow(content, opts);  // 创建信息窗口对象
		map.openInfoWindow(infoWindow, point);   // 打开信息窗口 point位置
	});

（5）绘制动画  (绘制线段)

var path = [{ 
    'lng': 116.297611,
    'lat': 40.047363
	}, {
		'lng': 116.302839,
		'lat': 40.048219
	}, {
		'lng': 116.308301,
		'lat': 40.050566
	},];
	var point = [];
	for (var i = 0; i < path.length; i++) { //把数组坐标遍历进百度地图坐标对象
		point.push(new BMapGL.Point(path[i].lng, path[i].lat));
	}
	var pl = new BMapGL.Polyline(point); //创建线段
	var trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
    overallView: true, // 动画完成后自动调整视野到总览
    tilt: 30,          // 轨迹播放的角度，默认为55
    duration: 20000,   // 动画持续时长，默认为10000，单位ms
    delay: 3000        // 动画开始的延迟，默认0，单位ms
	});
	document.getElementById('start').addEventListener('click', function() {
		trackAni.start();
	});
	document.getElementById('end').addEventListener('click', function() {
		trackAni.cancel();         // 强制停止动画
	});

控件：

// 添加缩放控件
let scaleCtrl = new BMapGL.ScaleControl({ 
		anchor: BMAP_ANCHOR_TOP_LEFT, //控件布局位置
		offset: new BMapGL.Size(100, 10) //控件位置偏移
	});  
	map.addControl(scaleCtrl);

// 添加比例尺控件	
let zoomCtrl = new BMapGL.ZoomControl({ 
		anchor: BMAP_ANCHOR_BOTTOM_LEFT
	});  
	map.addControl(zoomCtrl);

三、把坐标转为百度地图坐标

var convertor = new BMapGL.Convertor();
var pointArr = []; //可以多坐标一起转换，导入数组
pointArr.push(new BMapGL.Point(this.lng, this.lat));
convertor.translate(pointArr, 1, 5, translateCallback);


let translateCallback = data => {
    this.lat = data.points[0].lat;  //转换后lat的值
    this.lng = data.points[0].lng;  //转换后lng的值
};



//参数说明
//pointArr 需要转换的坐标

//1 原坐标类型
//可选参数
1：GPS标准坐标（wgs84）；
2：搜狗地图坐标；
3：火星坐标（gcj02），即高德地图、腾讯地图和MapABC等地图使用的坐标；
4：3中列举的地图坐标对应的墨卡托平面坐标;
5：百度地图采用的经纬度坐标（bd09ll）；
6：百度地图采用的墨卡托平面坐标（bd09mc）;
7：图吧地图坐标；
8：51地图坐标；


//5 转换目标坐标
//可选参数
3：火星坐标（gcj02），即高德地图、腾讯地图及MapABC等地图使用的坐标；
5：百度地图采用的经纬度坐标（bd09ll）；
6：百度地图采用的墨卡托平面坐标（bd09mc）；

//translateCallback
回调函数名

四、MAPV（地图可视化）

1.引入

public里引入js 需要改自己的key

<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=2.0&ak=KEY"></script>
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<script src="https://mapv.baidu.com/build/mapv.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.threelayers.min.js"></script>

在 main.js 里 添加百度地图相关对象添加进vue原型

Vue.prototype.$bmap = window.BMapGL
Vue.prototype.$initMap = window.initMap
Vue.prototype.$mapvgl = window.mapvgl
Vue.prototype.$mapv = window.mapv
Vue.prototype.$purpleStyle = window.purpleStyle

vue页面（绘制点）

//初始化
const map = this.$initMap({
        tilt: 60, //倾斜角度
        heading: 0, //旋转角度
        center: [103.438656, 25.753594], //显示中心点
        zoom: 6, //地图显示级别
        style: this.$snowStyle, //purpleStyle 暗黑色   淡白色
		skyColors: [
			// 地面颜色
			'rgba(226, 237, 248, 0)',
			// 天空颜色
			'rgba(186, 211, 252, 1)'
		]
      })

1.准备数据源
let data=[];
let cities=['上海'];
let cityCenter =this.$mapv.utilCityCenter.getCenterByCityName(cities[0]) //获取城市中心点
data.push({
		geometry: {
			type: 'Point', //绘图位置方式
			coordinates: [cityCenter.lng, cityCenter.lat] //绘图点位置
		},
		properties: {
			count: Math.random() * 100 //定义的数据 可以在显示的的时候调用
		}
});

2.绘制数据源
//1.定制样式 初始化Intensity对象
let intensity = new this.$mapvgl.Intensity({
        max: 100,//最小范围
        min: 0, //最大范围
        gradient: { //0-1 颜色定制
			0: 'rgb(25, 66, 102, 0.8)',
			0.3: 'rgb(145, 102, 129, 0.8)',
			0.7: 'rgb(210, 131, 137, 0.8)',
			1: 'rgb(248, 177, 149, 0.8)'
        },
        maxSize: 30, //最大像素
        minSize: 5  //最小像素
});
//2.生成mapvgl 视图view
let view = new this.$mapvgl.View({map}); 
//3.初始化 mapvgl的PointLayer
var pointLayer = new this.$mapvgl.PointLayer({
        blend: 'lighter',
        size: function (data) {
                //data返回的对象数据
			return intensity.getSize(data.properties.count); //自动计算大小
        },
        color: function (data) {
			return intensity.getColor(data.properties.count); //颜色设置
        }
});
//4.将PointLayer对象加入到view中
view.appLayer({pointLayer})
//5.将data与PointLayer绑定
pointLayer.setData(data)

vue页面 （绘制飞线）

//初始化
const map = this.$initMap({
        tilt: 60, //倾斜角度
        heading: 0, //旋转角度
        center: [103.438656, 25.753594], //显示中心点
        zoom: 6, //地图显示级别
        style: this.$purpleStyle, //purpleStyle 暗黑色  snowStyle 淡白色
		skyColors: [
			// 地面颜色
			'rgba(226, 237, 248, 0)',
			// 天空颜色
			'rgba(186, 211, 252, 1)'
		]
      })

1.准备数据源
let data=[];
//生成贝塞尔曲线坐标集
//1.实例化贝塞尔曲线对象
let curve = new this.$mapvgl.BezierCurve();
//2.设置起点和终点坐标
let startPoint =mapv.utilCityCenter.getCenterByCityName('重庆');
let endPoint = mapv.utilCityCenter.getCenterByCityName('成都')
curve.setOptions({
		start: [startPoint.lng, startPoint.lat],
		end: [endPoint.lng, endPoint.lat]
});
//3，生成贝塞尔曲线坐标集
let curveData =  curve.curve.getPoints();

2.绘制数据源
    1.初始化图层
    let view = new mapvgl.View({map});
    2.初始化飞线动画
	let flylineLayer = new mapvgl.FlyLineLayer({
        style: 'chaos', //飞线样式 chaos随机不均匀移动
        step: 0.3, //飞线速度
        color: 'rgba(33, 242, 214, 0.3)',//飞线底色颜色
        textureColor: function (data) {
            return data.properties.count > 0.5 ? '#ff0000' : '#56ccdd';
        },//飞线颜色
        textureWidth: 20, //飞线宽度
        textureLength: 10 //飞线长度
    	});
    3.将飞线对象添加到对象中
        view.addLayer(flylineLayer);
    4.将飞线对象与数据源进行绑定
        flylineLayer.setData(data);