百度地图入门与进阶
作者：user
发布日期：
浏览量：29
前言¶
1、注册百度账号¶
- 如果没有百度账号，可以先注册一个百度账号，百度账号在百度全平台都是通用的
- 如果曾经使用过百度网盘，也可以直接使用百度网盘账号直接登录
2、百度地图相关文档链接¶
- 百度地图开发平台官网：https://lbsyun.baidu.com/
- JavaScript API：https://lbsyun.baidu.com/index.php?title=jspopularGL
- 控制台：https://lbsyun.baidu.com/apiconsole/key#/home
- 百度地图 JSAPI：https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a0b0
- JavaScript API 示例中心：https://lbsyun.baidu.com/jsdemo.htm#webgl0_1
- 百度地图坐标拾取器：http://api.map.baidu.com/lbsapi/getpoint/index.html
- 位置数据可视化MapV GL：https://lbs.baidu.com/solutions/mapvdata
- 数据可视化MapV GL 示例中心：https://mapv.baidu.com/gallery.html
3、其它补充¶
- 对于首次成为百度开发者的人员来说，需要申请成为百度开发者
- 只需要点击上面“百度地图控制台”的链接申请成为百度开发者即可，如果有企业资质，最好成为企业开发者，对于个人学习使用，成为个人开发者也基本够用
- 也可以打开“百度地图官网教程”的链接，在如下图圈中的位置点击“申请密钥”进入控制台
在控制台创建应用： - 点击创建应用
- 输入应用名称
- 选择应用类型：前端开发一般选择浏览器端
- 填写白名单，然后提交即可（⚠️注意下图中红色文字）
一、百度地图入门¶
1、基本用法¶
- 准备一份标准的 HTML 文档
- 引入百度地图 API 文件
⚠️注意：官网的 api?v=1.0&& 这里多了一个 & 符号，需要手动删除
// ⚠️注意：api?v=1.0&& 这里多了一个 & 符号，需要手动删除
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">
- 将控制台创建的应用的“访问应用(AK)”复制替换如上“您的密钥”
- 创建地图容器并设置容器样式
<!-- 设置容器样式 -->
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#bmap {
width: 1000px;
height: 600px;
}
</style>
<!-- 创建地图容器 -->
<body>
<div id="bmap"></div>
</body>
- 创建地图实例
位于BMapGL命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象
var bmap = new BMapGL.Map("bmap")
- 设置中心点坐标
使用BMapGL命名空间下的Point类来创建一个坐标点
var point = new BMapGL.Point(纬度，经度)
// 例如北京天安门的坐标为 [116.404, 39.915]
// var point = new BMapGL.Point(116.404,39.915)
- 地图初始化，同时设置地图的展示级别 （经过测试，级别可以为：3-21）
在创建地图实例后，之后需要调用 BMapGL.Map.centerAndZoom() 方法对地图进行初始化。未进行初始化的地图将不能进行任何操作
如果center类型为Point时，zoom必须赋值，范围3-19级，若调用高清底图（针对移动端开发）时，zoom可赋值范围为3-18级。如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别
bmap.centerAndZoom(center中心坐标点, zoom地图展示级别)
完整示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图基本使用</title>
<!-- 引入百度地图 API 文件 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#bmap {
width: 1000px;
height: 600px;
margin: 200px;
}
</style>
</head>
<body>
<div id="bmap"></div>
<script>
// 初始化一个实例
var bmap = new BMapGL.Map('bmap')
// 设置地图展示的中心点坐标
var point = new BMapGL.Point(118.792199, 32.050678)
// 在指定的容器内创建地图实例，之后需要调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作
// 设初始化地图。
// 如果center类型为Point时，zoom必须赋值，范围3-19级，若调用高清底图（针对移动端开发）时，zoom可赋值范围为3-18级。
// 如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别（不推荐使用这种方式）
bmap.centerAndZoom(point, 12)
// bmap.centerAndZoom("南京")
// 允许地图可被鼠标滚轮缩放，默认禁用
bmap.enableScrollWheelZoom(true)
</script>
</body>
</html>
- 若是想取消左下角的百度图标和备案信息，只需要设置如下样式即可
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
2、异步加载地图¶
- 原理是：在页面所有元素，包括图片等都加载完毕后才执行地图初始化
- ⚠️注意：在设置 script 的 src 属性值指向资源文件时，需要在资源文件的末尾加上 &callback=init 指向之前定义的 init 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>异步加载百度地图</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#bmap {
width: 1000px;
height: 600px;
margin: 200px;
}
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="bmap"></div>
<script>
function init() {
// 初始化一个实例
var bmap = new BMapGL.Map('bmap')
// 设置地图展示的中心点坐标
var point = new BMapGL.Point(118.792199, 32.050678)
// 在指定的容器内创建地图实例，之后需要调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作
// 如果center类型为Point时，zoom必须赋值，范围3-19级，若调用高清底图（针对移动端开发）时，zoom可赋值范围为3-18级。
// 如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别（不推荐使用这种方式）
bmap.centerAndZoom(point, 12)
// bmap.centerAndZoom("南京")
// 允许地图可被鼠标滚轮缩放，默认禁用
bmap.enableScrollWheelZoom(true)
}
window.onload = function () {
var script = document.createElement('script')
script.src = "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5&callback=init"
document.body.appendChild(script)
}
</script>
</body>
</html>
onload 和 DOMContentLoaded 的区别：
- onload 等到页面所有元素都加载完毕后才执行；DOMContentLoaded 是 DOM 结构绘制完毕就执行
- 一个页面只能有一个 onload 方法；而可以有多个 DOMContentLoaded 方法并且按顺序执行
3、3D 地图 + 3D地球🌍¶
- 3D 地图的实现原理是在原地图的基础上添加倾斜角度和旋转角度，并且将 zoom 值设置到合适的大小（能显示建筑物）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D 地图</title>
<!-- 引入百度地图 API 文件 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#bmap {
width: 100%;
height: 100%;
}
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="bmap"></div>
<script>
// 初始化一个实例
var bmap = new BMapGL.Map('bmap')
// 设置地图展示的中心点坐标
var point = new BMapGL.Point(118.938927, 32.118131)
// 在指定的容器内创建地图实例，之后需要调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作
bmap.centerAndZoom(point, 20)
// 允许地图可被鼠标滚轮缩放，默认禁用
bmap.enableScrollWheelZoom(true)
// 设置地图的旋转角度，正数为顺时针旋转，负数为逆时针旋转
bmap.setHeading(-90)
// 设置地图的倾斜角度
bmap.setTilt(80)
</script>
</body>
</html>
- 3D 地球则是设置地图的属性值为 BMAP_EARTH_MAP
- setMapType 只有两个值，一个是 BMAP_NORMAL_MAP（普通街道地图）和 BMAP_EARTH_MAP（地球卫星视图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D 地球</title>
<!-- 引入百度地图 API 文件 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#bmap {
width: 100%;
height: 100%;
}
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="bmap"></div>
<script>
// 初始化一个实例
var bmap = new BMapGL.Map('bmap')
// 设置地图展示的中心点坐标
var point = new BMapGL.Point(118.938927, 32.118131)
// 在指定的容器内创建地图实例，之后需要调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作
bmap.centerAndZoom(point, 4)
// 允许地图可被鼠标滚轮缩放，默认禁用
bmap.enableScrollWheelZoom(true)
// 设置地图的旋转角度，正数为顺时针旋转，负数为逆时针旋转
bmap.setHeading(0)
// 设置地图的倾斜角度
bmap.setTilt(0)
// 设置地图类型
bmap.setMapType(BMAP_EARTH_MAP)
</script>
</body>
</html>
4、添加控件&事件¶
例如添加一个缩放控件 ZoomControl：
- anchor： 设置控件的停靠位置，有4个值
BMAP_ANCHOR_TOP_LEFT：控件将定位到地图的左上角
BMAP_ANCHOR_TOP_RIGHT：控件将定位到地图的右上角
BMAP_ANCHOR_BOTTOM_LEFT：控件将定位到地图的左下角
BMAP_ANCHOR_BOTTOM_RIGHT：控件将定位到地图的右下角
- offset： 设置控件的偏移量
width：类型 Number，水平方向的数值
height：类型 Number，竖直方向的数值
⚠️注意：
- 如果在项目中设置了隐藏百度图标和备案信息（如上面 3D 地图 案例）的样式
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
- 会导致设置控件在左下角时不显示，可以添加如下样式进行显示
.BMap_stdMpZoom {
display: block;
}
- 添加多个控件的方式都是一样的，首先 new 一个控件，然后直接使用 addControl 添加，具体参考下面示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加控件&事件</title>
<!-- 引入百度地图 API 文件 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#bmap {
width: 100%;
height: 100%;
}
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
.BMap_stdMpZoom {
display: block;
}
</style>
</head>
<body>
<div id="bmap"></div>
<script>
// 初始化一个实例
var bmap = new BMapGL.Map('bmap')
// 设置地图展示的中心点坐标
var point = new BMapGL.Point(118.860488, 32.070037)
// 在指定的容器内创建地图实例，之后需要调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作
bmap.centerAndZoom(point, 10)
// 允许地图可被鼠标滚轮缩放，默认禁用
bmap.enableScrollWheelZoom(true)
// 设置地图的旋转角度，正数为顺时针旋转，负数为逆时针旋转
bmap.setHeading(0)
// 设置地图的倾斜角度
bmap.setTilt(0)
// 设置地图类型
bmap.setMapType(BMAP_NORMAL_MAP)
// 设置最小缩放
bmap.setMinZoom(8)
// 设置最大缩放
bmap.setMaxZoom(12)
// 添加一个缩放控件
var zoomCtrl = new BMapGL.ZoomControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT,
offset: new BMapGL.Size(20, 20) // 默认就是：20, 20
})
bmap.addControl(zoomCtrl)
// 添加监听事件
bmap.addEventListener('zoomstart', function () {
console.log('开始时zoom大小=>', bmap.getZoom())
})
bmap.addEventListener('zoomend', function () {
console.log('结束时zoom大小=>', bmap.getZoom())
})
// 添加一个比例尺控件
var scaleCtrl = new BMapGL.ScaleControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: new BMapGL.Size(10, 10)
})
bmap.addControl(scaleCtrl)
</script>
</body>
</html>
5、定制个性化地图样式¶
- 打开百度地图官方文档，点击“个性化地图”
- 可以通过“个性化地图样式编辑器”进行个性化样式定制
- 然后再通过“新建”定制自己想要的地图样式
- 点击新建后，配置好地图样式，可以选择“发布样式”，然后在项目中使用“样式ID”
- 也可以点击“编辑JSON”，复制JSON样式代码到项目中使用
- 在项目中使用定制地图样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图自定义样式</title>
<!-- 引入百度地图 API 文件 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#bmap {
width: 1000px;
height: 600px;
margin: 200px;
}
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="bmap"></div>
<script>
// 初始化一个实例
var bmap = new BMapGL.Map('bmap')
// 设置地图展示的中心点坐标
var point = new BMapGL.Point(118.792199, 32.050678)
bmap.centerAndZoom(point, 12)
// 允许地图可被鼠标滚轮缩放，默认禁用
bmap.enableScrollWheelZoom(true)
// 调用设置地图样式的方法
bmap.setMapStyleV2({
// 在项目中使用样式ID的方式
// styleId: '3bd8b15f5b01390c214d26512ee66c08',
// 在项目中使用JSON样式代码的方式
styleJson: [{
"featureType": "land",
"elementType": "geometry",
"stylers": {
"color": "#fffff9ff"
}
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": {
"color": "#69b0acff"
}
}, {
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#b5caa0ff"
}
}, {
"featureType": "highway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#94ad79ff"
}
}, {
"featureType": "nationalway",
"elementType": "geometry.fill",
"stylers": {
"color": "#b5caa0ff"
}
}, {
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#d4e2c6ff"
}
}, {
"featureType": "cityhighway",
"elementType": "geometry.fill",
"stylers": {
"color": "#d4e2c6ff"
}
}, {
"featureType": "provincialway",
"elementType": "geometry.fill",
"stylers": {
"color": "#d4e2c6ff"
}
}, {
"featureType": "provincialway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#b5caa0ff"
}
}, {
"featureType": "tertiaryway",
"elementType": "geometry.fill",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "tertiaryway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#b5caa0ff"
}
}, {
"featureType": "fourlevelway",
"elementType": "geometry.fill",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "fourlevelway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#b5caa0ff"
}
}, {
"featureType": "subway",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "railway",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "highwaysign",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "highwaysign",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "nationalwaysign",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "nationalwaysign",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "provincialwaysign",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "provincialwaysign",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "tertiarywaysign",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "tertiarywaysign",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "subwaylabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "subwaylabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "nationalway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#94ad79ff"
}
}, {
"featureType": "cityhighway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#b5caa0ff"
}
}, {
"featureType": "arterial",
"elementType": "geometry.stroke",
"stylers": {
"color": "#b5caa0ff"
}
}, {
"featureType": "highway",
"stylers": {
"level": "6",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "highway",
"stylers": {
"level": "7",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "highway",
"stylers": {
"level": "8",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "highway",
"stylers": {
"level": "9",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"level": "6",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"level": "7",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"level": "8",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"level": "9",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"level": "6",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"level": "7",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"level": "8",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"level": "9",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "nationalway",
"stylers": {
"level": "6",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "nationalway",
"stylers": {
"level": "7",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "nationalway",
"stylers": {
"level": "8",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "nationalway",
"stylers": {
"level": "9",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "nationalway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"level": "6",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "nationalway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"level": "7",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "nationalway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"level": "8",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "nationalway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"level": "9",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "nationalway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"level": "6",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "nationalway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"level": "7",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "nationalway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"level": "8",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "nationalway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"level": "9",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "provincialway",
"stylers": {
"level": "8",
"curZoomRegionId": "0",
"curZoomRegion": "8-9"
}
}, {
"featureType": "provincialway",
"stylers": {
"level": "9",
"curZoomRegionId": "0",
"curZoomRegion": "8-9"
}
}, {
"featureType": "provincialway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"level": "8",
"curZoomRegionId": "0",
"curZoomRegion": "8-9"
}
}, {
"featureType": "provincialway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"level": "9",
"curZoomRegionId": "0",
"curZoomRegion": "8-9"
}
}, {
"featureType": "provincialway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"level": "8",
"curZoomRegionId": "0",
"curZoomRegion": "8-9"
}
}, {
"featureType": "provincialway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"level": "9",
"curZoomRegionId": "0",
"curZoomRegion": "8-9"
}
}, {
"featureType": "cityhighway",
"stylers": {
"level": "6",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "cityhighway",
"stylers": {
"level": "7",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "cityhighway",
"stylers": {
"level": "8",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "cityhighway",
"stylers": {
"level": "9",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "cityhighway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"level": "6",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "cityhighway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"level": "7",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "cityhighway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"level": "8",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "cityhighway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"level": "9",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "cityhighway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"level": "6",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "cityhighway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"level": "7",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "cityhighway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"level": "8",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "cityhighway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"level": "9",
"curZoomRegionId": "0",
"curZoomRegion": "6-9"
}
}, {
"featureType": "entertainment",
"elementType": "geometry",
"stylers": {
"color": "#e4f0d7ff"
}
}, {
"featureType": "manmade",
"elementType": "geometry",
"stylers": {
"color": "#effcf0ff"
}
}, {
"featureType": "education",
"elementType": "geometry",
"stylers": {
"color": "#e3f7e4ff"
}
}, {
"featureType": "building",
"elementType": "geometry.stroke",
"stylers": {
"color": "#a1cfa4ff"
}
}, {
"featureType": "poilabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "poilabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "education",
"elementType": "labels.text.fill",
"stylers": {
"color": "#7a7a7aff"
}
}, {
"featureType": "education",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "education",
"elementType": "labels.text",
"stylers": {
"fontsize": "26"
}
}, {
"featureType": "manmade",
"elementType": "labels.text.fill",
"stylers": {
"color": "#afafafff"
}
}, {
"featureType": "manmade",
"elementType": "labels.text",
"stylers": {
"fontsize": "26"
}
}, {
"featureType": "scenicspotslabel",
"elementType": "labels.text.fill",
"stylers": {
"color": "#376b6dff"
}
}, {
"featureType": "scenicspots",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "scenicspotslabel",
"elementType": "labels",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "scenicspotslabel",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff",
"weight": "4"
}
}, {
"featureType": "country",
"elementType": "labels.text.fill",
"stylers": {
"color": "#376b6dff"
}
}, {
"featureType": "country",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff",
"weight": "3"
}
}, {
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff00"
}
}, {
"featureType": "water",
"elementType": "labels.text",
"stylers": {
"fontsize": "24"
}
}]
})
</script>
</body>
</html>
二、百度地图进阶¶
1、地图绘制¶
（1）绘制图标¶
- Icon(url: String, size: Size , opts: IconOptions )： 以给定的图像地址和大小创建图标对象实例
IconOptions： 此类表示Icon构造函数的可选参数 - Marker(point: Point , opts: MarkerOptions )： 创建一个图像标注实例。point参数指定了图像标注所在的地理位置
- addOverlay(overlay: Overlay )： 将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图绘制图像</title>
<!-- 引入百度地图 API 文件 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#bmap {
width: 100%;
height: 100%;
}
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="bmap"></div>
<script>
// 初始化一个实例
var bmap = new BMapGL.Map('bmap')
// 设置地图展示的中心点坐标
var point = new BMapGL.Point(118.792199, 32.050678)
bmap.centerAndZoom(point, 12)
// 允许地图可被鼠标滚轮缩放，默认禁用
bmap.enableScrollWheelZoom(true)
// 调用设置地图样式的方法
bmap.setMapStyleV2({
styleId: '3bd8b15f5b01390c214d26512ee66c08',
// styleJson: data
})
// 绘制标注物所使用的图标
var myIcon = new BMapGL.Icon(
"./image/warning.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 })
bmap.addOverlay(marker) // 将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次
</script>
</body>
</html>
（2）绘制折线&多边形¶
- Polyline(points: Array< Point >, opts: PolylineOptions )： 创建折线覆盖物对象
第一个参数：坐标点数组，如果需要图形闭合，需要将终点坐标设置为起始坐标
第二个参数：用于设置折线的样式，包括颜色、线宽、透明度、线是虚线或实线、是否响应点击事件等
- Polygon(points: Array< Point >, opts: PolygonOptions )： 创建多边形覆盖物（与折线绘制多边形相比，不用设置终点坐标与起点坐标重合）
第二个参数：还可以设置填充颜色等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图绘制</title>
<!-- 引入百度地图 API 文件 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#bmap {
width: 100%;
height: 100%;
}
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="bmap"></div>
<script>
// 初始化一个实例
var bmap = new BMapGL.Map('bmap')
// 设置地图展示的中心点坐标
var point = new BMapGL.Point(118.792199, 32.050678)
bmap.centerAndZoom(point, 12)
// 允许地图可被鼠标滚轮缩放，默认禁用
bmap.enableScrollWheelZoom(true)
// 调用设置地图样式的方法
bmap.setMapStyleV2({
styleId: '3bd8b15f5b01390c214d26512ee66c08',
// styleJson: data
})
// 绘制线段
var polyline = new BMapGL.Polyline(
[
new BMapGL.Point(118.844391, 31.950014),
new BMapGL.Point(118.98812, 32.018618),
new BMapGL.Point(118.954775, 32.127299),
new BMapGL.Point(118.820244, 32.151758),
new BMapGL.Point(118.671916, 31.980892),
],
{
strokeColor: 'red', // 折线颜色，类型：String
strokeWeight: 5, // 折线线宽，以像素为单位，类型：Number
strokeStyle: 'dashed', // 折线的样式，solid或dashed，类型：String
}
)
bmap.addOverlay(polyline)
// 绘制多边形
var polygon = new BMapGL.Polygon(
[
new BMapGL.Point(118.862213, 32.102833),
new BMapGL.Point(118.841516, 32.090107),
new BMapGL.Point(118.819669, 32.064652),
new BMapGL.Point(118.836917, 32.046535),
new BMapGL.Point(118.875436, 32.045066),
new BMapGL.Point(118.901882, 32.057797),
new BMapGL.Point(118.890959, 32.085702),
],
{
strokeColor: 'blue', // 边线颜色，类型：String
fillColor: '#ccc', // 多边形内填充颜色
strokeWeight: 2, // 边线线宽，以像素为单位，类型：Number
strokeStyle: 'solid', // 折线的样式，solid或dashed，类型：String
}
)
bmap.addOverlay(polygon)
</script>
</body>
</html>
（3）绘制文本¶
- 详情信息请参考开发文档：https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a3b9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图绘制</title>
<!-- 引入百度地图 API 文件 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#bmap {
width: 100%;
height: 100%;
}
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="bmap"></div>
<script>
// 初始化一个实例
var bmap = new BMapGL.Map('bmap')
// 设置地图展示的中心点坐标
var point = new BMapGL.Point(118.792199, 32.050678)
bmap.centerAndZoom(point, 12)
// 允许地图可被鼠标滚轮缩放，默认禁用
bmap.enableScrollWheelZoom(true)
// 调用设置地图样式的方法
bmap.setMapStyleV2({
styleId: '3bd8b15f5b01390c214d26512ee66c08',
// styleJson: data
})
// 绘制文本
var label = new BMapGL.Label('欢迎学习百度地图入门与进阶教程', {
position: new BMapGL.Point(118.795523, 32.020578), // 文本左上角的坐标
offset: new BMapGL.Size(-80, 10)
})
// 设置文本样式
label.setStyle({
width: '220px',
height: '20px',
padding: '20px',
color: '#333',
fontSize: '14px',
backgroundColor: '#ccc',
border: 'none'
})
// 添加文本事件
label.addEventListener('click', function () {
alert('hello, 欢迎学习百度地图入门与进阶教程')
})
bmap.addOverlay(label)
</script>
</body>
</html>
（4）绘制弹窗¶
- 例如点击图标触发事件显示弹窗
- InfoWindow(content: String | HTMLElement, opts: InfoWindowOptions )： 创建一个信息窗实例，其中content支持HTML内容
- openInfoWindow(信息窗实例, 信息显示坐标位置)： 这个方法开发文档上没有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图绘制</title>
<!-- 引入百度地图 API 文件 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#bmap {
width: 100%;
height: 100%;
}
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="bmap"></div>
<script>
// 初始化一个实例
var bmap = new BMapGL.Map('bmap')
// 设置地图展示的中心点坐标
var point = new BMapGL.Point(118.792199, 32.050678)
bmap.centerAndZoom(point, 12)
// 允许地图可被鼠标滚轮缩放，默认禁用
bmap.enableScrollWheelZoom(true)
// 调用设置地图样式的方法
bmap.setMapStyleV2({
styleId: '3bd8b15f5b01390c214d26512ee66c08',
// styleJson: data
})
// 绘制标注物所使用的图标
var myIcon = new BMapGL.Icon(
"./image/warning.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 () {
// alert('hello')
// 地图上包含信息的窗口
var content = `<div style="color: red; font-size: 14px;">欢迎学习百度地图入门与进阶教程</div>`
content += `<div style="color: blue; font-size: 18px;text-align: center;">百度地图入门</div>`
var infoWindow = new BMapGL.InfoWindow(content, {
// var infoWindow = new BMapGL.InfoWindow('欢迎学习百度地图入门与进阶教程', {
width: 300,
height: 200,
title: '地图上包含信息的窗口',
offset: new BMapGL.Size(0, -50)
})
bmap.openInfoWindow(infoWindow, new BMapGL.Point(118.795523, 32.020578))
})
bmap.addOverlay(marker) // 将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次
</script>
</body>
</html>
2、地图动画¶
- new BMapGL.ViewAnimation()： 创建动画
- bmap.startViewAnimation(viewAnimation)： 调用 startViewAnimation 方法执行动画
- bmap.cancelViewAnimation(viewAnimation)： 调用 cancelViewAnimation 方法取消动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图动画</title>
<!-- 引入百度地图 API 文件 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#bmap {
width: 100%;
height: 100%;
}
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="bmap"></div>
<script>
// 初始化一个实例
var bmap = new BMapGL.Map('bmap')
// 设置地图展示的中心点坐标
var point = new BMapGL.Point(118.937922, 32.118178)
bmap.centerAndZoom(point, 21)
// 允许地图可被鼠标滚轮缩放，默认禁用
bmap.enableScrollWheelZoom(true)
bmap.setTilt(80)
bmap.setHeading(-90)
var viewAnimation = new BMapGL.ViewAnimation(
[
{
center: new BMapGL.Point(118.937922, 32.118178), // 地图中心点，默认值为地图当前状态中心点
zoom: 21, // 地图缩放级别，默认值为地图当前状态缩放级别，类型：Number
tilt: 80, // 地图倾斜角度，默认值为地图当前状态倾斜角度，类型：Number
heading: -90, // 地图旋转角度，默认值为地图当前旋转角度，类型：Number
percentage: 0, // 表示当前关键帧处于动画过程的百分比，取值范围0~1
},
{
center: new BMapGL.Point(118.937949, 32.117605), // 地图中心点，默认值为地图当前状态中心点
zoom: 21, // 地图缩放级别，默认值为地图当前状态缩放级别，类型：Number
tilt: 80, // 地图倾斜角度，默认值为地图当前状态倾斜角度，类型：Number
heading: 0, // 地图旋转角度，默认值为地图当前旋转角度，类型：Number
percentage: 0.2, // 表示当前关键帧处于动画过程的百分比，取值范围0~1
},
{
center: new BMapGL.Point(118.938699, 32.117605), // 地图中心点，默认值为地图当前状态中心点
zoom: 21, // 地图缩放级别，默认值为地图当前状态缩放级别，类型：Number
tilt: 80, // 地图倾斜角度，默认值为地图当前状态倾斜角度，类型：Number
heading: 90, // 地图旋转角度，默认值为地图当前旋转角度，类型：Number
percentage: 0.4, // 表示当前关键帧处于动画过程的百分比，取值范围0~1
},
{
center: new BMapGL.Point(118.938713, 32.118679), // 地图中心点，默认值为地图当前状态中心点
zoom: 21, // 地图缩放级别，默认值为地图当前状态缩放级别，类型：Number
tilt: 80, // 地图倾斜角度，默认值为地图当前状态倾斜角度，类型：Number
heading: 180, // 地图旋转角度，默认值为地图当前旋转角度，类型：Number
percentage: 0.6, // 表示当前关键帧处于动画过程的百分比，取值范围0~1
},
{
center: new BMapGL.Point(118.937949, 32.11869), // 地图中心点，默认值为地图当前状态中心点
zoom: 21, // 地图缩放级别，默认值为地图当前状态缩放级别，类型：Number
tilt: 80, // 地图倾斜角度，默认值为地图当前状态倾斜角度，类型：Number
heading: 270, // 地图旋转角度，默认值为地图当前旋转角度，类型：Number
percentage: 0.8, // 表示当前关键帧处于动画过程的百分比，取值范围0~1
},
{
center: new BMapGL.Point(118.937922, 32.118178), // 地图中心点，默认值为地图当前状态中心点
zoom: 21, // 地图缩放级别，默认值为地图当前状态缩放级别，类型：Number
tilt: 80, // 地图倾斜角度，默认值为地图当前状态倾斜角度，类型：Number
heading: 270, // 地图旋转角度，默认值为地图当前旋转角度，类型：Number
percentage: 1, // 表示当前关键帧处于动画过程的百分比，取值范围0~1
},
],
{
delay: 100, // 动画开始延迟时间，单位ms，默认0，类型：Number
duration: 10000, // 动画持续时间，单位ms，默认1000，类型：Number
interation: 'INFINITE', // 循环次数，参数类型为数字时循环固定次数，参数为'INFINITE'无限循环，默认为1
}
)
// 开始动画播放
bmap.startViewAnimation(viewAnimation)
// 取消动画播放
bmap.cancelViewAnimation(viewAnimation)
</script>
</body>
</html>
3、地图轨迹动画¶
- 这个动画类官网文档暂时没有更新
- 首先引入 TrackAnimation 的 JS 文件
<script type="text/javascript" src="https://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
- 这个类不属于 BMapGL 库，而是属于 BMapGLLib 库。API 与 ViewAnimation 的类似
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图轨迹动画</title>
<!-- 引入百度地图 API 文件 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5"></script>
<script type="text/javascript"
src="https://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#bmap {
width: 100%;
height: 100%;
}
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="bmap"></div>
<script>
// 初始化一个实例
var bmap = new BMapGL.Map('bmap')
// 设置地图展示的中心点坐标
var point = new BMapGL.Point(118.937648, 32.120575)
bmap.centerAndZoom(point, 16)
// 允许地图可被鼠标滚轮缩放，默认禁用
bmap.enableScrollWheelZoom(true)
bmap.setTilt(30)
bmap.setHeading(0)
// 创建轨迹动画对象
var points = [
new BMapGL.Point(118.937671, 32.111523),
new BMapGL.Point(118.942436, 32.113105),
new BMapGL.Point(118.941071, 32.115785),
new BMapGL.Point(118.941763, 32.120258),
new BMapGL.Point(118.942239, 32.122563),
new BMapGL.Point(118.941812, 32.124206),
new BMapGL.Point(118.93936, 32.128197),
new BMapGL.Point(118.930475, 32.124042),
new BMapGL.Point(118.934163, 32.11793),
new BMapGL.Point(118.93445, 32.116726),
new BMapGL.Point(118.934217, 32.110609),
new BMapGL.Point(118.937671, 32.111523)
]
var lines = new BMapGL.Polyline(points)
var trackAnimation = new BMapGLLib.TrackAnimation(bmap, lines, {
delay: 3000, // 延时多少秒后开始开启轨迹动画
duration: 20000, // 执行时间，默认是10000毫秒
tilt: 30, // 轨迹动画播放时的倾斜角度
overallView: true, // 设置为 true 时动画播放完会自动调整视角为总览的视角
})
// 开始
trackAnimation.start()
// 取消
// trackAnimation.cancel()
</script>
</body>
</html>
三、百度地图可视化¶
百度地图可视化步骤：
- 1、引入百度地图 JSAPI
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的密钥"></script>
- 2、引入 MapV 和 MapVGL
MapV是之前的版本，使用 Canvas 进行渲染，现在已经不维护了，现在改为 MapVGL
但依旧可以使用 MapV 的一些方法
<script src="https://mapv.baidu.com/build/mapv.js"></script>
<script src="https://mapv.baidu.com/build/mapv.min.js"></script>
// 或者
npm install mapvgl --save
- 也可以引入方便开发的文件，也可以不引入
<!-- 官方封装的通用方法，可以方便开发 -->
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
- 3、初始化百度地图（创建地图实例）
使用 common.js 的方式时获取的ID默认为 map_container
/**
* 使用普通方式初始化
**/
// var bmap = new BMapGL.Map('map_container')
// var point = new BMapGL.Point(118.792199, 32.050678)
// bmap.centerAndZoom(point, 9)
// // 允许地图可被鼠标滚轮缩放，默认禁用
// bmap.enableScrollWheelZoom(true)
// // 调用设置地图样式的方法
// bmap.setMapStyleV2({
// styleId: '3bd8b15f5b01390c214d26512ee66c08',
// // styleJson: [{}]
// })
// bmap.setTilt(0)
/**
* 使用 common.js 的方式初始化
**/
// 使用 MapV 获取中心点坐标
var cityCenter = mapv.utilCityCenter.getCenterByCityName('南京')
// 使用 common.js 的方式初始化地图
// 使用 common.js 的方式时获取的ID默认为 map_container
var bmap = initMap({
tilt: 0,
// center: [118.792199, 32.050678],
center: [cityCenter.lng, cityCenter.lat],
zoom: 9,
style: snowStyle // 指定样式
})
- 4、准备数据源
let data = []
data.push({
properties: {},
geometry: {
type: 'Point',
coordiantes: [], // 坐标
}
})
- 5、绘制数据
// 1、生成 mapvgl 视图 View
var view = new mapvgl.View({ map: bmap })
// 2、初始化 Intensity 对象（该对象可以按照权重值的强度获取对应渐变色中的颜色或半径大小的值）
var intensity = new mapvgl.Intensity({
min: 1, // 权重最小阈值
max: 100, // 权重最大阈值
minSize: 5, // 生成最小半径
maxSize: 30, // 生成最大半径
gradient: { // 渐变色设置
0.25: 'rgba(0, 0, 255, 1)',
0.55: 'rgba(0, 255, 0, 1)',
0.85: 'rgba(255, 255, 0, 1)',
1: 'rgba(255, 0, 0, 1)'
}
})
// 3、初始化 mapvgl 的 PointLayer 对象
var pointLayer = new mapvgl.PointLayer({
size: 2,
color: 'rgba(50, 50, 200, 1)',
shape: 'circle', // 默认为圆形，可传square改为正方形
blend: 'lighter',
data: [{
geometry: {
type: 'Point',
coordinates: [116.403748, 39.915055]
}
}]
})
// 4、将 PointLayer 对象加入到 View 视图
view.addLayer(pointLayer)
// 5、将 data 与 Point 进行绑定
pointLayer.setData(data)
1、百度地图绘制散点图¶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图可视化-散点图</title>
<!-- 引入百度地图 API 文件 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5"></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>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
}
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="map_container"></div>
<script>
var bmap = initBMap()
var data = initData()
setData(data, bmap)
// 初始化百度地图
function initBMap() {
var cityCenter = mapv.utilCityCenter.getCenterByCityName('南京')
var bmap = initMap({
tilt: 0,
// center: [118.792199, 32.050678],
center: [cityCenter.lng, cityCenter.lat],
zoom: 9,
style: snowStyle // 指定样式
})
return bmap
}
// 准备数据源
function initData() {
var data = []
var random = 500
var cities = [
'南京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
'沈阳', '济南', '北京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
]
while (random--) {
var cityCenter = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]) // 获取对应城市中心点坐标
data.push({
properties: {
"sales": Math.random() * 100
},
geometry: {
type: 'Point',
coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4], // 坐标
}
})
}
// data = data.filter(item => item.properties.sales > 10)
return data
}
// 绘制数据
function setData(data, bmap) {
// 1、生成 mapvgl 视图 View
var view = new mapvgl.View({ map: bmap })
// 2、初始化 Intensity 对象（该对象用于）
var intensity = new mapvgl.Intensity({
min: 1,
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)'
}
})
// 3、初始化 mapvgl 的 PointLayer 对象
var pointLayer = new mapvgl.PointLayer({
size: function (data) {
return intensity.getSize(data.properties.sales)
},
color: function (data) {
return intensity.getColor(data.properties.sales)
}
})
// 4、将 PointLayer 对象加入到 View 视图
view.addLayer(pointLayer)
// 5、将 data 与 Point 进行绑定
pointLayer.setData(data)
}
</script>
</body>
</html>
2、百度地图飞线动画¶
- 轨迹飞线动画，继承自 FlyLineLayer，基于Threejs实现，使用前需要额外引入mapvgl.threelayers 包
<script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>
or
<script src="https://code.bdstatic.com/npm/[email protected]/dist/mapvgl.threelayers.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图可视化-飞线动画</title>
<!-- 引入百度地图 API 文件 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5"></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://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
}
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="map_container"></div>
<script type="text/javascript">
/**
* 初始化地图
**/
var cityCenter = mapv.utilCityCenter.getCenterByCityName('成都')
var bmap = initMap({
tilt: 60,
heading: 0,
// center: [103.438656, 25.753594],
center: [cityCenter.lng, cityCenter.lat],
zoom: 6,
style: purpleStyle
});
setData(initData());
/**
* 准备数据源
**/
function initData() {
var data = [];
var cities = [
'北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
];
var randomCount = 100; // 模拟的飞线的数量
// 1、实例化贝塞尔曲线对象
// 3D曲线生成器，通过传入起点和终点，生成带高度的贝塞尔曲线坐标集，可以用来生成飞线数据
var bezierCurve = new mapvgl.BezierCurve();
// 构造数据
while (randomCount--) {
// parseInt(a,b) 等于 a+b
var startPoint = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]);
var endPoint = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)])
// 2、设置起点和终点坐标
bezierCurve.setOptions({ // 修改起点、终点坐标等属性
start: [startPoint.lng, startPoint.lat], // 起点坐标
end: [endPoint.lng, endPoint.lat] // 终点坐标
});
// 3、生成贝塞尔曲线坐标集
var curveModelData = bezierCurve.getPoints(); // 获取生成的曲线坐标集，传入的字段为曲线的分段数
data.push({
geometry: {
type: 'LineString',
coordinates: curveModelData
},
properties: {
count: Math.random() * 10
}
});
}
return data;
}
/**
* 绘制数据
**/
function setData(data) {
// 1、生成 mapvgl 视图 View
var view = new mapvgl.View({
map: bmap
});
// 2、初始化 mapvgl 的 FlyLineLayer 对象
var flylineLayer = new mapvgl.FlyLineLayer({
style: 'chaos', // 飞线动画方式，类型：String，normal：默认值，飞线动画速度均匀，chaos：飞线动画速度不均匀
color: 'rgba(33, 242, 214, 0.3)', // 连接两点之间线的底色
textureColor: function (data) { // 动画线的颜色，可以设置和CSS一样的颜色值
return data.properties.count > 5 ? '#eee' : 'red';
},
textureWidth: 20, // 动画线的宽度，类型：Number
textureLength: 10, // 飞线动画的长度，占整条线的百分比，取值0-100，类型：Number
step: 0.2, // 飞线动画的步长，步长越大动画速度越快，类型：Number
});
// 3、将 FlyLineLayer 对象加入到 View 视图
view.addLayer(flylineLayer);
// 4、将 data 与 FlyLineLayer 进行绑定
flylineLayer.setData(data);
}
</script>
</body>
</html>
多图层飞线动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图可视化-酷炫飞线动画</title>
<!-- 引入百度地图 API 文件 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5"></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://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
}
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="map_container"></div>
<script type="text/javascript">
/**
* 初始化地图
**/
var cityCenter = mapv.utilCityCenter.getCenterByCityName('成都')
var bmap = initMap({
tilt: 60,
heading: 0,
// center: [103.438656, 25.753594],
center: [cityCenter.lng, cityCenter.lat],
zoom: 6,
style: purpleStyle
});
setData(initData());
/**
* 准备数据源
**/
function initData() {
var data = [];
var cities = [
'北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
];
var randomCount = 300; // 模拟的飞线的数量
// 1、实例化贝塞尔曲线对象
// 3D曲线生成器，通过传入起点和终点，生成带高度的贝塞尔曲线坐标集，可以用来生成飞线数据
var bezierCurve = new mapvgl.BezierCurve();
// 2、确定终点位置
var targetCity = mapv.utilCityCenter.getCenterByCityName('北京')
// 构造数据
for (let i = 0; i < randomCount; i++) {
// parseInt(a,b) 等于 a+b
var startCity = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(cities.length * Math.random())]);
// 3、设置起点和终点坐标
bezierCurve.setOptions({ // 修改起点、终点坐标等属性
start: [startCity.lng - 5 + Math.random() * 20, startCity.lat - 5 + Math.random() * 20], // 起点坐标
end: [targetCity.lng, targetCity.lat] // 终点坐标
});
// 4、生成贝塞尔曲线坐标集
var curveModelData = bezierCurve.getPoints(); // 获取生成的曲线坐标集，传入的字段为曲线的分段数
data.push({
geometry: {
type: 'LineString',
coordinates: curveModelData
},
properties: {
count: Math.random() * 10
}
});
}
return data;
}
/**
* 绘制数据
**/
function setData(data) {
// 1、生成 mapvgl 视图 View
var view = new mapvgl.View({
map: bmap
});
// 创建线的图层
// 2、初始化 mapvgl 的 LineLayer 对象
var lineLayer = new mapvgl.LineLayer({
color: 'rgba(55, 50, 250, 0.3)', // 连接两点之间线的颜色
blend: 'lighter', // 线叠加模式，可选lighter，类型：String
width: 1, // 线的宽度
});
// 3、将 LineLayer 对象加入到 View 视图
view.addLayer(lineLayer);
// 4、将 data 与 LineLayer 进行绑定
lineLayer.setData(data);
// 创建点的图层
// 5、初始化 mapvgl 的 LinePointLayer
var linePointLayer = new mapvgl.LinePointLayer({
size: 10, // 点的大小
speed: 10, // 点运动的速度
color: 'rgba(255,255,0,0.6)', // 点的颜色
animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_SMOOTH, // 点的动画类型
shapeType: mapvgl.LinePointLayer.SHAPE_TYPE_CIRCLE, // 点的形状
blend: 'lighter', // 点交汇时的处理方式
})
// 6、将 LinePointLayer 对象加入到 View 图层
view.addLayer(linePointLayer)
// 7、将 data 与 LinePointLayer 进行绑定
linePointLayer.setData(data)
// 创建拖尾的图层
// 8、初始化 mapvgl 的 LineFlowLayer
var lineFlowLayer = new mapvgl.LineFlowLayer({
color: 'green', // 点的颜色
blend: 'lighter', // 点交汇时的处理方式
width: 4, // 线的宽度，类型：number
interval: 0.1, // 该参数指定每条线段的长度，值为粒子长度占数据中最长的线整体长度的比例，类型：Float
duration: 2, // 动画的循环时间，单位为秒，类型：Number
trailLength: 0.5, // 拖尾长度占间隔的比例，类型：Float
})
// 9、将 LineFlowLayer 对象加入到 View 图层
view.addLayer(lineFlowLayer)
// 10、将 data 与 LineFlowLayer 进行绑定
lineFlowLayer.setData(data)
}
</script>
</body>
</html>
3、酷炫飞线动画¶
- 主要介绍边绑定算法
边绑定算法能使线汇聚
/**
* 边绑定算法
**/
var nodeData = [{
x: targetCity.lng,
y: targetCity.lat
}]
var edgeData = [{
source: 0,
target: 0
}]
// ......
// ......
var bundling = mapv.utilForceEdgeBundling().nodes(nodeData).edges(edgeData)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图可视化-酷炫飞线动画</title>
<!-- 引入百度地图 API 文件 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5"></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://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
}
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="map_container"></div>
<script type="text/javascript">
/**
* 初始化地图
**/
var cityCenter = mapv.utilCityCenter.getCenterByCityName('成都')
var bmap = initMap({
tilt: 60,
heading: 0,
// center: [103.438656, 25.753594],
center: [cityCenter.lng, cityCenter.lat],
zoom: 6,
style: purpleStyle
});
setData(initData());
/**
* 准备数据源
**/
function initData() {
var data = [];
var cities = [
'北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
];
var randomCount = 500; // 模拟的飞线的数量
// 2、确定终点位置
var targetCity = mapv.utilCityCenter.getCenterByCityName('西安')
/**
* 边绑定算法
**/
var nodeData = [{
x: targetCity.lng,
y: targetCity.lat
}]
var edgeData = [{
source: 0,
target: 0
}]
// 构造数据
for (let i = 0; i < randomCount; i++) {
// parseInt(a,b) 等于 a+b
var startCity = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(cities.length * Math.random())]);
nodeData.push({
x: startCity.lng + 5 - Math.random() * 10,
y: startCity.lat + 5 - Math.random() * 10
})
edgeData.push({
source: i + 1,
target: 0
})
}
var bundling = mapv.utilForceEdgeBundling().nodes(nodeData).edges(edgeData)
var results = bundling()
for (let i = 0; i < results.length; i++) {
var line = results[i]
var coordinates = []
for (let j = 0; j < line.length; j++) {
coordinates.push([line[j].x, line[j].y])
}
data.push({
geometry: {
type: 'LineString',
coordinates: coordinates
},
properties: {
count: Math.random() * 10
}
});
}
return data;
}
/**
* 绘制数据
**/
function setData(data) {
// 1、生成 mapvgl 视图 View
var view = new mapvgl.View({
map: bmap
});
// 创建线的图层
// 2、初始化 mapvgl 的 LineLayer 对象
var lineLayer = new mapvgl.LineLayer({
color: 'rgba(55, 50, 250, 0.3)', // 连接两点之间线的颜色
blend: 'lighter', // 线叠加模式，可选lighter，类型：String
width: 1, // 线的宽度
});
// 3、将 LineLayer 对象加入到 View 视图
view.addLayer(lineLayer);
// 4、将 data 与 LineLayer 进行绑定
lineLayer.setData(data);
// 创建点的图层
// 5、初始化 mapvgl 的 LinePointLayer
var linePointLayer = new mapvgl.LinePointLayer({
size: 10, // 点的大小
speed: 20, // 点运动的速度
color: 'rgba(255,255,0,0.6)', // 点的颜色
animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_SMOOTH, // 点的动画类型
shapeType: mapvgl.LinePointLayer.SHAPE_TYPE_CIRCLE, // 点的形状
blend: 'lighter', // 点交汇时的处理方式
})
// 6、将 LinePointLayer 对象加入到 View 图层
view.addLayer(linePointLayer)
// 7、将 data 与 LinePointLayer 进行绑定
linePointLayer.setData(data)
// 创建拖尾的图层
// 8、初始化 mapvgl 的 LineFlowLayer
var lineFlowLayer = new mapvgl.LineFlowLayer({
color: 'green', // 点的颜色
blend: 'lighter', // 点交汇时的处理方式
width: 4, // 线的宽度，类型：number
interval: 0.1, // 该参数指定每条线段的长度，值为粒子长度占数据中最长的线整体长度的比例，类型：Float
duration: 2, // 动画的循环时间，单位为秒，类型：Number
trailLength: 0.5, // 拖尾长度占间隔的比例，类型：Float
})
// 9、将 LineFlowLayer 对象加入到 View 图层
view.addLayer(lineFlowLayer)
// 10、将 data 与 LineFlowLayer 进行绑定
lineFlowLayer.setData(data)
}
</script>
</body>
</html>
4、百度地图 3D 建筑¶
使用普通经纬度坐标的方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图可视化-3D建筑(普通GPS坐标)</title>
<!-- 引入百度地图 API 文件 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5"></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://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
}
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="map_container"></div>
<script type="text/javascript">
/**
* 初始化地图
**/
var cityCenter = mapv.utilCityCenter.getCenterByCityName('南京')
var bmap = initMap({
tilt: 80,
heading: 0,
center: [118.775697, 32.086727],
// center: [cityCenter.lng, cityCenter.lat],
zoom: 17,
// style: snowStyle
});
setData(initData());
/**
* 准备数据源
**/
function initData() {
var data = [{
geometry: {
type: 'Polygon',
coordinates: [
[
[118.775697, 32.086727],
[118.776061, 32.086762],
[118.776124, 32.086417],
[118.775751, 32.086371]
]
]
},
properties: {
height: 100, // 多边形高度
}
}, {
geometry: {
type: 'Polygon',
coordinates: [
[
[118.774646, 32.086261],
[118.775118, 32.086299],
[118.775127, 32.086169],
[118.774826, 32.086134],
[118.774831, 32.08592],
[118.77466, 32.085909]
]
]
},
properties: {
height: 200, // 多边形高度
}
}]
return data;
}
/**
* 绘制数据
**/
function setData(data) {
// 1、生成 mapvgl 视图 View
var view = new mapvgl.View({
map: bmap
});
// 创建图层实例
var shapeLayer = new mapvgl.ShapeLayer({
color: 'blue', // 颜色
opacity: 0.5, // 透明度，楼块透明度，0.0表示完全透明，1.0表示完全不透明，浮点数表示，类型：float
style: 'normal', // 特效样式，normal，默认，正常，window，窗户效果，windowAnimation，窗户动画效果，gradual，渐变效果
})
// 图层管理器添加图层
view.addLayer(shapeLayer)
// 将图层与数据进行绑定
shapeLayer.setData(data)
}
</script>
</body>
</html>
使用墨卡托投影的方式：
- 使用坐标转换的方式将经纬度坐标转为墨卡托坐标，百度地图Web服务API坐标转换链接https://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition
对照下列图标，根据自己需要转换的坐标类型，将对应的数值填写到链接的 from 和 to 对应的位置上
// 首先将这段链接复制粘贴到浏览器
// 然后更改 coords、from、to以及你的密钥
https://api.map.baidu.com/geoconv/v1/?coords=114.21892734521,29.575429778924&from=1&to=6&ak=你的密钥
- 关于使用墨卡托坐标和GPS坐标显示建筑位置不一致，请参考该文档：https://www.jianshu.com/p/5510717a69b6
- 使用墨卡托坐标的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图可视化-3D建筑(墨卡托坐标)</title>
<!-- 引入百度地图 API 文件 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5"></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://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
}
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="map_container"></div>
<script type="text/javascript">
/**
* 初始化地图
**/
// var cityCenter = mapv.utilCityCenter.getCenterByCityName('重庆')
var bmap = initMap({
tilt: 80,
heading: -45.3,
center: [106.540547, 29.564858],
// center: [cityCenter.lng, cityCenter.lat],
zoom: 17,
});
initData().then(data => {
setData(bmap, data);
})
/**
* 准备数据源
**/
function initData() {
var data = []
return fetch('./chongqing.json').then(res => res.json()).then(res => {
var polygons = []
for (let i = 0; i < res.length; i++) {
var line = res[i]
var polygon = []
var pt = [line[1] * 512, line[2] * 512]
for (let 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
}
})
}
return polygons;
})
}
/**
* 绘制数据
**/
function setData(bmap, data) {
// 1、生成 mapvgl 视图 View
var view = new mapvgl.View({
map: bmap
});
// 创建图层实例
var shapeLayer = new mapvgl.ShapeLayer({
color: 'blue', // 颜色
opacity: 0.5, // 透明度，楼块透明度，0.0表示完全透明，1.0表示完全不透明，浮点数表示，类型：float
style: 'windowAnimation', // 特效样式，normal，默认，正常，window，窗户效果，windowAnimation，窗户动画效果，gradual，渐变效果
// blend: 'lighter', //
riseTime: 2000, // 楼块初始化升起动画的时间，单位毫秒，类型：Number
enablePicked: true, // 是否可以拾取
selectedIndex: -1, // 选中数据项索引，设置未选中时为-1
selectedColor: 'red', // 选中项颜色
autoSelect: true, // 根据鼠标位置来自动设置选中项
onClick: (e) => { // 点击事件
console.log(e);
},
})
// 图层管理器添加图层
view.addLayer(shapeLayer)
// 将图层与数据进行绑定
shapeLayer.setData(data)
}
</script>
</body>
</html>
四、Vue + ECharts + 百度地图¶
- 在结合 Echarts 使用百度地图时，百度地图 JS 库 V1.0 版本的 webgl 不能和 ECharts 结合使用，至少使用 V2.0 版本
// 这是百度地图 js 库 V2.0 版本
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5"></script>
使用步骤：
- 在 public/index.html 中引入百度地图 JS 库
- 安装 ECharts，因为示例项目使用到 vue-echarts，因此也安装，可以不安装
// 安装 ECharts
npm install -S echarts
// 安装 Vue-ECharts
npm install -S vue-echarts
- 在 main.js 文件引入 ECharts，并全局挂载，注册 Vue-ECharts
- 引入 echarts 的 bmap 扩展，否则将不能识别 bmap 属性
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// Echarts 引入
import * as Echarts from 'echarts'
// 引入 bmap
import "echarts/extension/bmap/bmap"
// VueECharts 引入
import VueECharts from 'vue-echarts'
const app = createApp(App)
// 全局挂载 ECharts
app.config.globalProperties.$Echarts = Echarts
// 全局注册 VueECharts 组件
app.component('vue-echarts', VueECharts)
app.use(router).mount('#app')
- 因为使用 Vue-ECharts，需要修改默认样式
.echarts {
width: 100%;
height: 100%;
}
- 设置地图展示区域的宽高
- 完整示例
<template>
<div class="bmapgl">
<vue-echarts :option="options" />
</div>
</template>
<script>
export default {
name: "BMapGL",
data() {
return {
options: {},
data: [
{ name: "海门", value: 9 },
{ name: "鄂尔多斯", value: 12 },
{ name: "招远", value: 12 },
{ name: "舟山", value: 12 },
{ name: "齐齐哈尔", value: 14 },
{ name: "盐城", value: 15 },
{ name: "赤峰", value: 16 },
{ name: "青岛", value: 18 },
{ name: "乳山", value: 18 },
{ name: "金昌", value: 19 },
{ name: "泉州", value: 21 },
{ name: "莱西", value: 21 },
{ name: "日照", value: 21 },
{ name: "胶南", value: 22 },
{ name: "南通", value: 23 },
{ name: "拉萨", value: 24 },
{ name: "云浮", value: 24 },
{ name: "梅州", value: 25 },
{ name: "文登", value: 25 },
{ name: "上海", value: 25 },
{ name: "攀枝花", value: 25 },
{ name: "威海", value: 25 },
{ name: "承德", value: 25 },
{ name: "厦门", value: 26 },
{ name: "汕尾", value: 26 },
{ name: "潮州", value: 26 },
{ name: "丹东", value: 27 },
{ name: "太仓", value: 27 },
{ name: "曲靖", value: 27 },
{ name: "烟台", value: 28 },
{ name: "福州", value: 29 },
{ name: "瓦房店", value: 30 },
{ name: "即墨", value: 30 },
{ name: "抚顺", value: 31 },
{ name: "玉溪", value: 31 },
{ name: "张家口", value: 31 },
{ name: "阳泉", value: 31 },
{ name: "莱州", value: 32 },
{ name: "湖州", value: 32 },
{ name: "汕头", value: 32 },
{ name: "昆山", value: 33 },
{ name: "宁波", value: 33 },
{ name: "湛江", value: 33 },
{ name: "揭阳", value: 34 },
{ name: "荣成", value: 34 },
{ name: "连云港", value: 35 },
{ name: "葫芦岛", value: 35 },
{ name: "常熟", value: 36 },
{ name: "东莞", value: 36 },
{ name: "河源", value: 36 },
{ name: "淮安", value: 36 },
{ name: "泰州", value: 36 },
{ name: "南宁", value: 37 },
{ name: "营口", value: 37 },
{ name: "惠州", value: 37 },
{ name: "江阴", value: 37 },
{ name: "蓬莱", value: 37 },
{ name: "韶关", value: 38 },
{ name: "嘉峪关", value: 38 },
{ name: "广州", value: 38 },
{ name: "延安", value: 38 },
{ name: "太原", value: 39 },
{ name: "清远", value: 39 },
{ name: "中山", value: 39 },
{ name: "昆明", value: 39 },
{ name: "寿光", value: 40 },
{ name: "盘锦", value: 40 },
{ name: "长治", value: 41 },
{ name: "深圳", value: 41 },
{ name: "珠海", value: 42 },
{ name: "宿迁", value: 43 },
{ name: "咸阳", value: 43 },
{ name: "铜川", value: 44 },
{ name: "平度", value: 44 },
{ name: "佛山", value: 44 },
{ name: "海口", value: 44 },
{ name: "江门", value: 45 },
{ name: "章丘", value: 45 },
{ name: "肇庆", value: 46 },
{ name: "大连", value: 47 },
{ name: "临汾", value: 47 },
{ name: "吴江", value: 47 },
{ name: "石嘴山", value: 49 },
{ name: "沈阳", value: 50 },
{ name: "苏州", value: 50 },
{ name: "茂名", value: 50 },
{ name: "嘉兴", value: 51 },
{ name: "长春", value: 51 },
{ name: "胶州", value: 52 },
{ name: "银川", value: 52 },
{ name: "张家港", value: 52 },
{ name: "三门峡", value: 53 },
{ name: "锦州", value: 54 },
{ name: "南昌", value: 54 },
{ name: "柳州", value: 54 },
{ name: "三亚", value: 54 },
{ name: "自贡", value: 56 },
{ name: "吉林", value: 56 },
{ name: "阳江", value: 57 },
{ name: "泸州", value: 57 },
{ name: "西宁", value: 57 },
{ name: "宜宾", value: 58 },
{ name: "呼和浩特", value: 58 },
{ name: "成都", value: 58 },
{ name: "大同", value: 58 },
{ name: "镇江", value: 59 },
{ name: "桂林", value: 59 },
{ name: "张家界", value: 59 },
{ name: "宜兴", value: 59 },
{ name: "北海", value: 60 },
{ name: "西安", value: 61 },
{ name: "金坛", value: 62 },
{ name: "东营", value: 62 },
{ name: "牡丹江", value: 63 },
{ name: "遵义", value: 63 },
{ name: "绍兴", value: 63 },
{ name: "扬州", value: 64 },
{ name: "常州", value: 64 },
{ name: "潍坊", value: 65 },
{ name: "重庆", value: 66 },
{ name: "台州", value: 67 },
{ name: "南京", value: 67 },
{ name: "滨州", value: 70 },
{ name: "贵阳", value: 71 },
{ name: "无锡", value: 71 },
{ name: "本溪", value: 71 },
{ name: "克拉玛依", value: 72 },
{ name: "渭南", value: 72 },
{ name: "马鞍山", value: 72 },
{ name: "宝鸡", value: 72 },
{ name: "焦作", value: 75 },
{ name: "句容", value: 75 },
{ name: "北京", value: 79 },
{ name: "徐州", value: 79 },
{ name: "衡水", value: 80 },
{ name: "包头", value: 80 },
{ name: "绵阳", value: 80 },
{ name: "乌鲁木齐", value: 84 },
{ name: "枣庄", value: 84 },
{ name: "杭州", value: 84 },
{ name: "淄博", value: 85 },
{ name: "鞍山", value: 86 },
{ name: "溧阳", value: 86 },
{ name: "库尔勒", value: 86 },
{ name: "安阳", value: 90 },
{ name: "开封", value: 90 },
{ name: "济南", value: 92 },
{ name: "德阳", value: 93 },
{ name: "温州", value: 95 },
{ name: "九江", value: 96 },
{ name: "邯郸", value: 98 },
{ name: "临安", value: 99 },
{ name: "兰州", value: 99 },
{ name: "沧州", value: 100 },
{ name: "临沂", value: 103 },
{ name: "南充", value: 104 },
{ name: "天津", value: 105 },
{ name: "富阳", value: 106 },
{ name: "泰安", value: 112 },
{ name: "诸暨", value: 112 },
{ name: "郑州", value: 113 },
{ name: "哈尔滨", value: 114 },
{ name: "聊城", value: 116 },
{ name: "芜湖", value: 117 },
{ name: "唐山", value: 119 },
{ name: "平顶山", value: 119 },
{ name: "邢台", value: 119 },
{ name: "德州", value: 120 },
{ name: "济宁", value: 120 },
{ name: "荆州", value: 127 },
{ name: "宜昌", value: 130 },
{ name: "义乌", value: 132 },
{ name: "丽水", value: 133 },
{ name: "洛阳", value: 134 },
{ name: "秦皇岛", value: 136 },
{ name: "株洲", value: 143 },
{ name: "石家庄", value: 147 },
{ name: "莱芜", value: 148 },
{ name: "常德", value: 152 },
{ name: "保定", value: 153 },
{ name: "湘潭", value: 154 },
{ name: "金华", value: 157 },
{ name: "岳阳", value: 169 },
{ name: "长沙", value: 175 },
{ name: "衢州", value: 177 },
{ name: "廊坊", value: 193 },
{ name: "菏泽", value: 194 },
{ name: "合肥", value: 229 },
{ name: "武汉", value: 273 },
{ name: "大庆", value: 279 },
],
geoCoordMap: {
海门: [121.15, 31.89],
鄂尔多斯: [109.781327, 39.608266],
招远: [120.38, 37.35],
舟山: [122.207216, 29.985295],
齐齐哈尔: [123.97, 47.33],
盐城: [120.13, 33.38],
赤峰: [118.87, 42.28],
青岛: [120.33, 36.07],
乳山: [121.52, 36.89],
金昌: [102.188043, 38.520089],
泉州: [118.58, 24.93],
莱西: [120.53, 36.86],
日照: [119.46, 35.42],
胶南: [119.97, 35.88],
南通: [121.05, 32.08],
拉萨: [91.11, 29.97],
云浮: [112.02, 22.93],
梅州: [116.1, 24.55],
文登: [122.05, 37.2],
上海: [121.48, 31.22],
攀枝花: [101.718637, 26.582347],
威海: [122.1, 37.5],
承德: [117.93, 40.97],
厦门: [118.1, 24.46],
汕尾: [115.375279, 22.786211],
潮州: [116.63, 23.68],
丹东: [124.37, 40.13],
太仓: [121.1, 31.45],
曲靖: [103.79, 25.51],
烟台: [121.39, 37.52],
福州: [119.3, 26.08],
瓦房店: [121.979603, 39.627114],
即墨: [120.45, 36.38],
抚顺: [123.97, 41.97],
玉溪: [102.52, 24.35],
张家口: [114.87, 40.82],
阳泉: [113.57, 37.85],
莱州: [119.942327, 37.177017],
湖州: [120.1, 30.86],
汕头: [116.69, 23.39],
昆山: [120.95, 31.39],
宁波: [121.56, 29.86],
湛江: [110.359377, 21.270708],
揭阳: [116.35, 23.55],
荣成: [122.41, 37.16],
连云港: [119.16, 34.59],
葫芦岛: [120.836932, 40.711052],
常熟: [120.74, 31.64],
东莞: [113.75, 23.04],
河源: [114.68, 23.73],
淮安: [119.15, 33.5],
泰州: [119.9, 32.49],
南宁: [108.33, 22.84],
营口: [122.18, 40.65],
惠州: [114.4, 23.09],
江阴: [120.26, 31.91],
蓬莱: [120.75, 37.8],
韶关: [113.62, 24.84],
嘉峪关: [98.289152, 39.77313],
广州: [113.23, 23.16],
延安: [109.47, 36.6],
太原: [112.53, 37.87],
清远: [113.01, 23.7],
中山: [113.38, 22.52],
昆明: [102.73, 25.04],
寿光: [118.73, 36.86],
盘锦: [122.070714, 41.119997],
长治: [113.08, 36.18],
深圳: [114.07, 22.62],
珠海: [113.52, 22.3],
宿迁: [118.3, 33.96],
咸阳: [108.72, 34.36],
铜川: [109.11, 35.09],
平度: [119.97, 36.77],
佛山: [113.11, 23.05],
海口: [110.35, 20.02],
江门: [113.06, 22.61],
章丘: [117.53, 36.72],
肇庆: [112.44, 23.05],
大连: [121.62, 38.92],
临汾: [111.5, 36.08],
吴江: [120.63, 31.16],
石嘴山: [106.39, 39.04],
沈阳: [123.38, 41.8],
苏州: [120.62, 31.32],
茂名: [110.88, 21.68],
嘉兴: [120.76, 30.77],
长春: [125.35, 43.88],
胶州: [120.03336, 36.264622],
银川: [106.27, 38.47],
张家港: [120.555821, 31.875428],
三门峡: [111.19, 34.76],
锦州: [121.15, 41.13],
南昌: [115.89, 28.68],
柳州: [109.4, 24.33],
三亚: [109.511909, 18.252847],
自贡: [104.778442, 29.33903],
吉林: [126.57, 43.87],
阳江: [111.95, 21.85],
泸州: [105.39, 28.91],
西宁: [101.74, 36.56],
宜宾: [104.56, 29.77],
呼和浩特: [111.65, 40.82],
成都: [104.06, 30.67],
大同: [113.3, 40.12],
镇江: [119.44, 32.2],
桂林: [110.28, 25.29],
张家界: [110.479191, 29.117096],
宜兴: [119.82, 31.36],
北海: [109.12, 21.49],
西安: [108.95, 34.27],
金坛: [119.56, 31.74],
东营: [118.49, 37.46],
牡丹江: [129.58, 44.6],
遵义: [106.9, 27.7],
绍兴: [120.58, 30.01],
扬州: [119.42, 32.39],
常州: [119.95, 31.79],
潍坊: [119.1, 36.62],
重庆: [106.54, 29.59],
台州: [121.420757, 28.656386],
南京: [118.78, 32.04],
滨州: [118.03, 37.36],
贵阳: [106.71, 26.57],
无锡: [120.29, 31.59],
本溪: [123.73, 41.3],
克拉玛依: [84.77, 45.59],
渭南: [109.5, 34.52],
马鞍山: [118.48, 31.56],
宝鸡: [107.15, 34.38],
焦作: [113.21, 35.24],
句容: [119.16, 31.95],
北京: [116.46, 39.92],
徐州: [117.2, 34.26],
衡水: [115.72, 37.72],
包头: [110, 40.58],
绵阳: [104.73, 31.48],
乌鲁木齐: [87.68, 43.77],
枣庄: [117.57, 34.86],
杭州: [120.19, 30.26],
淄博: [118.05, 36.78],
鞍山: [122.85, 41.12],
溧阳: [119.48, 31.43],
库尔勒: [86.06, 41.68],
安阳: [114.35, 36.1],
开封: [114.35, 34.79],
济南: [117, 36.65],
德阳: [104.37, 31.13],
温州: [120.65, 28.01],
九江: [115.97, 29.71],
邯郸: [114.47, 36.6],
临安: [119.72, 30.23],
兰州: [103.73, 36.03],
沧州: [116.83, 38.33],
临沂: [118.35, 35.05],
南充: [106.110698, 30.837793],
天津: [117.2, 39.13],
富阳: [119.95, 30.07],
泰安: [117.13, 36.18],
诸暨: [120.23, 29.71],
郑州: [113.65, 34.76],
哈尔滨: [126.63, 45.75],
聊城: [115.97, 36.45],
芜湖: [118.38, 31.33],
唐山: [118.02, 39.63],
平顶山: [113.29, 33.75],
邢台: [114.48, 37.05],
德州: [116.29, 37.45],
济宁: [116.59, 35.38],
荆州: [112.239741, 30.335165],
宜昌: [111.3, 30.7],
义乌: [120.06, 29.32],
丽水: [119.92, 28.45],
洛阳: [112.44, 34.7],
秦皇岛: [119.57, 39.95],
株洲: [113.16, 27.83],
石家庄: [114.48, 38.03],
莱芜: [117.67, 36.19],
常德: [111.69, 29.05],
保定: [115.48, 38.85],
湘潭: [112.91, 27.87],
金华: [119.64, 29.12],
岳阳: [113.09, 29.37],
长沙: [113, 28.21],
衢州: [118.88, 28.97],
廊坊: [116.7, 39.53],
菏泽: [115.480656, 35.23375],
合肥: [117.27, 31.86],
武汉: [114.31, 30.52],
大庆: [125.03, 46.58],
},
};
},
mounted() {
this.options = {
title: {
text: "外卖销售数据大盘",
subtext: "销售趋势统计",
left: "center",
},
tooltip: {},
series: [
{
name: "销售额",
type: "scatter",
coordinateSystem: "bmap",
data: this.convertData(this.data),
encode: {
value: 2,
},
itemStyle: {
color: "purple",
},
symbolSize: function (val) {
return val[2] / 10;
},
label: {
show: false,
position: "top",
color: "purple",
formatter: function (data) {
return `${data.data.name} - ${data.data.value[2]}`;
},
},
emphasis: {
label: {
show: true,
},
},
},
{
type: "effectScatter",
name: "Top10",
coordinateSystem: "bmap",
data: this.convertData(
this.data
.sort(function (a, b) {
return b.value - a.value;
})
.slice(0, 10)
),
symbolSize: function (val) {
return val[2] / 10;
},
itemStyle: {
color: "purple",
shadowBlur: 20,
shadowColor: "#333",
},
encode: {
value: 2,
},
label: {
show: true,
color: "purple",
position: "right",
formatter: function (data) {
return `${data.data.name} - ${data.data.value[2]}`;
},
},
hoverAnimation: true,
rippleEffect: {
brushType: "stroke",
},
},
],
bmap: {
key: "P4Xu5tLF729I3YsaS3xz6hCIOtbjyOw5",
center: [108.945315, 34.345838],
zoom: 5, // 展示缩放比例为5
roam: false, // 是否允许缩放
mapStyle: {
// 自定义地图样式
styleJson: [
{
featureType: "water",
elementType: "all",
stylers: {
color: "#d1d1d1",
},
},
{
featureType: "land",
elementType: "all",
stylers: {
color: "#f3f3f3",
},
},
{
featureType: "railway",
elementType: "all",
stylers: {
visibility: "off",
},
},
{
featureType: "highway",
elementType: "all",
stylers: {
color: "#fdfdfd",
},
},
{
featureType: "highway",
elementType: "labels",
stylers: {
visibility: "off",
},
},
{
featureType: "arterial",
elementType: "geometry",
stylers: {
color: "#fefefe",
},
},
{
featureType: "arterial",
elementType: "geometry.fill",
stylers: {
color: "#fefefe",
},
},
{
featureType: "poi",
elementType: "all",
stylers: {
visibility: "off",
},
},
{
featureType: "green",
elementType: "all",
stylers: {
visibility: "off",
},
},
{
featureType: "subway",
elementType: "all",
stylers: {
visibility: "off",
},
},
{
featureType: "manmade",
elementType: "all",
stylers: {
color: "#d1d1d1",
},
},
{
featureType: "local",
elementType: "all",
stylers: {
color: "#d1d1d1",
},
},
{
featureType: "arterial",
elementType: "labels",
stylers: {
visibility: "off",
},
},
{
featureType: "boundary",
elementType: "all",
stylers: {
color: "#fefefe",
},
},
{
featureType: "building",
elementType: "all",
stylers: {
color: "#d1d1d1",
},
},
{
featureType: "label",
elementType: "labels.text.fill",
stylers: {
color: "#999999",
},
},
],
},
},
};
},
methods: {
convertData(data) {
const result = [];
data.forEach((item) => {
let { name, value } = item;
let coord = this.geoCoordMap[name];
result.push({
name: name,
value: [...coord, value],
});
});
return result;
},
},
};
</script>
<style lang="less">
.bmapgl {
width: 1440px;
height: 760px;
}
.echarts {
width: 100%;
height: 100%;
}
</style>
总结¶
上一篇：
Prompt 入门
下一篇：
React Native 开发环境搭建
搜索
最新文章
热门文章