• 百度地图API-地图初始化及初步使用

    目录

    1.百度地图JavaScript API GL

    1.1 账号注册和获取密钥

    1.2 百度地图API初始化

    1.3 切换个性化地图

    2. 百度地图的基础配置与使用

    2.1 切换为三维地图

    2.2  添加地图控件

    2.3 地面叠加层覆盖物

    2.4 添加label标签（文本标注）

     2.5 挤出高度（3D棱柱功能）

    2.6 添加覆盖物（基本图形）

    2.7 自定义动画视角

    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 SDKguidehttps://lbs.baidu.com/index.php?title=jspopularGL/guide/getkey

    1.2 百度地图API初始化

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <style type="text/css">
    9.       html {
    10.         height: 100%;
    11.       }
    12.       body {
    13.         height: 100%;
    14.         margin: 0px;
    15.         padding: 0px;
    16.       }
    17.       #container {
    18.         height: 100%;
    19.         /* width:600px;
    20.             height:400px; */
    21.       }
    22.       /* 隐藏百度地图的版权信息及logo */
    23.       .BMap_cpyCtrl,
    24.       .anchorBL img {
    25.         display: none;
    26.       }
    27.     style>
    28.     <script
    29.       type="text/javascript"
    30.       src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的密钥"
    31.     >script>
    32.   head>
    33.   <body>
    34.     <div id="container">div>
    35.     <script>
    36.       // 创建地图实例
    37.       var map = new BMapGL.Map("container");
    38.       // 设置中心点坐标
    39.       var point = new BMapGL.Point(116.404, 39.915);
    40.       // 地图初始化，设置地图中心位置和展示级别
    41.       map.centerAndZoom(point, 20);
    42.       // 开启鼠标滚轮缩放
    43.       map.enableScrollWheelZoom(true);
    44.       // 设置旋转角度
    45.       // map.setHeading(90);
    46.       // 设置地图的倾斜角度
    47.       map.setTilt(45);
    48.       // 旋转动画
    49.       map.setHeading(90, { duration: 5000 });
    50.     script>
    51.   body>
    52. html>

    实现效果：

    1.3 切换个性化地图

    个性化地图，顾名思义用户可对地图进行个性化配置。通过该服务，允许用户将传统默认的地图样式按需配置，自由控制地图元素显隐及对应的元素样式。
    用户可以通过个性化地图样式编辑器，按需编辑地图的底图样式，再按相应应用端的功能要求，将样式应用在JavaScript API和地图SDK中。 

     详见：

    jspopularGL | 百度地图API SDKguidehttps://lbs.baidu.com/index.php?title=jspopularGL/guide/custom例如切换为眼眸类型图：

    点击眼眸类型图后点击下载样式文件

    下载样式JSON文件： 

     下载后实例化map后加载json文件，对map进行个性化设置：

    1.       fetch("./assets/mapstyle/custom_map_config.json")
    2.         .then((res) => res.json())
    3.         .then((res) => {
    4.           // console.log(res)
    5.           map.setMapStyleV2({ styleJson: res });
    6.         });

    实现效果：

    2. 百度地图的基础配置与使用

    2.1 切换为三维地图

    变更地图类型为地球

    map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式

    示例代码：

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <style type="text/css">
    9.       html {
    10.         height: 100%;
    11.       }
    12.       body {
    13.         height: 100%;
    14.         margin: 0px;
    15.         padding: 0px;
    16.       }
    17.       #container {
    18.         height: 100%;
    19.         /* width:600px;
    20.             height:400px; */
    21.       }
    22.       .BMap_cpyCtrl,
    23.       .anchorBL img {
    24.         display: none;
    25.       }
    26.     style>
    27.     <script
    28.       type="text/javascript"
    29.       src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=EplUeDiZDk31Ac6PewvIfyin8WNukI8C"
    30.     >script>
    31.   head>
    32.   <body>
    33.     <div id="container">div>
    34.     <script>
    35.       // 创建地图实例
    36.       var map = new BMapGL.Map("container");
    37.       // 设置中心点坐标
    38.       var point = new BMapGL.Point(116.404, 39.915);
    39.  
    40.       // 地图初始化，设置地图中心位置和展示级别
    41.       map.centerAndZoom(point, 1);
    42.       // 开启鼠标滚轮缩放
    43.       map.enableScrollWheelZoom(true);
    44.  
    45.       // 把地图变成3d地球
    46.       map.setMapType(BMAP_EARTH_MAP);
    47.  
    48.     script>
    49.   body>
    50. html>

     实现效果：

    2.2  添加地图控件

    在百度地图API中，提供以下控件供开发者使用：

     对于控件的设置，详见开发文档控件类：百度地图JSAPI WebGL v1.0类参考 百度地图JSAPI类参考，百度地图开发者icon-default.png?t=M666https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a2b0

    示例代码：

    1.       //添加比例尺控件
    2.       var scaleControl = new BMapGL.ScaleControl();
    3.       map.addControl(scaleControl);
    4.       // 添加缩放按钮
    5.       var zoomControl = new BMapGL.ZoomControl({
    6.         anchor: BMAP_ANCHOR_BOTTOM_RIGHT,//位置
    7.         offset: new BMapGL.Size(150, 100),//偏移量
    8.       });
    9.       map.addControl(zoomControl);
    10.       //添加城市列表
    11.       var cityListControl = new BMapGL.CityListControl();
    12.       map.addControl(cityListControl);
    13.       // 添加定位控件
    14.       var geolocationControl = new BMapGL.LocationControl({
    15.         anchor: BMAP_ANCHOR_TOP_RIGHT,
    16.         offset: new BMapGL.Size(150, 100),
    17.       });
    18.       map.addControl(geolocationControl);

     实现效果：

    2.3 地面叠加层覆盖物

    JSAPI GL提供的GroundOverlay类支持在地图底面上叠加覆盖物，覆盖物可以是图片、自定义Canvas、视频。
    GroundOverlay类继承Overlay类，基于Bounds确定在地面上的显示范围和大小，通过options来配置覆盖物的类型、源、透明度等。

    下面以覆盖图片为例，在故宫博物院上覆盖彩色故宫地图：

    1.       //设置图片类型覆盖物     
    2.       var pStart = new BMapGL.Point(116.3983357265035,39.92901203550782);
    3.       var pEnd = new BMapGL.Point(116.40876391157045,39.91985263147664);
    4.  
    5.       var bounds = new BMapGL.Bounds(pStart, pEnd);
    6.       var imgOverlay = new BMapGL.GroundOverlay(bounds, {
    7.         opacity: 0.9,
    8.         
    9.         url: "./assets/imgs/gugongmap.jpg",
    10.         type: "image",
    11.       });
    12.       map.addOverlay(imgOverlay);

    实现效果：

    2.4 添加label标签（文本标注）

    所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。

    覆盖物主要分为：标注（点标注、折线、多边形、圆、文本标注）、信息窗口、图层。

    1）添加文本标注

    1.       var labelPoint = new BMapGL.Point(116.404, 39.915);
    2.       var content = "北京欢迎你";
    3.       var label = new BMapGL.Label(content, {
    4.         position: labelPoint,
    5.         offset: new BMapGL.Size(20, -10),
    6.         enableMassClear: false,
    7.       });
    8.       label.setStyle({
    9.         color: "red",
    10.         fontSize: "30px",
    11.         border: "5px solid green",
    12.       });
    13.       map.addOverlay(label);

    实现效果：

     

     2）添加文本标注点击事件

    通过监听label点击实现，使用InfoWindow类实现弹窗信息显示：

    1.       
    2.       label.addEventListener("click", function () {
    3.         // alert("点击了标签");
    4.         label.setStyle({
    5.           color: "blue",
    6.         });
    7.  
    8.         // 地图打开信息窗口
    9.         map.openInfoWindow(infoWindow, labelPoint);
    10.       });
    11.       var infoWindow = new BMapGL.InfoWindow("这里是故宫", {
    12.           width: 0,
    13.           height: 0,
    14.           title: "故宫博物馆",
    15.         });

    3)自定义弹窗信息样式及内容

    可通过自定义信息弹窗的html内容，对弹窗信息进行自定义：

    1.       var div = document.createElement("div");
    2.       div.innerHTML = `
    3.       
    4.       
      这里是故宫
      s
    5.       `;
    6.       var infoWindow = new BMapGL.InfoWindow(div, {
    7.         width: 0,
    8.         height: 0,
    9.         title: "故宫博物馆",
    10.       });

     

     2.5 挤出高度（3D棱柱功能）

    JSAPI GL提供的Prism类支持在地图上添加3D棱柱功能，继承Overlay类，可以基于位置经纬度，高度，顶面和侧面的颜色、透明度等属性来绘制不规则的棱柱体。

    下面以获取北京市边界线，并通过边界线向上挤出高度实现棱柱效果为例：

    首先通过实例化Boundary类获取北京市边界范围，对边界范围的经纬度坐标点进行分割，重新对边界坐标点进行坐标转换，实例化Prism传入边界坐标转换后的值、挤出高度及配置参数，挤出棱柱：

    1.       var bd1 = new BMapGL.Boundary();
    2.       bd1.get("北京市", (rs) => {
    3.         console.log(rs);
    4.         let str = rs.boundaries[0];
    5.         str = str.replace(" ", "");
    6.         let points = str.split(";");
    7.         let path = [];
    8.         for (let i = 0; i < points.length; i++) {
    9.           let arr = points[i].split(",");
    10.           let lng = arr[0];
    11.           let lat = arr[1];
    12.           path.push(new BMapGL.Point(lng, lat));
    13.         }
    14.         let prism = new BMapGL.Prism(path, 15000, {
    15.           topFillColor: "#00ffff",
    16.           topFillOpacity: 0.5,
    17.           sideFillColor: "#88ffff",
    18.           sideFillOpacity: 0.5,
    19.         });
    20.  
    21.         map.addOverlay(prism);
    22.  
    23.         prism.addEventListener("click", function (e) {
    24.           //   console.log(e);
    25.           e.target.setOptions({
    26.             topFillColor: "#eeeeee",
    27.             topFillOpacity: 0.5,
    28.             sideFillColor: "#ffffff",
    29.             sideFillOpacity: 0.5,
    30.           });
    31.         });
    32.       });

     实现效果：

    2.6 添加覆盖物（基本图形）

    所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。

    目前JSAPI GL版支持的覆盖物以基本图形为主。

     下面以创建点标注、折线（Polyline）及多边形（Polygon）为例：

    1.       // 创建地图实例
    2.       var map = new BMapGL.Map("container");
    3.       // 设置中心点坐标
    4.       var point = new BMapGL.Point(116.404, 39.915);
    5.  
    6.       // 地图初始化，设置地图中心位置和展示级别
    7.       map.centerAndZoom(point, 15);
    8.       // 开启鼠标滚轮缩放
    9.       map.enableScrollWheelZoom(true);
    10.  
    11.       // 向地图中添加标注,maker标注地图上的点
    12.       var makerPoint1 = new BMapGL.Point(116.408, 39.92);
    13.       var marker = new BMapGL.Marker(makerPoint1);
    14.       // 将标注添加到地图中
    15.       map.addOverlay(marker);
    16.       // 定义标注图标
    17.       var iconRiver = new BMapGL.Icon(
    18.         "./assets/river.png",
    19.         new BMapGL.Size(50, 50),
    20.         {
    21.           anchor: new BMapGL.Size(10, 25),
    22.           imageOffset: new BMapGL.Size(0, 0),
    23.         }
    24.       );
    25.       var makerPoint2 = new BMapGL.Point(116.4, 39.92);
    26.       var marker2 = new BMapGL.Marker(makerPoint2, { icon: iconRiver });
    27.       map.addOverlay(marker2);
    28.       marker2.addEventListener("click", (event) => {
    29.         console.log("你点击了标注", event);
    30.       });
    31.  
    32.       // 添加折线
    33.       var polyline = new BMapGL.Polyline([
    34.       point,makerPoint1,makerPoint2
    35.       ],
    36.       {
    37.           strokeColor:"#0000ff",
    38.           strokeWeight:6,
    39.           strokeOpacity:0.5
    40.       }
    41.       )
    42.       map.addOverlay(polyline);
    43.       //添加平面
    44.       var polygon = new BMapGL.Polygon([point, makerPoint1, makerPoint2], {
    45.         strokeColor: "#00ffff",
    46.         strokeWeight: 6,
    47.         strokeOpacity: 0.5,
    48.       });
    49.       map.addOverlay(polygon);

     实现效果：

    2.7 自定义动画视角

    JSAPI GL支持展示地图的3D动画，您可以自定义从地图上某一地点切换到另一地点的3D过渡动画效果。

    注意：由于在渲染动画时，数据资源是随着当前方位和坐标的改变而实时加载的，刚开始播放动画时画面可能会卡顿，属于正常现象；此外，为了减少加载数据资源的性能损耗，在播放动画时隐藏了地图上的POI点。

    ViewAnimation：一个用来展示地图3D动画的类，您可以自定义动画的关键帧实例，并自由设置动画延迟开始时间、持续时间以及迭代次数等属性。

    下面通过设置动画的关键帧实现动画的切换，并监听屏幕点击事件结束动画：

    1. var keyFrames = [
    2.         {
    3.           // 关键帧所在位置
    4.           center: new BMapGL.Point(116.404, 39.915),
    5.           //   地图缩放等级
    6.           zoom: 20,
    7.           //   地图的倾斜角度
    8.           tilt: 50,
    9.           //   地图的旋转角度
    10.           heading: 0,
    11.           //   动画在过程中的百分比的时间
    12.           percentage: 0,
    13.         },
    14.         {
    15.           center: new BMapGL.Point(116.42, 39.92),
    16.           zoom: 20,
    17.           tilt: 50,
    18.           heading: 90,
    19.           percentage: 0.2,
    20.         },
    21.         {
    22.           center: new BMapGL.Point(116.42, 39.92),
    23.           zoom: 20,
    24.           tilt: 50,
    25.           heading: 180,
    26.           percentage: 0.4,
    27.         },
    28.         {
    29.           center: new BMapGL.Point(116.404, 39.915),
    30.           zoom: 20,
    31.           tilt: 50,
    32.           heading: 360,
    33.           percentage: 1,
    34.         },
    35.       ];
    36.  
    37.       //   设置动画属性
    38.       var opts = {
    39.         duration: 15000, // 动画时长
    40.         delay: 0, // 动画延迟
    41.         interation: 2, // 动画循环次数
    42.       };
    43.  
    44.       //   创建动画
    45.       var animation = new BMapGL.ViewAnimation(keyFrames, opts);
    46.  
    47.       //   开始动画
    48.       map.startViewAnimation(animation);
    49.  
    50.       //   监听动画的时间
    51.       animation.addEventListener("animationstart", function (e) {
    52.         console.log("animationstart");
    53.       });
    54.       animation.addEventListener("animationend", function (e) {
    55.         console.log("animationend");
    56.       });
    57.       animation.addEventListener("animationcancel", function (e) {
    58.         console.log("animationcancel");
    59.       });
    60.       animation.addEventListener("animationiterations", function (e) {
    61.         console.log("animationiterations");
    62.       });
    63.  
    64.       window.addEventListener("click", () => {
    65.         map.cancelViewAnimation(animation);
    66.       });

    实现效果： 

     

  • 相关阅读:
    【栈和队列的相互转换】
    【vue2绘制echarts环状图】vue2使用echarts绘制环状图
    像FBIF一样做会展数字化，你也有可能吸引数万观众
    计算机竞赛 基于生成对抗网络的照片上色动态算法设计与实现 - 深度学习 opencv python
    django的cookie和session
    ruoyi-vue项目的打包、与运行
    [2022 ACTF]web题目复现
    Linux权限维持
    【数据结构】二叉树的链式结构
    python读写各种文件
  • 原文地址：https://blog.csdn.net/damadashen/article/details/126259319