百度地图
1. 开发者账号申请
2. 入门
1. 基本使用
- 引入 js 库，注意需要附带申请的密钥 ak
- 编写容器组件
- 初始化 Map 对象
- 初始化 Point 对象
- 设置中心点和地图级别
<!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 {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#allmap {
width: 50%;
height: 50%;
margin: 100px auto;
}
/* 隐藏地图下方的logo与版权声明 */
.anchorBL, .BMap_cpyCtrl {
display: none;
}
</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>
2. 异步加载地图
在对性能敏感的场景下，我们可以选择异步加载百度地图，从而加快首屏的渲染速度
<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 {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#allmap {
width: 50%;
height: 50%;
margin: 100px auto;
}
</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>
3. 3D地图
我们可以使用 heading 和 tilt 属性控制地图的旋转角度和俯角
<!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 {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#allmap {
width: 100%;
height: 100%;
}
#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">loop</button>
<button id="stop">stop</button>
</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>
4. 控件与事件的使用
<!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: "微软雅黑";
}
/* 隐藏地图下方的logo与版权声明 */
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
/* 显示控件zoomCtrl控件 */
.BMap_stdMpZoom {
display: block;
}
</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", {
minZoom: 8, // 地图最小级别
maxZoom: 12, // 地图最大级别
// mapType: BMAP_EARTH_MAP // 设置地图类型为地球模式, 和setMapType用一个即可
});
map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 10);
map.enableScrollWheelZoom(true);
map.setMapType(BMAP_NORMAL_MAP); // BMAP_EARTH_MAP/BMAP_NORMAL_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, // 缩放控件的位置
offset: new BMapGL.Size(100, 100) // 缩放控件的偏移值
}); // 添加比例尺控件
map.addControl(zoomCtrl);
/**
* 事件
*/
map.addEventListener('zoomstart', function (e) { // 缩放开始
console.log('zoomstart', map.getZoom());
});
map.addEventListener('zoomend', function (e) { // 缩放结束
console.log('zoomend', map.getZoom());
});
</script>
5. 自定义地图
<!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>
3. 进阶
1. 绘制图标
- 绘制图标
- 绘制线段
- 绘制文本
- 绘制弹窗
<!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 myIcon = new BMapGL.Icon(
"https://www.youbaobao.xyz/datav-res/datav/location.png",
new BMapGL.Size(60, 60),
{
anchor: new BMapGL.Size(0, 0),
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); // 创建信息窗口对象
var infoWindow = new BMapGL.InfoWindow("<div style='color: red;'>欢迎</div>", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); // 打开信息窗口
});
map.addOverlay(marker); // 将标注添加到地图中
// 创建线段对象
var polyline = new BMapGL.Polyline(
[
new BMapGL.Point(116.4, 39.8),
new BMapGL.Point(116.43, 39.8),
new BMapGL.Point(116.43, 39.83),
new BMapGL.Point(116.4, 39.83),
// new BMapGL.Point(116.4, 39.8),
],
{
strokeColor: "blue",
strokeWeight: 2,
strokeOpacity: 0.5,
}
);
map.addOverlay(polyline);
// 创建区域对象
var polygon = new BMapGL.Polygon(
[
new BMapGL.Point(116.60, 39.920),
new BMapGL.Point(116.80, 39.920),
new BMapGL.Point(116.80, 40.00),
],
{
strokeColor: "blue",
strokeWeight: 2,
fillColor: 'green'
}
);
map.addOverlay(polygon);
// 创建文本标注对象
var content = "欢迎学习数据可视化";
var label = new BMapGL.Label(content, {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(200, 20), // 设置标注的偏移量
});
label.setStyle({
// 设置label的样式
width: "140px",
height: "20px",
padding: "20px",
color: "#fff",
fontSize: "14px",
lineHeight: '14px',
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>
2. ViewAnimation视图动画
<!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: 20000, // 设置每次迭代动画持续时间
delay: 1000, // 设置动画延迟开始时间
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>
3. TrackAnimation轨迹动画
<!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: 1000 // 动画开始的延迟，默认0，单位ms
});
document.getElementById('start').addEventListener('click', function () {
trackAni.start();
});
document.getElementById('end').addEventListener('click', function () {
trackAni.cancel(); // 强制停止动画
});
</script>
3. 可视化
百度地图可视化通过 mapv 和 mapvgl 解决
1. 散点图
<!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/mapvgl@1.0.0-beta.54/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) {
// 1. 生成 mapvgl 视图 View
var view = new mapvgl.View({
map: map
});
// 2. 初始化 mapvgl 的 Intensity 对象
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
});
// 3. 初始化 mapvgl 的 PointLayer 对象
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);
}
});
// 4. 将 PointLayer 添加到 View 中
view.addLayer(pointLayer);
// 5. 将 data 数据添加到 PointLayer 中
pointLayer.setData(data);
}
</script>
</body>
</html>
2. 点聚合
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>地图展示</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<style>
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/mapvgl@1.0.0-beta.189/dist/mapvgl.min.js"></script>
</head>
<body>
<div id="map_container"></div>
<script>
/* global BMapGL */
/* global mapv */
/* global mapvgl */
/* global initMap */
/* global whiteStyle */
var map = initMap({
style: whiteStyle,
tilt: 10,
center: [109.792816, 27.702774],
zoom: 5,
skyColors: [
// 地面颜色
'rgba(226, 237, 248, 0)',
// 天空颜色
'rgba(186, 211, 252, 1)'
],
});
var data = [];
var citys = [
'北京',
'天津',
'上海',
'重庆',
'石家庄',
'太原',
'呼和浩特',
'哈尔滨',
'长春',
'沈阳',
'济南',
'南京',
'合肥',
'杭州',
'南昌',
'福州',
'郑州',
'武汉',
'长沙',
'广州',
'南宁',
'西安',
'银川',
'兰州',
'西宁',
'乌鲁木齐',
'成都',
'贵阳',
'昆明',
'拉萨',
'海口'
];
var randomCount = 100000;
// 构造数据
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: {
icon: 'https://www.youbaobao.xyz/datav-res/datav/location.png',
width: 20,
height: 30
}
});
}
var view = new mapvgl.View({
map: map
});
var clusterLayer = new mapvgl.ClusterLayer({
minSize: 50, // 聚合点显示的最小直径
maxSize: 70, // 聚合点显示的最大直径
clusterRadius: 150, // 聚合范围半径
gradient: { 0: 'blue', 0.5: 'green', 1.0: 'red' }, // 聚合点颜色梯度
maxZoom: 15, // 聚合的最大级别，当地图放大级别高于此值将不再聚合
minZoom: 5, // 聚合的最小级别，当地图放大级别低于此值将不再聚合
// 是否显示文字
showText: true,
// 开始聚合的最少点数，点数多于此值才会被聚合
minPoints: 5,
// 设置文字样式
textOptions: {
fontSize: 12,
color: 'white',
// 格式化数字显示
format: function (count) {
console.log('count', count);
return count >= 10000 ? Math.round(count / 1000) + 'k'
: count >= 1000 ? Math.round(count / 100) / 10 + 'k' : count;
}
},
enablePicked: true,
onClick(e) {
if (e.dataItem) {
// 可通过dataItem下面的children属性拿到被聚合的所有点
console.log(e.dataItem)
}
},
});
view.addLayer(clusterLayer);
clusterLayer.setData(data);
</script>
</body>
</html>
3. 飞线动画
<!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/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>
<title>地图展示</title>
</head>
<body>
<div id="map_container"></div>
<script type="text/javascript">
var map = initMap({
tilt: 50,
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(),
name: 'zgc'
}
});
}
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) {
console.log('data',data);
return data.properties.count > 0.5 ? '#ff0000' : '#56ccdd';
},
textureWidth: 20,
textureLength: 10
});
view.addLayer(flylineLayer);
flylineLayer.setData(data);
}
</script>
</body>
</html>
4. 炫酷线图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<script type="text/javascript" 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.53/dist/mapvgl.threelayers.min.js"></script>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#map_container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map_container"></div>
<script type="text/javascript">
var map = initBMap()
var data = initData()
setData(data)
// 初始化百度地图
function initBMap() {
var map = initMap({
tilt: 0,
center: [108.154518, 36.643346],
zoom: 5,
style: darkStyle
})
return map
}
function initData() {
var targetCity = mapv.utilCityCenter.getCenterByCityName('北京')
var randomCount = 500
var node_data = [ // 节点数据
{ // 目标点
x: targetCity.lng,
y: targetCity.lat
}
]
var edge_data = [ // 边数据
{
source: 0, // node_data的起始点索引
target: 0 // node_data的目标点索引
}
]
var cities = [
'北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春', '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州', '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
]
// 构造数据
for (var i = 0; i < randomCount; i++) {
var cityCenter = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)])
node_data.push({
x: cityCenter.lng - 5 + Math.random() * 10,
y: cityCenter.lat - 5 + Math.random() * 10
})
edge_data.push({
source: i + 1,
target: 0
})
}
var fbundling = mapv.utilForceEdgeBundling()
.nodes(node_data)
.edges(edge_data)
var results = fbundling()
console.log('results', results);
var data = []
var timeData = []
for (var i = 0; i < results.length; i++) {
var line = results[i]
// console.log('line', line);
var coordinates = []
for (var j = 0; j < line.length; j++) {
coordinates.push([line[j].x, line[j].y])
// timeData.push({
// geometry: {
// type: 'LineString',
// coordinates: [line[j].x, line[j].y]
// },
// count: 1,
// time: j
// })
}
data.push({
geometry: {
type: 'LineString',
coordinates: coordinates
}
})
}
return {
pointData: timeData,
lineData: data
}
}
function setData({ pointData, lineData }) {
// console.log(pointData)
var view = new mapvgl.View({ map })
var lineLayer = new mapvgl.LineLayer({
color: 'rgba(55, 50, 250, 0.3)',
blend: 'lighter' // 线重叠时高亮
})
view.addLayer(lineLayer)
lineLayer.setData(lineData)
var linePointLayer = new mapvgl.LinePointLayer({
size: 8, // 线点的大小
speed: 20, // 线点的速度
color: 'rgba(255, 255, 0, 0.6)', // 线点的颜色
animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_SMOOTH, // 线点的动画类型
shapeType: mapvgl.LinePointLayer.SHAPE_TYPE_CIRCLE, // 线点的形状
blend: 'lighter' // 线点的重叠时高亮
})
view.addLayer(linePointLayer)
linePointLayer.setData(lineData)
}
</script>
</body>
</html>
5. 3D建筑
<!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/mapvgl@1.0.0-beta.54/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)',
style: 'normal',
// opacity: 1.0, // 透明度
riseTime: 2000, // 楼房升起动画
opacity: 0.3, // 透明度
enablePicked: true, // 是否可以拾取
selectedIndex: -1, // 选中项
selectedColor: '#ee1111', // 选中项颜色
autoSelect: true, // 根据鼠标位置来自动设置选中项
onClick: (e) => { // 点击事件
console.log(e);
}
});
view.addLayer(shaperLayer);
shaperLayer.setData(data);
}
</script>
</body>
</html>
