百度地图api-marker-polyline 覆盖物展示和隐藏 以及自定义信息弹窗

效果：

核心代码：

绘制点函数

/**
 * @desc 添加百度坐标的的坐标点集合 点
 * @param {*} markerArr   
 *  [
        {
            "lng": 112.20285691889676,
            "lat": 31.020073171119044
        },
        {
            "lng": 112.2023275670428,
            "lat": 31.02135414948254
        }
    ],
 * @param {Object} iconOne 
 * @param {Number} sizeX 
 * @param {Number} sizeY 
 */
function addMutiPointWithIcon(markerArr, map, iconOne, sizeX, sizeY) {
  markerArr.forEach(item => {
    // 添加点坐标
    var myIcon = new BMapGL.Icon(iconOne, new BMapGL.Size(sizeX, sizeY), {
      anchor: new BMapGL.Size(sizeX / 2, sizeY)
    });
    // 创建Marker标注，使用图标
    var pt = new BMapGL.Point(item.lng, item.lat);
    var marker = new BMapGL.Marker(pt, {
      icon: myIcon,
    });
    marker.type=item.type
    // console.log('这是marker',marker)
    // 将标注添加到地图
    map.addOverlay(marker);
    marker.addEventListener("click", function () {
      if (infoBox) {
        // 关闭旧的
        infoBox.close()
      }
      let str = ''
      if (item.propoties && item.propoties.length) {
        let pros = ''
        item.propoties.forEach(pro => {
          pros +=
            `<div class="infoOne">
            <div class="key">${pro.key}：</div>
          <div class="value">${pro.value}</div>
          </div>`
        })
        str = `
        <div class="baiduPopup">
          <div class="head">
            <div class="title">
            详细信息
            </div>
          </div>
          <div class="main">
             ${pros}
          </div>
        </div>`
        let html = [str];
        infoBox = new BMapGLLib.InfoBox(map, html.join(""), {
          boxStyle: {
            background: "rgba(3,38,84,0.9)",
            width: "18vw",
            height: "30vh",
          },
          closeIconMargin: "1vh 1vh 0 0",
          closeIconUrl: iconClose,
          enableAutoPan: true,
          align: INFOBOX_AT_TOP,
          offset: new BMapGL.Size(0, 32)
        });
        infoBox.open(marker);
      }
      // else {
      //   str = `
      //   <div class="baiduPopup">
      //     <div class="head">
      //       <div class="title">
      //       详细信息
      //       </div>
      //     </div>
      //     <div class="main">
      //       <div class="infoOne">
      //        暂无信息
      //       </div>
      //     </div>
      //   </div>`
      // }
      map.flyTo(pt)
    });
  })
}

引用函数绘制点


绘制线函数

/* 
@desc 添加百度坐标的的坐标点集合 
*/
/**
 * 
 * @param {Array} featureArr 
 * @param {Object} map 
 * @param {String} color 
 */
function addLayerWithBaidu(featureArr, map, color,type) {
  featureArr.forEach(item => {
    let path = []
    item.forEach(items => {
      path.push(new BMapGL.Point(items.lng, items.lat))
    })
    var polyline = new BMapGL.Polyline(
      path, {
        strokeColor: color,
        strokeWeight: 3,
        strokeOpacity: 1,
      }
    );
    polyline.type=type
    // console.log('这是polyline',polyline);
    map.addOverlay(polyline);
  })
}

引用函数绘制线：

勾选展示隐藏：这里我用的是循环匹配去展示和隐藏的，因为百度地图api没有那种覆盖物层，暂时我只能通过这种方法来展示隐藏，若数据量较大的话可能需要优化，少量数据可使用流畅。