Vue 使用百度地图GL
项目开发笔记（转发请说明出处）public index文件引入百度地图Gl里面的KEY为自己的百度key，在百度地图开发平台里注册获取 链接地图个性化网址： 百度地图个性化编辑器（1）图标标注（2）折线/多边形(3)文本标注(4)地图弹窗信息（5）绘制动画(绘制线段)控件：三、把坐标转为百度地图坐标四、MAPV（地图可视化）1.引入public里引入js 需要改自己的key在 main.js 里
·
项目开发笔记
一、引入
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.purpleStylevue页面（绘制点）
//初始化
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);
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献2条内容
所有评论(0)