本篇github源码地址： https://github.com/front-end-study-GoGoGo/webGIS-basic-BMapGL
1 先上运行效果图
2 介绍
随着前端技术的不断发展，WebGIS普及度也越来越广，本篇将主要讲解基于百度地图JavaScript API GL v1.0
的WebGIS开发与使用，看完本篇你将能运行出一个简单的demo，也就是上图所显示。
3 代码实例
3.1 实现一个简单的helloWorld，以下为html代码直接复制粘贴即可运行：
代码语言：javascript复制<!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="//api.map.baidu.com/api?type=webgl&v=1.0&ak=GXn1gkhgbbWet55NCyKzjB7Hqfdh3gos"></script>
<title>百度地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>
3.2 给地图添加控件（比例尺控件、缩放控件、城市列表控件），并且可以自定义位置，以下为html代码直接复制粘贴即可运行：
代码语言：javascript复制<!-- 02添加控件 -->
<!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="//api.map.baidu.com/api?type=webgl&v=1.0&ak=GXn1gkhgbbWet55NCyKzjB7Hqfdh3gos"></script>
<title>百度地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var opts = { // 控件位置
anchor:BMAP_ANCHOR_TOP_RIGHT, // 停靠在右上角
offset: new BMapGL.Size(150, 20) // 自定义偏移量
}
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(opts); // 添加城市列表控件
map.addControl(cityCtrl);
</script>本文参考链接：https://lbsyun.baidu.com/index.php?title=jspopularGL
