一文带你搞懂百度地图可视化开发
百度地图入门
百度开发者账号申请
- 官方教程
- 控制台
- API
基本用法
::: details
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
style>
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb">script>
<title>地图展示title>
head>
<body>
<div id="allmap">div>
body>
html>
<script type="text/javascript">
var map = new BMapGL.Map("allmap"); // 创建Map实例
var point = new BMapGL.Point(116.404, 39.915); // 初始化中心点坐标
map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
script>
:::
思考：百度地图的绘图流程是怎样的？
::: details
- 引入 js 库，注意需要附带申请的密钥 ak
- 编写容器组件
- 初始化 Map 对象
- 初始化 Point 对象
- 设置中心点和地图级别
:::
异步加载
在对性能敏感的场景下，我们可以选择异步加载百度地图，从而加快首屏的渲染速度
::: details
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
style>
<title>异步地图展示title>
head>
<body>
<div id="allmap">div>
body>
html>
<script type="text/javascript">
function init() {
var map = new BMapGL.Map('allmap');
var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 12);
map.enableScrollWheelZoom(true);
}
function loadScript() {
var script = document.createElement("script");
script.src = "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb&callback=init";
document.body.appendChild(script);
}
window.onload = loadScript;
script>
:::
3D地图
我们可以使用 heading 和 tilt 属性控制地图的旋转角度和俯角
官方文档
::: details
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#allmap { position: relative; }
#tools { position: absolute; left: 0; top: 0; z-index: 1000;}
.tools-bar { display: flex; }
.label { width: 80px; text-align: right; }
style>
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb">script>
<title>地图展示title>
head>
<body>
<div id="allmap">div>
<div id="tools">
<div class="tools-bar">
<div class="label">heading:div>
<button id="heading-add">+button>
<input type="text" id="heading" value="40">
<button id="heading-minus">-button>
div>
<div class="tools-bar">
<div class="label">tilt:div>
<button id="tilt-add">+button>
<input type="text" id="tilt" value="70">
<button id="tilt-minus">-button>
div>
<div class="tools-bar">
<button id="loop">loopbutton>
<button id="stop">stopbutton>
div>
div>
body>
html>
<script type="text/javascript">
// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map("allmap"); // 创建Map实例
var point = new BMapGL.Point(116.280190, 40.049191);
map.centerAndZoom(point, 19); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
map.setHeading(40); // 设置地图旋转角度
map.setTilt(70); // 设置地图的倾斜角度
var heading = document.getElementById('heading');
var headingAdd = document.getElementById('heading-add');
var headingMinus = document.getElementById('heading-minus');
var tilt = document.getElementById('tilt');
var tiltAdd = document.getElementById('tilt-add');
var tiltMinus = document.getElementById('tilt-minus');
heading.addEventListener('input', function(e) {
map.setHeading(e.target.value);
});
tilt.addEventListener('input', function(e) {
map.setTilt(e.target.value);
});
headingAdd.addEventListener('click', function(e) {
heading.value++;
map.setHeading(heading.value);
});
headingMinus.addEventListener('click', function(e) {
heading.value--;
map.setHeading(heading.value);
});
tiltAdd.addEventListener('click', function(e) {
tilt.value++;
map.setTilt(tilt.value);
});
tiltMinus.addEventListener('click', function(e) {
tilt.value--;
map.setTilt(tilt.value);
});
var task;
document.getElementById('loop').addEventListener('click', function(e) {
task = setInterval(() => {
if (loop) {
heading.value++;
map.setHeading(heading.value);
}
}, 100);
});
document.getElementById('stop').addEventListener('click', function(e) {
task && clearInterval(task);
})
script>
:::
3D地球
官方文档
::: details
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
style>
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb">script>
<title>地图展示title>
head>
<body>
<div id="allmap">div>
body>
html>
<script type="text/javascript">
// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map("allmap");
map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5);
map.enableScrollWheelZoom(true);
map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式
var scaleCtrl = new BMapGL.ScaleControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: new BMapGL.Size(100, 10)
}); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
}); // 添加比例尺控件
map.addControl(zoomCtrl);
script>
:::
添加控件
官方文档
案例同上
个性化地图
官方文档
::: details
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
style>
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb">script>
<title>地图展示title>
head>
<body>
<div id="allmap">div>
body>
html>
<script type="text/javascript">
// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map("allmap"); // 创建Map实例
var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 9); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.setMapStyleV2({
styleId: 'a0c43e8c7279db0a4a032712d0e4c32c'
});
script>
:::
百度地图进阶
百度地图绘图
包括：
- 绘制图标
- 绘制线段
- 绘制文本
- 绘制弹窗
::: details
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
style>
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb">script>
<title>地图展示title>
head>
<body>
<div id="allmap">div>
body>
html>
<script type="text/javascript">
var map = new BMapGL.Map("allmap"); // 创建Map实例
var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 12);
// map.enableScrollWheelZoom(true);
map.setMapStyleV2({
styleId: '556b6c846f130ec3ad0016f2eba410f6'
});
// var marker = new BMapGL.Marker(point); // 创建标注
// map.addOverlay(marker); // 将标注添加到地图中
var 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)
}
);
// 创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, { icon: myIcon });
marker.addEventListener("click", function(){
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "标题" // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow("内容", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); // 打开信息窗口
});
map.addOverlay(marker);
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
});
map.addOverlay(polyline);
var content = "欢迎学习数据可视化体系课";
var label = new BMapGL.Label(content, { // 创建文本标注
position: 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) {
alert(e.target.content);
});
map.addOverlay(label); // 将标注添加到地图中
script>
:::
百度地图动画
::: details
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#allmap {position: relative;}
#tools {position: absolute;left:0;top:0;z-index: 1000;}
style>
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb">script>
<title>地图展示title>
head>
<body>
<div id="allmap">div>
<div id="tools">
<button id="start">播放动画button>
<button id="end">停止播放button>
div>
body>
html>
<script type="text/javascript">
var bmap = new BMapGL.Map("allmap"); // 创建Map实例
bmap.centerAndZoom(new BMapGL.Point(116.414, 39.915), 20); // 初始化地图，设置中心点坐标和地图级别
bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
bmap.setTilt(20); // 设置地图初始倾斜角度
var keyFrames = [
{
center: new BMapGL.Point(116.307092,40.054922),
zoom:20,
tilt: 50,
heading: 0,
percentage: 0
},
{
center: new BMapGL.Point(116.307631,40.055391),
zoom: 21,
tilt: 70,
heading: 0,
percentage: 0.1
},
{
center: new BMapGL.Point(116.306858,40.057887),
zoom:21,
tilt: 70,
heading: 0,
percentage: 0.25
},
{
center: new BMapGL.Point(116.306858,40.057887),
zoom:21,
tilt: 70,
heading: -90,
percentage: 0.35
},
{
center: new BMapGL.Point(116.307904,40.058118),
zoom: 21,
tilt: 70,
heading: -90,
percentage: 0.45
},
{
center: new BMapGL.Point(116.307904,40.058118),
zoom: 21,
tilt: 70,
heading: -180,
percentage: 0.55
},
{
center: new BMapGL.Point(116.308902,40.055954),
zoom:21,
tilt: 70,
heading: -180,
percentage: 0.75
},
{
center: new BMapGL.Point(116.308902,40.055954),
zoom:21,
tilt: 70,
heading: -270,
percentage: 0.85
},
{
center: new BMapGL.Point(116.307779,40.055754),
zoom:21,
tilt: 70,
heading: -360,
percentage: 0.95
},
{
center: new BMapGL.Point(116.307092,40.054922),
zoom:20,
tilt: 50,
heading: -360,
percentage: 1
},
];
var opts = {
duration: 10000, // 设置每次迭代动画持续时间
delay: 3000, // 设置动画延迟开始时间
interation: 'INFINITE' // 设置动画迭代次数
};
var animation = new BMapGL.ViewAnimation(keyFrames, opts); // 初始化动画实例
animation.addEventListener('animationstart', function(e) { // 监听动画开始事件
console.log('start');
});
animation.addEventListener('animationiterations', function(e) { // 监听动画迭代事件
console.log('onanimationiterations');
});
animation.addEventListener('animationend', function(e) { // 监听动画结束事件
console.log('end');
});
animation.addEventListener('animationcancel', function(e) { // 监听动画中途被终止事件
console.log('cancel');
});
document.getElementById('start').addEventListener('click', function() {
bmap.startViewAnimation(animation); // 开始播放动画
});
document.getElementById('end').addEventListener('click', function() {
bmap.cancelViewAnimation(animation); // 强制停止动画
});
script>
:::
百度地图轨迹动画
::: details
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#allmap {position: relative;}
#tools {position: absolute;left:0;top:0;z-index: 1000;}
style>
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb">script>
<script type="text/javascript" src="https://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js">script>
<title>地图展示title>
head>
<body>
<div id="allmap">div>
<div id="tools">
<button id="start">播放动画button>
<button id="end">停止播放button>
div>
body>
html>
<script type="text/javascript">
var bmap = new BMapGL.Map("allmap"); // 创建Map实例
bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17); // 初始化地图，设置中心点坐标和地图级别
bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
var path = [{
'lng': 116.297611,
'lat': 40.047363
}, {
'lng': 116.302839,
'lat': 40.048219
}, {
'lng': 116.308301,
'lat': 40.050566
}, {
'lng': 116.305732,
'lat': 40.054957
}, {
'lng': 116.304754,
'lat': 40.057953
}, {
'lng': 116.306487,
'lat': 40.058312
}, {
'lng': 116.307223,
'lat': 40.056379
}];
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(); // 强制停止动画
});
script>
:::
百度地图可视化
- 官方文档
- 官方文档2
- 官方示例
- 官方示例2
百度地图绘制点
百度地图可视化通过 mapv 和 mapvgl 解决
全屏预览
::: details
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
margin: 0;
}
style>
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb">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/[email protected]/dist/mapvgl.min.js">script>
<title>地图展示title>
head>
<body>
<div id="map_container">div>
<script type="text/javascript">
var map = initMap({
tilt: 0,
heading: 0,
center: [103.438656,25.753594],
zoom: 8,
style: snowStyle,
skyColors: [
// 地面颜色
'rgba(226, 237, 248, 0)',
// 天空颜色
'rgba(186, 211, 252, 1)'
]
});
setData(initData());
function initData() {
var data = [];
var citys = [
'北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
];
var randomCount = 700;
// 构造数据
while (randomCount--) {
var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)]);
data.push({
geometry: {
type: 'Point',
coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]
},
properties: {
count: Math.random() * 100
}
});
}
return data;
}
function setData(data) {
var view = new mapvgl.View({
map: map
});
var intensity = new mapvgl.Intensity({
max: 100,
min: 0,
gradient: {
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
});
var pointLayer = new mapvgl.PointLayer({
blend: 'lighter',
size: function (data) {
return intensity.getSize(data.properties.count);
},
color: function (data) {
return intensity.getColor(data.properties.count);
}
});
view.addLayer(pointLayer);
pointLayer.setData(data);
}
script>
body>
html>
:::
思考：百度地图mapv开发流程是怎样的？
::: details
- 引入 js 库
- 百度地图 js
- 百度地图 mapv
- 百度地图 mapvgl
- 编写容器组件
- 初始化 Map 对象
- 初始化绘制数据，数据格式为：
[{
geometry: {
type: 'Point',
coordinates: [x, y]
},
properties: {
count: Math.random() * 100
// other properties...
}
}, {
// other data...
}]
- 初始化 mapvgl.View 图层管理器
- 初始化 mapvgl.Intensity 数据显示强度
- 初始化 mapvgl.PointLayer 图层
- 调用 view.addLayer 添加图层到图层管理器
- 调用 mapvgl.PointLayer.setData 关联图层和数据
:::
百度地图飞线动画
全屏预览
::: details
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
margin: 0;
}
style>
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb">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/[email protected]/dist/mapvgl.min.js">script>
<script src="https://code.bdstatic.com/npm/[email protected]/dist/mapvgl.threelayers.min.js">script>
<title>地图展示title>
head>
<body>
<div id="map_container">div>
<script type="text/javascript">
var map = initMap({
tilt: 60,
heading: 0,
center: [103.438656,25.753594],
zoom: 6,
style: purpleStyle
});
setData(initData());
function initData() {
var data = [];
var citys = [
'北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
];
var randomCount = 100; // 模拟的飞线的数量
var curve = new mapvgl.BezierCurve();
// 构造数据
while (randomCount--) {
var startPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)]);
var endPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)])
curve.setOptions({
start: [startPoint.lng, startPoint.lat],
end: [endPoint.lng, endPoint.lat]
});
var curveModelData = curve.getPoints();
data.push({
geometry: {
type: 'LineString',
coordinates: curveModelData
},
properties: {
count: Math.random()
}
});
}
return data;
}
function setData(data) {
var view = new mapvgl.View({
map: map
});
var flylineLayer = new mapvgl.FlyLineLayer({
style: '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
});
view.addLayer(flylineLayer);
flylineLayer.setData(data);
}
script>
body>
html>
:::
百度地图3D建筑
全屏预览
::: details
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
margin: 0;
}
style>
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb">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/[email protected]/dist/mapvgl.min.js">script>
<title>地图展示title>
head>
<body>
<div id="map_container">div>
<script type="text/javascript">
var map = initMap({
tilt: 80,
heading: -45.3,
center: [106.540547,29.564858],
zoom: 17
});
initData();
function initData() {
fetch('https://www.youbaobao.xyz/datav-res/examples/chongqing.json')
.then(res => res.json())
.then(res => {
var data = res;
var polygons = [];
var len = data.length;
for (var i = 0; i < len; i++) {
var line = data[i];
var polygon = [];
var pt = [line[1] * 512, line[2] * 512];
for (var j = 3; j < line.length; j += 2) {
pt[0] += line[j] / 100 / 2;
pt[1] += line[j + 1] / 100 / 2;
polygon.push([pt[0], pt[1]]);
}
polygons.push({
geometry: {
type: 'Polygon',
coordinates: [polygon]
},
properties: {
height: line[0] / 2
}
});
}
setData(polygons);
});
}
function setData(data) {
console.log(data);
var view = new mapvgl.View({
map: map
});
var shaperLayer = new mapvgl.ShapeLayer({
color: 'rgb(0, 255, 255)',
blend: 'lighter',
// style: 'normal',
// style: 'gradual',
style: 'windowAnimation',
opacity: 1.0, // 透明度
riseTime: 2000, // 楼房升起动画
});
view.addLayer(shaperLayer);
shaperLayer.setData(data);
}
script>
body>
html>
:::
百度地图炫酷飞线图
全屏预览
::: details
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#map {
width: 100%;
height: 100%;
}
style>
head>
<body>
<div id="map">div>
<canvas id="canvas">canvas>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ">script>
<script type="text/javascript" src="https://mapv.baidu.com/build/mapv.js">script>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("map", {
enableMapClick: false
}); // 创建Map实例
map.centerAndZoom(new BMap.Point(108.154518,36.643346), 5); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
// 地图自定义样式
map.setMapStyle({
styleJson: [{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#044161"
}
}, {
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#091934"
}
}, {
"featureType": "boundary",
"elementType": "geometry",
"stylers": {
"color": "#064f85"
}
}, {
"featureType": "railway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"color": "#004981"
}
}, {
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#005b96",
"lightness": 1
}
}, {
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "arterial",
"elementType": "geometry",
"stylers": {
"color": "#004981",
"lightness": -39
}
}, {
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#00508b"
}
}, {
"featureType": "poi",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "green",
"elementType": "all",
"stylers": {
"color": "#056197",
"visibility": "off"
}
}, {
"featureType": "subway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "manmade",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "local",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "arterial",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "boundary",
"elementType": "geometry.fill",
"stylers": {
"color": "#029fd4"
}
}, {
"featureType": "building",
"elementType": "all",
"stylers": {
"color": "#1a5787"
}
}, {
"featureType": "label",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": {
"color": "#ffffff"
}
}, {
"featureType": "poi",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#1e1c1c"
}
}, {
"featureType": "administrative",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},{
"featureType": "road",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}]
});
var randomCount = 500;
var node_data = {
"0":{"x":108.154518, "y":36.643346},
"1":{"x":121.485124, "y":31.235317},
};
var edge_data = [
{"source":"1", "target":"0"}
]
var citys = ["北京","天津","上海","重庆","石家庄","太原","呼和浩特","哈尔滨","长春","沈阳","济南","南京","合肥","杭州","南昌","福州","郑州","武汉","长沙","广州","南宁","西安","银川","兰州","西宁","乌鲁木齐","成都","贵阳","昆明","拉萨","海口"];
// 构造数据
for (var i = 1; i < randomCount; i++) {
var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
node_data[i] = {
x: cityCenter.lng - 5 + Math.random() * 10,
y: cityCenter.lat - 5 + Math.random() * 10,
}
edge_data.push(
{"source": ~~(i * Math.random()), "target": '0'}
);
}
var fbundling = mapv.utilForceEdgeBundling()
.nodes(node_data)
.edges(edge_data);
var results = fbundling();
var data = [];
var timeData = [];
for (var i = 0; i < results.length; i++) {
var line = results[i];
var coordinates = [];
for (var j = 0; j < line.length; j++) {
coordinates.push([line[j].x, line[j].y]);
timeData.push({
geometry: {
type: 'Point',
coordinates: [line[j].x, line[j].y]
},
count: 1,
time: j
});
}
data.push({
geometry: {
type: 'LineString',
coordinates: coordinates
}
});
}
var dataSet = new mapv.DataSet(data);
var options = {
strokeStyle: 'rgba(55, 50, 250, 0.3)',
globalCompositeOperation: 'lighter',
shadowColor: 'rgba(55, 50, 250, 0.5)',
shadowBlur: 10,
methods: {
click: function (item) {
}
},
lineWidth: 1.0,
draw: 'simple'
}
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
var dataSet = new mapv.DataSet(timeData);
var options = {
fillStyle: 'rgba(255, 250, 250, 0.9)',
globalCompositeOperation: 'lighter',
size: 1.5,
animation: {
type: 'time',
stepsRange: {
start: 0,
end: 100
},
trails: 1,
duration: 5,
},
draw: 'simple'
}
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
script>
body>
html>
:::
百度地图外卖指数
全屏预览
::: details
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#map {
width: 100%;
height: 100%;
}
#time {
position: absolute;
right: 10px;
bottom: 10px;
color: #fff;
padding: 10px;
background: rgba(255, 255, 255, 0.3);
}
style>
head>
<body>
<div id="map">div>
<canvas id="canvas">canvas>
<div id="time">div>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ">script>
<script type="text/javascript" src="https://mapv.baidu.com/build/mapv.js">script>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("map", {
enableMapClick: false
}); // 创建Map实例
map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
// 地图自定义样式
map.setMapStyle({
styleJson: [{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#044161"
}
}, {
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#091934"
}
}, {
"featureType": "boundary",
"elementType": "geometry",
"stylers": {
"color": "#064f85"
}
}, {
"featureType": "railway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"color": "#004981"
}
}, {
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#005b96",
"lightness": 1
}
}, {
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "arterial",
"elementType": "geometry",
"stylers": {
"color": "#004981",
"lightness": -39
}
}, {
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#00508b"
}
}, {
"featureType": "poi",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "green",
"elementType": "all",
"stylers": {
"color": "#056197",
"visibility": "off"
}
}, {
"featureType": "subway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "manmade",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "local",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "arterial",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "boundary",
"elementType": "geometry.fill",
"stylers": {
"color": "#029fd4"
}
}, {
"featureType": "building",
"elementType": "all",
"stylers": {
"color": "#1a5787"
}
}, {
"featureType": "label",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": {
"color": "#ffffff"
}
}, {
"featureType": "poi",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#1e1c1c"
}
}, {
"featureType": "administrative",
"elementType": "labels",
"stylers": {
"visibility": "on"
}
},{
"featureType": "road",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}]
});
$.get('https://www.youbaobao.xyz/datav-res/examples/weibo.json', function (rs) {
console.log(rs);
var data1 = [];
var data2 = [];
var data3 = [];
var data4 = [];
for (var i = 0; i < rs[0].length; i++) {
var geoCoord = rs[0][i].geoCoord;
data1.push({
geometry: {
type: 'Point',
coordinates: geoCoord
}
});
}
for (var i = 0; i < rs[1].length; i++) {
var geoCoord = rs[1][i].geoCoord;
data2.push({
geometry: {
type: 'Point',
coordinates: geoCoord
},
time: Math.random() * 10
});
}
for (var i = 0; i < rs[2].length; i++) {
var geoCoord = rs[2][i].geoCoord;
data3.push({
geometry: {
type: 'Point',
coordinates: geoCoord
},
});
}
var dataSet = new mapv.DataSet(data1);
var options = {
fillStyle: 'rgba(200, 200, 0, 0.8)',
bigData: 'Point',
size: 0.7,
draw: 'simple',
}
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
var dataSet = new mapv.DataSet(data2);
var options = {
fillStyle: 'rgba(255, 250, 0, 0.8)',
size: 0.7,
bigData: 'Point',
draw: 'simple',
}
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
var dataSet = new mapv.DataSet(data3);
var options = {
fillStyle: 'rgba(255, 250, 250, 0.6)',
size: 0.7,
bigData: 'Point',
draw: 'simple',
}
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
var dataSet = new mapv.DataSet(data2);
var options = {
fillStyle: 'rgba(255, 250, 250, 0.9)',
size: 1.1,
draw: 'simple',
bigData: 'Point',
animation: {
stepsRange: {
start: 0,
end: 10
},
trails: 1,
duration: 6,
}
}
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
});
script>
body>
html>
:::
百度地图 + Vue
基本用法
- 引入 js 库
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb">script>
- 挂载 Vue 实例
Vue.prototype.$bmap = window.BMapGL
- 编写代码
<template>
<div id="bmap" />
template>
<script>
export default {
mounted() {
const { Map, Point } = this.$bmap
const map = new Map('bmap')
const point = new Point(116.404, 39.915)
map.centerAndZoom(point, 12)
map.enableScrollWheelZoom(true)
}
}
script>
<style>
#bmap {
width: 100%;
height: 100%;
}
style>
注意以下问题：
- 容器 div 需要使用 id
- 容器 div 需要指定宽高
其余用法与 html 中编码无异
百度地图组件封装
封装 BaiduMap 组件：
<template>
<div :id="bmapId" :style="{ width: '100%', height: '100%' }" />
template>
<script>
export default {
props: {
point: Array,
zoom: Number,
enableScroll: Boolean
},
data() {
return {
bmapId: `bmap-${new Date().getTime()}`
}
},
mounted() {
const { Map, Point } = this.$bmap
const map = new Map(this.bmapId)
const point = new Point(this.point[0], this.point[1])
map.centerAndZoom(point, this.zoom)
map.enableScrollWheelZoom(this.enableScroll)
}
}
script>
优化上节中的源码：
<template>
<baidu-map
:point="[116.404, 39.915]"
:zoom="12"
enable-scroll
/>
template>
<script>
import BaiduMap from '../components/BaiduMap'
export default {
components: { BaiduMap }
}
script>
飞线地图移植
添加依赖
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb">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/[email protected]/dist/mapvgl.min.js">script>
<script src="https://code.bdstatic.com/npm/[email protected]/dist/mapvgl.threelayers.min.js">script>
在 main.js 中添加百度地图相关对象
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
代码移植和修改
<template>
<div id="map_container" />
template>
<script>
export default {
mounted() {
const map = this.$initMap({
tilt: 60,
heading: 0,
center: [103.438656, 25.753594],
zoom: 6,
style: this.$purpleStyle
})
const initData = () => {
const data = []
const cities = [
'北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
]
let randomCount = 100 // 模拟的飞线的数量
const curve = new this.$mapvgl.BezierCurve()
// 构造数据
while (randomCount--) {
const startPoint = this.$mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])
const endPoint = this.$mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])
curve.setOptions({
start: [startPoint.lng, startPoint.lat],
end: [endPoint.lng, endPoint.lat]
})
const curveModelData = curve.getPoints()
data.push({
geometry: {
type: 'LineString',
coordinates: curveModelData
},
properties: {
count: Math.random()
}
})
}
return data
}
const setData = (data) => {
const view = new this.$mapvgl.View({
map: map
})
const flylineLayer = new this.$mapvgl.FlyLineLayer({
style: '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
})
view.addLayer(flylineLayer)
flylineLayer.setData(data)
}
setData(initData())
}
}
script>
<style>
#map_container {
width: 100%;
height: 100%;
}
style>
炫酷飞线地图移植
<template>
<div id="map" />
template>
<script>
import styleJson from '@/assets/style.json'
/* eslint-disable */
export default {
mounted() {
const map = new this.$bmap2.Map('map', {
enableMapClick: false
})
map.centerAndZoom(new this.$bmap2.Point(108.154518, 36.643346), 5)
map.enableScrollWheelZoom(true)
map.setMapStyle({
styleJson
})
const randomCount = 500
const nodeData = {
0: { x: 108.154518, y: 36.643346 },
1: { x: 121.485124, y: 31.235317 }
}
const edgeData = [
{ source: '1', target: '0' }
]
const cities = ['北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春', '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州', '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口']
// 构造数据
for (let i = 1; i < randomCount; i++) {
const cityCenter = this.$mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)])
nodeData[i] = {
x: cityCenter.lng - 5 + Math.random() * 10,
y: cityCenter.lat - 5 + Math.random() * 10
}
edgeData.push({
source: ~~(i * Math.random()),
target: '0'
})
}
const fbundling = this.$mapv.utilForceEdgeBundling()
.nodes(nodeData)
.edges(edgeData)
const results = fbundling()
const data = []
const timeData = []
for (let i = 0; i < results.length; i++) {
const line = results[i]
const coordinates = []
for (let j = 0; j < line.length; j++) {
coordinates.push([line[j].x, line[j].y])
timeData.push({
geometry: {
type: 'Point',
coordinates: [line[j].x, line[j].y]
},
count: 1,
time: j
})
}
data.push({
geometry: {
type: 'LineString',
coordinates: coordinates
}
})
}
let dataSet = new this.$mapv.DataSet(data)
let options = {
strokeStyle: 'rgba(55, 50, 250, 0.3)',
globalCompositeOperation: 'lighter',
shadowColor: 'rgba(55, 50, 250, 0.5)',
shadowBlur: 10,
methods: {
click: function(item) {
}
},
lineWidth: 1.0,
draw: 'simple'
}
let mapvLayer = new this.$mapv.baiduMapLayer(map, dataSet, options)
dataSet = new this.$mapv.DataSet(timeData)
options = {
fillStyle: 'rgba(255, 250, 250, 0.9)',
globalCompositeOperation: 'lighter',
size: 1.5,
animation: {
type: 'time',
stepsRange: {
start: 0,
end: 100
},
trails: 1,
duration: 5
},
draw: 'simple'
}
mapvLayer = new this.$mapv.baiduMapLayer(map, dataSet, options)
}
}
script>
<style>
#map {
width: 100%;
height: 100%;
}
style>