百度GIS地图笔记

因我司是搞路桥等基建项目的,故在每个项目中都会牵扯到GIS地图相关的功能。

本篇文章记录下我在Vue.js项目中使用百度GIS地图的一些笔记。


官方文档:https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/show

API类:https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html



初始化地图

  1. 引入百度地图API文件

    // index.html
    
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
    

  2. 地图初始化

    // template
    <div id="locationmap"></div>
    
    // script
    moutend() {
        let map = new BMapGL.Map("locationmap", { enableMapClick: false })    // 创建
        map.setMapType(BMAP_EARTH_MAP)  // 卫星地球地图
        map.centerAndZoom(new BMapGL.Point(113.816282, 34.796343), 10)    // 中心点, 缩放比例
        map.setDisplayOptions({poiText: true,poiIcon: false})
        map.enableScrollWheelZoom(true)    // 开启鼠标滚轮缩放
        map.clearOverlays();    // 清除所有覆盖物
        map.disableDragging(true)    // 开启推拽
        map.disableDoubleClickZoom(true)    // 开始双击缩放
        this.MAP = map
    }
    


常用功能

  1. 给地图添加标记点和事件

    标记点(Marker)是有:icon,point,label组成;其中:label是标记点文字部分, point是标记点显示位置, icon是标记点显示的位置

    包含图标、文字内容的标记点

    let EmyIcon = new BMapGL.Icon(require("@/assets/img/people_line.svg"), new BMapGL.Size(35, 35));    // 显示的图标
    let Epoint = new BMapGL.Point(经纬度)    // 显示的位置
    let Emarker = new BMapGL.Marker(Epoint, {icon: EmyIcon});    // 合成marker点
    
    let offsetSize = new BMapGL.Size(-43, 18)    // 距Epoint偏移量
    let labelStyle = {    // 样式
        border: 'none',
        background: 'none',
        textAlign: 'center',
        width: '90px',
        whiteSpace: 'normal',
        textShadow: ' 0 0 0.2em #fff, 0 0 0.2em #fff',
        color: '#415a77',//rgb(63 53 200)
    }
    let label = new BMapGL.Label(‘显示的markder文字’, {offset: offsetSize, position: Epoint})
    label.setStyle(labelStyle)    // 设置样式
    // label.name = "emergencyAlarm"    // 给标记点添加名称
    Emarker.name = "emergencyAlarm"    // 给标记点添加名称,两者添加一个即可
    Emarker.setLabel(label)    
    Emarker.addEventListener("click", this.func.bind(this, args, args))    // 给标记点添加点击事件
    this.MAP.addOverlay(Emarker);    // 在地图上添加覆盖物
    this.MAP.centerAndZoom(new BMapGL.Point(经纬度), 10)    // 把地图中心挪到该点的位置 并缩放比例到10
    

    只包含文字内容的标记点(不需要图标时候,不用marker包裹)

    let point = new BMapGL.Point(经纬度)
    let content = '显示的文字'
    let label = new BMapGL.Label(content, {position: point})
    label.name = 'stakeMark'
    label.setStyle({                              // 设置label的样式
        color: '#fff',
        fontSize: '12px',
        background: 'green',
        padding: "0 3px",
        border: 'none'
    })
     map.addOverlay(label)
    


  2. 给地图添加轨迹

    let pl = new BMapGL.Polyline(轨迹经纬度列表,{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.8});
    
    trackAni = new BMapGLLib.TrackAnimation(that.winMap, pl, {
        overallView: true, // 动画完成后自动调整视野到总览
        tilt: 55,          // 轨迹播放的角度,默认为55
        duration: duration,   // 动画持续时长,默认为10000,单位ms
        delay: 0        // 动画开始的延迟,默认0,单位ms
    });
    // 开始轨迹动画
    trackAni.start();
    
    // 结束轨迹动画
    if (trackAni) {
        trackAni.cancel();         // 强制停止动画
    }
    


  3. 给标记点添加自定义动画(呼吸灯动画)

    1. 存储要添加动画的标记点

      // 显示的图标,添加css动画背景的话建议此图标为透明的
      let icon = new BMapGL.Icon(require("@/assets/img/people_line.svg"), new BMapGL.Size(35, 35));
      let point = new BMapGL.Point(经纬度)
      let marker = new BMapGL.Marker(point, {icon: icon});    // 合成marker点
      ...
      this.noEmergencyAlarmsMarks.push(marker)    // 将标记点存储下
      this.addHuxi()    // 步骤2,给标记点添加css
      this.MAP.addOverlay(marker);    // 在地图上添加覆盖物
      

    2. 给标记点dom添加class

      addHuxi() {
          this.noEmergencyAlarmsMarks.forEach(item => {
              setTimeout(() => {
                  item.domElement.classList.add('huxi')
              }, 1000)
          })
      }
      

    3. css动画

      .huxi{
        background: url("../assets/img/index/emergencyAlarms.gif") no-repeat!important;
        background-position: -15px -7px!important;
        width: 80px!important;
        height: 67px!important;
        background-size: 90% 67%!important;
        animation-name: breath;                         /* 动画名称 */
        animation-duration: 3s;                         /* 动画时长3秒 */
        animation-timing-function: ease-in-out;         /* 动画速度曲线:以低速开始和结束 */
        animation-iteration-count: infinite;            /* 播放次数:无限 */
        /* Safari and Chrome */
        -webkit-animation-name: breath;                 /* 动画名称 */
        -webkit-animation-duration: 3s;                 /* 动画时长3秒 */
        -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线:以低速开始和结束 */
        -webkit-animation-iteration-count: infinite;    /* 播放次数:无限 */
      }
      
      @keyframes breath {
        from { opacity: 0.1; }                          /* 动画开始时的不透明度 */
        50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
        to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */
      }
      
      @-webkit-keyframes breath {
        from { opacity: 0.1; }                          /* 动画开始时的不透明度 */
        50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
        to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */
      }
      


  4. 清除指定名称的标记点

    let allOverlay = map.getOverlays(); // 获取地图中所有的覆盖物
    
    allOverlay.forEach(overlay => { // 遍历覆盖物
        if (overlay.name === 'emergencyAlarm') {
                map.removeOverlay(overlay)    // 清楚该覆盖物
        }
    })
    


  5. 点击标记点事件后的弹窗

    第一步中点击事件:func()

    func(arg1, arg2) {
        let opts = {
            title: '标题',     // 信息窗口标题
        }
        let content = `
            <div>在这里填写要显示的文本内容,支持html和行内样式</div>
        `
        var infoWindow = new BMapGL.InfoWindow(content, opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow, new BMapGL.Point(item.alarmLongitude, item.alarmLatitude));        // 打开信息窗口
        map.setCenter(new BMapGL.Point(经纬度))    // 信息窗显示的位置
    }
    


暂时先记录这些,再有新实践后继续更新。

若有错误,烦请指出。

原文链接:https://blog.zhanghaoran.ren/article/html/BaiDuGISDiTuBiJi.html