目录
1.百度地图JavaScript API GL
百度地图JavaScript API GL v1.0是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。
百度地图JavaScript API支持HTTP和HTTPS，免费对外开放，可直接使用。接口使用无次数限制。
1.1 账号注册和获取密钥
1）注册百度账号
根据官网的提示与指示进行账号注册。
2）申请成为百度开发者
登陆账号后进入控制台界面，在个人信息出进行个人认证并申请成为开发者，一般个人使用或测试申请成为个人开发者即可。
3）获取服务密钥
在左侧工具栏内选择应用管理-我的应用模块开始创建应用。
用户可根据需求选择应用类型，一般Web开发选择浏览器端即可，并设置应用名称及所需服务类型，在白名单处，若无特殊要求，填入*号即可，点击提交便可创建应用。
在我的应用界面便可以查看创建的应用对应的AK密钥，点击复制后即可使用。
4）开发与使用
在引入资源处粘贴应用的密钥（AK），便可以正常调用其他功能进行使用。
jspopularGL | 百度地图API SDKguide
https://lbs.baidu.com/index.php?title=jspopularGL/guide/getkey
1.2 百度地图API初始化
<!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>Document</title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
height: 100%;
/* width:600px;
height:400px; */
}
/* 隐藏百度地图的版权信息及logo */
.BMap_cpyCtrl,
.anchorBL img {
display: none;
}
</style>
<script
type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的密钥"
></script>
</head>
<body>
<div id="container"></div>
<script>
// 创建地图实例
var map = new BMapGL.Map("container");
// 设置中心点坐标
var point = new BMapGL.Point(116.404, 39.915);
// 地图初始化，设置地图中心位置和展示级别
map.centerAndZoom(point, 20);
// 开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 设置旋转角度
// map.setHeading(90);
// 设置地图的倾斜角度
map.setTilt(45);
// 旋转动画
map.setHeading(90, { duration: 5000 });
</script>
</body>
</html>
实现效果：
1.3 切换个性化地图
个性化地图，顾名思义用户可对地图进行个性化配置。通过该服务，允许用户将传统默认的地图样式按需配置，自由控制地图元素显隐及对应的元素样式。
用户可以通过个性化地图样式编辑器，按需编辑地图的底图样式，再按相应应用端的功能要求，将样式应用在JavaScript API和地图SDK中。
详见：
jspopularGL | 百度地图API SDKguidehttps://lbs.baidu.com/index.php?title=jspopularGL/guide/custom例如切换为眼眸类型图：
点击眼眸类型图后点击下载样式文件
下载样式JSON文件：
下载后实例化map后加载json文件，对map进行个性化设置：
fetch("./assets/mapstyle/custom_map_config.json")
.then((res) => res.json())
.then((res) => {
// console.log(res)
map.setMapStyleV2({ styleJson: res });
});
实现效果：
2. 百度地图的基础配置与使用
2.1 切换为三维地图
变更地图类型为地球
map.setMapType(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>Document</title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
height: 100%;
/* width:600px;
height:400px; */
}
.BMap_cpyCtrl,
.anchorBL img {
display: none;
}
</style>
<script
type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=EplUeDiZDk31Ac6PewvIfyin8WNukI8C"
></script>
</head>
<body>
<div id="container"></div>
<script>
// 创建地图实例
var map = new BMapGL.Map("container");
// 设置中心点坐标
var point = new BMapGL.Point(116.404, 39.915);
// 地图初始化，设置地图中心位置和展示级别
map.centerAndZoom(point, 1);
// 开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 把地图变成3d地球
map.setMapType(BMAP_EARTH_MAP);
</script>
</body>
</html>
实现效果：
2.2 添加地图控件
在百度地图API中，提供以下控件供开发者使用：
对于控件的设置，详见开发文档控件类：百度地图JSAPI WebGL v1.0类参考 百度地图JSAPI类参考，百度地图开发者
https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a2b0
示例代码：
//添加比例尺控件
var scaleControl = new BMapGL.ScaleControl();
map.addControl(scaleControl);
// 添加缩放按钮
var zoomControl = new BMapGL.ZoomControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,//位置
offset: new BMapGL.Size(150, 100),//偏移量
});
map.addControl(zoomControl);
//添加城市列表
var cityListControl = new BMapGL.CityListControl();
map.addControl(cityListControl);
// 添加定位控件
var geolocationControl = new BMapGL.LocationControl({
anchor: BMAP_ANCHOR_TOP_RIGHT,
offset: new BMapGL.Size(150, 100),
});
map.addControl(geolocationControl);实现效果：
2.3 地面叠加层覆盖物
JSAPI GL提供的GroundOverlay类支持在地图底面上叠加覆盖物，覆盖物可以是图片、自定义Canvas、视频。
GroundOverlay类继承Overlay类，基于Bounds确定在地面上的显示范围和大小，通过options来配置覆盖物的类型、源、透明度等。
下面以覆盖图片为例，在故宫博物院上覆盖彩色故宫地图：
//设置图片类型覆盖物
var pStart = new BMapGL.Point(116.3983357265035,39.92901203550782);
var pEnd = new BMapGL.Point(116.40876391157045,39.91985263147664);
var bounds = new BMapGL.Bounds(pStart, pEnd);
var imgOverlay = new BMapGL.GroundOverlay(bounds, {
opacity: 0.9,
url: "./assets/imgs/gugongmap.jpg",
type: "image",
});
map.addOverlay(imgOverlay);实现效果：
2.4 添加label标签（文本标注）
所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。
覆盖物主要分为：标注（点标注、折线、多边形、圆、文本标注）、信息窗口、图层。
1）添加文本标注
var labelPoint = new BMapGL.Point(116.404, 39.915);
var content = "北京欢迎你";
var label = new BMapGL.Label(content, {
position: labelPoint,
offset: new BMapGL.Size(20, -10),
enableMassClear: false,
});
label.setStyle({
color: "red",
fontSize: "30px",
border: "5px solid green",
});
map.addOverlay(label);实现效果：
2）添加文本标注点击事件
通过监听label点击实现，使用InfoWindow类实现弹窗信息显示：
label.addEventListener("click", function () {
// alert("点击了标签");
label.setStyle({
color: "blue",
});
// 地图打开信息窗口
map.openInfoWindow(infoWindow, labelPoint);
});
var infoWindow = new BMapGL.InfoWindow("这里是故宫", {
width: 0,
height: 0,
title: "故宫博物馆",
});
3)自定义弹窗信息样式及内容
可通过自定义信息弹窗的html内容，对弹窗信息进行自定义：
var div = document.createElement("div");
div.innerHTML = `
<div><img src="./assets/imgs/gugong.png" /></div>
<div>这里是故宫</div>s
`;
var infoWindow = new BMapGL.InfoWindow(div, {
width: 0,
height: 0,
title: "故宫博物馆",
});
2.5 挤出高度（3D棱柱功能）
JSAPI GL提供的Prism类支持在地图上添加3D棱柱功能，继承Overlay类，可以基于位置经纬度，高度，顶面和侧面的颜色、透明度等属性来绘制不规则的棱柱体。
下面以获取北京市边界线，并通过边界线向上挤出高度实现棱柱效果为例：
首先通过实例化Boundary类获取北京市边界范围，对边界范围的经纬度坐标点进行分割，重新对边界坐标点进行坐标转换，实例化Prism传入边界坐标转换后的值、挤出高度及配置参数，挤出棱柱：
var bd1 = new BMapGL.Boundary();
bd1.get("北京市", (rs) => {
console.log(rs);
let str = rs.boundaries[0];
str = str.replace(" ", "");
let points = str.split(";");
let path = [];
for (let i = 0; i < points.length; i++) {
let arr = points[i].split(",");
let lng = arr[0];
let lat = arr[1];
path.push(new BMapGL.Point(lng, lat));
}
let prism = new BMapGL.Prism(path, 15000, {
topFillColor: "#00ffff",
topFillOpacity: 0.5,
sideFillColor: "#88ffff",
sideFillOpacity: 0.5,
});
map.addOverlay(prism);
prism.addEventListener("click", function (e) {
// console.log(e);
e.target.setOptions({
topFillColor: "#eeeeee",
topFillOpacity: 0.5,
sideFillColor: "#ffffff",
sideFillOpacity: 0.5,
});
});
});实现效果：
2.6 添加覆盖物（基本图形）
所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。
目前JSAPI GL版支持的覆盖物以基本图形为主。
下面以创建点标注、折线（Polyline）及多边形（Polygon）为例：
// 创建地图实例
var map = new BMapGL.Map("container");
// 设置中心点坐标
var point = new BMapGL.Point(116.404, 39.915);
// 地图初始化，设置地图中心位置和展示级别
map.centerAndZoom(point, 15);
// 开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 向地图中添加标注,maker标注地图上的点
var makerPoint1 = new BMapGL.Point(116.408, 39.92);
var marker = new BMapGL.Marker(makerPoint1);
// 将标注添加到地图中
map.addOverlay(marker);
// 定义标注图标
var iconRiver = new BMapGL.Icon(
"./assets/river.png",
new BMapGL.Size(50, 50),
{
anchor: new BMapGL.Size(10, 25),
imageOffset: new BMapGL.Size(0, 0),
}
);
var makerPoint2 = new BMapGL.Point(116.4, 39.92);
var marker2 = new BMapGL.Marker(makerPoint2, { icon: iconRiver });
map.addOverlay(marker2);
marker2.addEventListener("click", (event) => {
console.log("你点击了标注", event);
});
// 添加折线
var polyline = new BMapGL.Polyline([
point,makerPoint1,makerPoint2
],
{
strokeColor:"#0000ff",
strokeWeight:6,
strokeOpacity:0.5
}
)
map.addOverlay(polyline);
//添加平面
var polygon = new BMapGL.Polygon([point, makerPoint1, makerPoint2], {
strokeColor: "#00ffff",
strokeWeight: 6,
strokeOpacity: 0.5,
});
map.addOverlay(polygon);实现效果：
2.7 自定义动画视角
JSAPI GL支持展示地图的3D动画，您可以自定义从地图上某一地点切换到另一地点的3D过渡动画效果。
注意：由于在渲染动画时，数据资源是随着当前方位和坐标的改变而实时加载的，刚开始播放动画时画面可能会卡顿，属于正常现象；此外，为了减少加载数据资源的性能损耗，在播放动画时隐藏了地图上的POI点。
ViewAnimation：一个用来展示地图3D动画的类，您可以自定义动画的关键帧实例，并自由设置动画延迟开始时间、持续时间以及迭代次数等属性。
下面通过设置动画的关键帧实现动画的切换，并监听屏幕点击事件结束动画：
var keyFrames = [
{
// 关键帧所在位置
center: new BMapGL.Point(116.404, 39.915),
// 地图缩放等级
zoom: 20,
// 地图的倾斜角度
tilt: 50,
// 地图的旋转角度
heading: 0,
// 动画在过程中的百分比的时间
percentage: 0,
},
{
center: new BMapGL.Point(116.42, 39.92),
zoom: 20,
tilt: 50,
heading: 90,
percentage: 0.2,
},
{
center: new BMapGL.Point(116.42, 39.92),
zoom: 20,
tilt: 50,
heading: 180,
percentage: 0.4,
},
{
center: new BMapGL.Point(116.404, 39.915),
zoom: 20,
tilt: 50,
heading: 360,
percentage: 1,
},
];
// 设置动画属性
var opts = {
duration: 15000, // 动画时长
delay: 0, // 动画延迟
interation: 2, // 动画循环次数
};
// 创建动画
var animation = new BMapGL.ViewAnimation(keyFrames, opts);
// 开始动画
map.startViewAnimation(animation);
// 监听动画的时间
animation.addEventListener("animationstart", function (e) {
console.log("animationstart");
});
animation.addEventListener("animationend", function (e) {
console.log("animationend");
});
animation.addEventListener("animationcancel", function (e) {
console.log("animationcancel");
});
animation.addEventListener("animationiterations", function (e) {
console.log("animationiterations");
});
window.addEventListener("click", () => {
map.cancelViewAnimation(animation);
});实现效果：
扫一扫
1222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
