MapV开发文档 (baidu.com) 但是在文档中详细的操作不是非常详细。
使用百度地图中的地图可视化（MapVGL）绘制散点图
1. 在head 头部 导入需要的依赖信息
<!-- 百度地图基础库 使用自己的 ak 进行配置 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=********"></script>
<!-- 公共的文件代码 里面包含 地图初始化 和 实用样式 -->
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<!-- 使用根据城市名称获取城市的坐标 -->
<script src="https://mapv.baidu.com/build/mapv.js"></script>
<!--使用mapcgl的时候需要引入-->
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
2. 进行全局样式的配置
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
}
3. 编写一个容器用于展示地图 这里的id名称 在commo.js文件中已经被固定了，这里只能写为 map_container
<div id="map_container"></div>
4. 初始化地图
这里初始化地图使用的是
https://mapv.baidu.com/gl/examples/static/common.js库中的initMap函数它初始化完成一个地图之后会返回一个地图对象。在
common.js中有初始化地图公共的代码，但是其将地图容器的名称固定的写为map_container，这里需要注意。可以使用
mapv库中的mapv.utilCityCenter.getCenterByCityName('城市名称')根据城市名称获取一个城市的中心点坐标。
/**
* 初始化地图
* */
function initMyMap() {
// 使用工具类获取城市的中心点坐标
let centerCity = mapv.utilCityCenter.getCenterByCityName('城市名称')
// 使用 /examples/static/common.js 下的 initMap 方法进行地图的初始化
let map = initMap(
{
tilt: 45,
heading: 30,
zoom: 8,
center: [centerCity.lng, centerCity.lat],
style: snowStyle
}
)
return map
}
5. 初始化数据
- 这里需要初始化数据并进行返回 ；使用循环不断的向
data中设置一个个的点数据。
/**
* 初始化数据
*/
function initData() {
// 保存的是每一个点的数据信息 这些点需要进行构造
let data = [];
// 保存城市信息
let cities = ['北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'];
// 需要绘制的点的数量
let randomCount = 700
while (randomCount--) {
// 根据每一个城市名称获取到城市的中心点坐标
let centerCity = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])
data.push(
{
geometry: {
// 可以设置类型的有 : Point(点)、 LineString(线)、Polygon(面) 这里设置的类型是点
type: 'Point',
// 设置当前点的坐标点
coordinates: [centerCity.lng - 2 + Math.random() * 4, centerCity.lat - 2 + Math.random() * 4]
},
// 可以为每一个点配置一些数据信息
properties: {
sales: Math.random() * 100
}
}
);
}
// 对sales大于 50 的data项进行过滤
data = data.filter(item => item.properties.sales > 50)
return data;
}
6. 初始化图层 、图层管理器、图层和数据源绑定
在散点图中的点需要渲染到一个图层上面，使用
mapvgl.PointLayer创建一个点图层。每一个图层需要使用图层管理器进行管理，使用
mapvgl.View创建一个图层管理器并将图层添加到图层管理器中。在创建完成图层之后需要将数据和图层进行绑定，这样每一个数据才能被渲染成为每一个点。
/**
* 设置数据源
* @param map
* @param data
*/
function setData(map, data) {
// 创建 intensity 强度对象用于 优化每一个点的显示效果
let intensity = new mapvgl.Intensity(
{
min: 0,
max: 100,
minSize: 5,
maxSize: 30,
// 加入一个区分颜色的渐变配置信息
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)'
}
}
)
// 创建图层信息
let pointLayer = new mapvgl.PointLayer(
{
size: function (data) {
return intensity.getSize(parseInt(data.properties.sales))
},
color: function (data) {
return intensity.getColor(parseInt(data.properties.sales))
}
}
);
// 根据 map 对象 生成图层管理器
let view = new mapvgl.View(
{
map
}
);
// 将图层添加到 view 图层管理器中
view.addLayer(pointLayer)
//为图层绑定数据源
pointLayer.setData(data)
}
7. 全部完整的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>replay-datav-Mapvgl-point</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
}
</style>
<!-- 百度地图基础库 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=*******"></script>
<!-- 公共的文件代码 里面包含 地图初始化 和 实用样式 -->
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<!-- 使用根据城市名称获取城市的坐标 -->
<script src="https://mapv.baidu.com/build/mapv.js"></script>
<!--使用mapcgl的时候需要引入-->
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
</head>
<body>
<div id="map_container"></div>
<!-- 对散点图的复盘 -->
<script>
let map = initMyMap()
let data = initData();
setData(map, data)
/**
* 初始化地图
* */
function initMyMap() {
// 使用工具类获取城市的中心点坐标
let centerCity = mapv.utilCityCenter.getCenterByCityName('云南')
// 使用 /examples/static/common.js 下的 initMap 方法进行地图的初始化
let map = initMap(
{
tilt: 45,
heading: 30,
zoom: 8,
center: [centerCity.lng, centerCity.lat],
style: snowStyle
}
)
return map
}
/**
* 初始化数据
*/
function initData() {
// 保存的是每一个点的数据信息 这些点需要进行构造
let data = [];
// 保存城市信息
let cities = ['北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'];
// 需要绘制的点的数量
let randomCount = 700
while (randomCount--) {
// 根据每一个城市名称获取到城市的中心点坐标
let centerCity = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])
data.push(
{
geometry: {
// 可以设置类型的有 : Point(点)、 LineString(线)、Polygon(面) 这里设置的类型是点
type: 'Point',
// 设置当前点的坐标点
coordinates: [centerCity.lng - 2 + Math.random() * 4, centerCity.lat - 2 + Math.random() * 4]
},
// 可以为每一个点配置一些数据信息
properties: {
sales: Math.random() * 100
}
}
);
}
// 对sales大于 50 的data项进行过滤
data = data.filter(item => item.properties.sales > 50)
return data;
}
/**
* 设置数据源
* @param map
* @param data
*/
function setData(map, data) {
// 创建 intensity 强度对象用于 优化每一个点的显示效果
let intensity = new mapvgl.Intensity(
{
min: 0,
max: 100,
minSize: 5,
maxSize: 30,
// 加入一个区分颜色的渐变配置信息
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)'
}
}
)
// 创建图层信息
let pointLayer = new mapvgl.PointLayer(
{
size: function (data) {
return intensity.getSize(parseInt(data.properties.sales))
},
color: function (data) {
return intensity.getColor(parseInt(data.properties.sales))
}
}
);
// 根据 map 对象 生成图层管理器
let view = new mapvgl.View(
{
map
}
);
// 将图层添加到 view 图层管理器中
view.addLayer(pointLayer)
//为图层绑定数据源
pointLayer.setData(data)
}
</script>
</body>
</html>
