JSAPI GL

外婆桥卖汤
1,497 阅读11分钟

jsapi GL

基本组成

  • 提前使用script导入链接，src为地址https://api.map.baidu.com/api?v=1.0&type=webgl&ak=申请的ak密钥
  • 建一个插入地图的盒子，如div，设置个id
  • 使用new BMapGL.map('id名')拿到盒子，使用new BMaoGL.Point(经度，纬度)设置坐标点，然后将坐标点使用centerAndZoom方法(经纬度实例，坐标级别)放在盒子里面即可
  • 接下来就是向地图实例上添加配置属性了
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=M0e3sGleXofV4Us4ySHqxLuZCQmn5Db2">//导入cdn
</script>
<body> 
<div id="container"></div>
</body> 
<script type="text/javascript">
var map = new BMapGL.Map("container");// 创建地图实例 
var point = new BMapGL.Point(116.404, 39.915);// 创建点坐标 
map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别 
</script>

原型上的配置项

创建实例
  • Map('容器id')
var map = new BMapGL.Map("container");
大小
  • Size(长,宽)
new BMapGL.Size(10, 25);
控件
  • 控件类名(控件位置-可不填);
new BMapGL.控件类名(控件位置-可不填);
Icon类
  • Icon(图片地址, 可视区域大小 , 配置项 )
  • 可选配置项
    • anchor 图标的定位点相对于图标左上角的偏移值
    • imageOffset 图标所用的图片相对于可视区域的偏移值，此功能的作用等同于CSS中的background-position属性
    • imageSize 图标所用的图片的大小，此功能的作用等同于CSS中的background-size属性。可用于实现高清屏的高清效果
 var myIcon = new BMapGL.Icon("地址", new BMapGL.Size(90, 30), {  
            anchor: new BMapGL.Size(10, 25),//图标的定位点相对于图标左上角的偏移值 
            imageOffset: new BMapGL.Size(0, 0 ), // 设置图片偏移  
        });
Label类
  • 此类表示地图上的文本标注。
  • Label(文本,配置项)
		var point = new BMapGL.Point(116.404, 39.915);
        var lable = new BMapGL.Label('123123',{
	        position: point,   //设置标注的地理位置,如果是当做标题的话，可以不设置
            offset:new BMapGL.Size(10,-50)//文本偏移量
        });
        label.setStyle({ // 设置label的样式
            color: '#000',
            fontSize: '30px',
            border: '2px solid #1E90FF'
        })
        map.addOverlay(label);  //将文本标注插入到地图
bounds类
  • 此类表示地理坐标的矩形区域。
  • 使用方法：Bounds(sw: Point类实例 , ne: Point类实例 ) 创建一个包含所有给定点坐标的矩形区域。其中sw表示矩形区域的西南角，参数ne表示矩形区域的东北角
 var bounds = new BMapGL.Bounds(
 new BMapGL.Point(pStart.lng, pEnd.lat),//西南角的经纬度
 new BMapGL.Point(pEnd.lng, pStart.lat)//东北角的经纬度
 );
3D类
  • 此类可以使地图在2D与3D之间切换
  • 使用方法：NavigationControl3D({anchor:位置,offset:偏移})
  • 暂时不支持设置位置
        var D = new BMapGL.NavigationControl3D({
            anchor:BMAP_ANCHOR_TOP_RIGHT,
            offset: new BMapGL.Size(-1000, -10)
        })
        map.addControl(D);
创建点坐标
  • Point(经度,纬度)
  • 实例属性：lng取经度，lat取纬度
var point = new BMapGL.Point(116.404, 39.915);
point.lng//116.404
point.lat//39.915

实例上的配置项

初始化地图
  • centerAndZoom(点坐标,地图级别)
  • 地图级别越小，缩放比例越大
map.centerAndZoom(point, 15);
鼠标滑轮控制地图缩放
  • enableScrollWheelZoom(true)
  • 默认为false，false为不控制缩放
map.enableScrollWheelZoom(true);
设置地图的旋转角度和倾斜角度
  • setHeading(num);旋转角度，以y轴旋转
  • setTilt(90);倾斜角度,以x轴倾斜
map.setHeading(90);//y轴旋转90度
map.setTilt(90);//x轴倾斜90度
更换地图模式
  • 使用方法：setMapType(类型)
    • 类型的可选值
    • BMAP_EARTH_MAP 地球模式
map.setMapType(BMAP_EARTH_MAP);//更换为地球模式
(添加/关闭)交通流量图层
  • setTrafficOn(); 添加
  • setTrafficOff(); 关闭
map.setTrafficOn();// 添加交通流量图层
map.setTrafficOff(); // 移除交通流量图层

控件

  • 使用方法
  • new BMapGL.控件类名(控件位置-可不填); 创建控件
  • 实例.addControl(控件); 添加控件到地图
控件类名
  • 抽象基类 Control 所有控件均继承此类的方法、属性。通过此类您可实现自定义控件
  • 比例尺 ScaleControl默认位于地图左下方，显示地图的比例关系
  • 缩放 ZoomControl 默认位于地图右下方，控制地图级别的缩放
  • 定位 LocationControl 默认位于地图左下方，用于获取定位
  • 城市选择列表 CityListControl 默认位于地图左上方，用于进行城市选择定位
  • 版权 CopyrightControl 默认位于地图左下方，用于展示版权信息
控件位置
  • 控件位置是对象，由anchor和offset组成，anchor表示在那个固定地点，offset表示偏移量
  • anchor与offset都是可选项,都不是必填项 使用方法new BMapGL.控件类名({anchor:值,offset: new BMapGL.Size(150, 5)});
anchor
  • 属性值
  • BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角
  • BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角
  • BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角
  • BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角
offset
  • 设置偏移量,偏移量可为负数，负数就是反方向
  • new BMapGL.Size(左偏移, 右偏移);
        var zoomCtrl = new BMapGL.ZoomControl({
	        anchor:BMAP_ANCHOR_TOP_LEFT,//设置控件定位在地图左上角
            offset: new BMapGL.Size(-10, 10)//以左上角为源头，向右偏移10像素，上下不动
        }); // 设置缩放控件实例
        map.addControl(zoomCtrl);//添加缩放控件

个性化地图

  • 自定义地图样式,个性化地图
  • 自定义步骤：新建->编辑->发布样式
  • 使用方式有两种，都是基于 实例.setMapStyleV2({})
    • 方法1：使用syuleId,在发布样式后，复制样式ID,需要注意的是发布的styleId要与使用的ak是同一个账号
    • 方法2：使用styleJson,点击发布样式，复制json
注意事项
  • setMapStyleV2方法需要在地图初始化（centerAndZoom）完成后执行；
  • 样式更新不会改变样式ID
  • 如果样式ID在控制台中被删除，但JavaScript API还在继续调用。那么将会渲染默认样式的地图
   map.setMapStyleV2({//使用styleId
       styleId: '7e3243cb5ac0306e22f3319ca51a5a8f'
   });
   map.setMapStyleV2({
       styleJson: [{//使用styleJson
           "featureType": "land",
           "elementType": "geometry",
           "stylers": {
               "color": "#2d252cff",
               "visibility": "on"
           }
       }]
   });

覆盖物

使用方法
  • 初始化覆盖物实例 new BMapGL.覆盖物类型(经纬度实例-必填,配置项-选填);
  • 向地图追加覆盖物实例 map.addOverlay(覆盖物实例);
  • 删除实例 map.removeOverlay(覆盖物实例);
  • 监听覆盖物事件:覆盖物实例.addEventListener('事件类型',function)
覆盖物类型
  • 抽象基类 Overlay 所有的覆盖物均继承此类的方法
  • 点 Marker 表示地图上的点，可自定义标注的图标
  • 折线 Polyline 表示地图上的折线
  • 多边形 Polygon 表示地图上的多边形
  • 圆 Circle 表示地图上的圆
不同覆盖物的配置项
  • 配置项都包含在{}里面
点Marker可选配置项
  • icon
  • 值是一个Icon类型实例
  • 设置icon有两种方式
    • 在初始化Marker的时候在配置项里设置
    • 使用覆盖物实例.setIcon(icon实例)设置
//初始化icon实例
     var myIcon = new BMapGL.Icon("地址", new BMapGL.Size(90, 30), {
            anchor: new BMapGL.Size(10, 25),//图标的定位点相对于图标左上角的偏移值
            imageOffset: new BMapGL.Size(0, 0 ), // 设置图片偏移  
        });
        // 创建标注对象并添加到地图  
        var marker = new BMapGL.Marker(point, {
            icon: myIcon
        });
        
        var lable = new BMapGL.Label('123123',{//初始化一个lable实例
            offset:new BMapGL.Size(10,-50)
        });
        
        marker.setLabel(lable);//给标注添加文本标题
        map.addOverlay(marker);
折线覆盖物
  • Polyline表示地图上的折线覆盖物,包含一组点，由这些点连成一条折线
  • 设置折线
var polyline = new BMapGL.Polyline([
		new BMapGL.Point(116.399, 39.910),
		new BMapGL.Point(116.405, 39.920),
		new BMapGL.Point(116.425, 39.900)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);
多边形覆盖物
  • Polygon表示地图上的多边形覆盖物，它包含一组点。多边形将这组点按顺序首尾相连，最终围成一个封闭图形。
  • 设置多边形
配置项
  • strokeColor 类型string 边线颜色
  • fillColor 类型string 填充颜色。当参数为空时，折线覆盖物没有填充效果。
  • strokeWeight 类型number 边线宽度，以像素为单位
  • strokeOpacity 类型number 边线透明度，取值范围0-1
  • fillOpacity 类型number 填充透明度
  • strokeStyle 类型string 边线样式，solid或dashed
var polygon = new BMapGL.Polygon([
        new BMapGL.Point(116.387112,39.920977),
        new BMapGL.Point(116.385243,39.913063),
        new BMapGL.Point(116.394226,39.917988),
        new BMapGL.Point(116.401772,39.921364),
        new BMapGL.Point(116.41248,39.927893)
    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polygon);
带高度的点
  • 使用方法BMapGL.Marker3D(经纬度实例, 高, 配置项)
配置项
  • size 类型number 点的大小，默认为50
  • shape 类型number 点的形状，1 为圆形，2 为正方形，默认为 1。也可以使用对应的常量 BMAP_SHAPE_CIRCLE 和 BMAP_SHAPE_RECT
  • fillColor 类型string 点的颜色，格式为 '#xxxxxx'，比如'#f00'
  • fillOpacity 类型number 点的透明度，范围0-1，默认0.8
  • icon 类型Icon 点的纹理贴图，格式为通过Icon创建的Icon对象
    // 创建位置点
    var point = new BMapGL.Point(116.404, 39.915);
    // 创建带高度的点
    var marker3d = new BMapGL.Marker3D(point, 8000, {
        size: 50,
        shape: BMAP_SHAPE_CIRCLE,
        fillColor: '#454399',
        fillOpacity: 0.6,
        icon: icon类实例 //如果不加背景图片可以省略此项
    });
    // 将点添加到地图上
    map.addOverlay(marker3d);
3D棱柱
  • 使用方法：BMapGL.Prism(Array< Point >, 高, 配置项)
配置项
  • topFillColor 类型string 顶面填充颜色
  • topFillOpacity 类型number 顶面填充颜色透明度，取值范围0-1
  • sideFillColor 类型string 侧面填充颜色
  • sideFillOpacity 类型number 侧面填充颜色透明度，取值范围0-1
  • enableMassClear 类型boolean 是否在调用map.clearOverlays清除此覆盖物，默认为true
var prism = new BMapGL.Prism(path, 5000, {
    topFillColor: '#5679ea',
    topFillOpacity: 0.5,
    sideFillColor: '#5679ea',
    sideFillOpacity: 0.9
});
map.addOverlay(prism);//将实例添加到地图上
地面叠加层(图片、视频、canvas)
  • BMapGL.GroundOverlay(bounds实例, 配置项)
配置项
  • type 类型string 'video' | 'canvas'，默认为image
  • url 类型string video url | 自定义的canvas对象
  • opacity 类型number 图层透明度，默认为1，范围0-1
        // 创建叠加物显示的范围Bounds
        var pStart = new BMapGL.Point(116.447717, 39.919173);
        var pEnd = new BMapGL.Point(116.453125, 39.923475);
        var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat),
            new BMapGL.Point(pEnd.lng, pStart.lat));
        // 创建地面叠加层实例
        var imgOverlay = new BMapGL.GroundOverlay(bounds, {
            type: 'image',
            url: '图片地址',
            opacity: 1
        });
        // 叠加层添加到地图
        map.addOverlay(imgOverlay);
信息窗口
  • BMapGL.InfoWindow(文本内容,配置项);
  • 一般用于配合其他标注的自定义事件使用
        var map = new BMapGL.Map("allmap");
        var point = new BMapGL.Point(116.404, 39.925);
        map.centerAndZoom(point, 15);

        var marker = new BMapGL.Marker(point); // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中
        var opts = {
            width: 200, // 信息窗口宽度
            height: 100, // 信息窗口高度
            title: "故宫博物院", // 信息窗口标题
        }
        var infoWindow = new BMapGL.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts); // 创建信息窗口对象 
        marker.addEventListener("click", function () {
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        });

地图事件

  • 实例.addEventListener('事件类型',函数) 添加事件
  • 实例.removeEventListener('事件类型', 函数);移出事件
右键菜单
  • 使用方法
  1. 首先创建一个右键菜单实例 new BMapGL.ContextMenu();
  2. 在一个数组中设置配置项
  3. 循环数组，将每一项用右键菜单实例.addItem(当前项)的方式添加到菜单
  4. map.addContextMenu(右键菜单实例);将右键菜单项添加到地图实例上
	var menu = new BMapGL.ContextMenu();
	var txtMenuItem = [
		{
			text:'放大',//文本
			callback: function () {//触发回调
                map.zoomIn();
            }
		},
		{
			text:'缩小',
			callback: function () {
                map.zoomOut();
            }
		}
	];
	for(var i = 0; i < txtMenuItem.length; i++){
		menu.addItem(new BMapGL.MenuItem(
            txtMenuItem[i].text,
            txtMenuItem[i].callback,
            100
        ));
	}
	map.addContextMenu(menu);

动效

自定义视角动画
  • 使用方法:
  1. 声明动画实例new BMapGL.ViewAnimation(帧动画数组,配置项);
  2. 开始播放动画map.startViewAnimation(动画实例)
  3. 停止动画map.cancelViewAnimation(动画实例);
可以设置监听事件
  • 动画实例.addEventListener('事件类型', function);
  • 事件类型
  1. animationstart 动画开始,如果配置了delay，则在delay后触发
  2. animationiterations 动画循环大于1次时，上一次结束既下一次开始时触发。最后一次循环结束时不触发
  3. animationend 动画结束时触发，如果动画中途被终止，则不会触发
  4. animationcancel 动画中途被终止时触发
帧动画数组配置项
  • 是个数组,里面每一项是一个对象，配置内容在每一个对象内进行配置
  • center 类型Point实例 地图中心点，默认值为地图当前状态中心点
  • zoom 类型Number 地图缩放级别，默认值为地图当前状态缩放级别
  • tilt 类型Number 地图倾斜角度，默认值为地图当前状态倾斜角度
  • heading 类型Number 地图旋转角度，默认值为地图当前旋转角度
  • percentage 类型Number 表示当前关键帧处于动画过程的百分比，取值范围0~1
帧动画实例配置项
  • 是个对象
  • delay 类型Number 动画开始延迟时间，单位ms，默认0
  • duration 类型Number 动画持续时间，单位ms，默认1000
  • interation 类型Number | string 循环次数，参数类型为数字时循环固定次数，参数为'INFINITE'无限循环，默认为1
       var keyFrames = [{
                center: new BMapGL.Point(116.307092, 40.054922),
                zoom: 20,
                tilt: 50,
                heading: 0,
                percentage: 0
            },
            {
                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.307092, 40.054922),
                zoom: 20,
                tilt: 50,
                heading: -360,
                percentage: 1
            },
        ];

        var opts = {
            duration: 10000,
            delay: 5000,
            interation: 'INFINITE'
        };

        // 声明动画对象
        var animation = new BMapGL.ViewAnimation(keyFrames, opts);
        // 监听事件
        animation.addEventListener('animationstart', function (e) {
            console.log('start')
        });
        map.startViewAnimation(animation);
轨迹动画
  • 注意：使用轨迹动画需要在引入jsapi GL版后，再引入一个BMapGLLib.TrackAnimation库
  • 使用方法
  1. 创建一个Polyline折线实例
  2. 创建轨迹动画实例 new BMapGLLib.TrackAnimation(地图实例,折线实例,配置项);
  3. 启动动画 轨迹动画实例.start();
  4. 停止动画轨迹动画实例.cancel();
配置项
  • 为对象
  • duration 类型Number 动画持续时常，单位ms
  • delay 类型Number 动画开始延迟
  • overallView 类型Boolean 是否在动画结束后总览视图缩放（调整地图到能看到整个轨迹的视野），默认开启
  • tilt 类型Number 设置动画中的地图倾斜角度，默认55度
  • zoom 类型Number 设置动画中的缩放级别，默认会根据轨迹情况调整到一个合适的级别

常见问题

  • 获取指定地区的经纬度，使用Boundary方法
avatar
文章
阅读
粉丝