百度地图 js-sdk缩放等级低的时候先展示聚合标签，点击label或者缩放等级高了展示详细描点

落雨
895 阅读2分钟

需求是刚进入地图页面时，或者当地图缩放级别低的时候展示聚合的标签，当点击某个聚合的标签，或者地图缩放级别变大时展示具体的描点，具体的描点直接通过对应坐标创建marker 添加到地图上边就可以，聚合的标签可以使用百度地图提供的Label类创建Label添加到地图上边，然后再监听地图缩放级别变化添加点或者label

异步加载百度地图

function loadBmapScript() {      
    var script = document.createElement("script");      
    script.src ="https://api.map.baidu.com/api?v=3.0&type=webgl&ak=aIewq9X7ZbFFG887WG6yICdE82qXmj91&callback=init";      
     document.body.appendChild(script);    
}    
loadBmapScript();

创建百度地图

var map = new BMapGL.Map("mapContainer");
map.centerAndZoom(new BMapGL.Point(118.060233, 36.819568), 10);
map.enableScrollWheelZoom();//启用滚轮缩放map.enableAutoResize();
map.setMinZoom(10);//设置最小的缩放级别

设置城市边界

 //设置城市边界      
function setCityBorder() {        
    //创建查询区划边界        
    const bdary = new BMapGL.Boundary();        
    //查询区划边界，最小范围区县        
    bdary.get("淄博", (rs) => {          
        //创建多边形覆盖物          
        const ply = new BMapGL.Polygon(rs.boundaries[0], {            
            strokeWeight: 2, //设置多边形边线线粗            
            //fillColor: "", 3.0设置空还是会有填充色，所以设置fillOpacity为0消除填充色            
            fillOpacity: 0,            
            strokeOpacity: 1, //设置多边形边线透明度0-1            
            strokeStyle: "dashed", //设置多边形边线样式为实线或虚线，取值 solid 或 dashed
            strokeColor: "blue", //设置多边形边线颜色            
            enableMassClear: false, //禁止清除            
            enableClicking: false, //禁止点击事件          
        });          
        map.addOverlay(ply); //添加覆盖物          
        //根据提供的地理区域或坐标设置地图视野，调整后的视野会保证包含提供的地理区域或坐标
        map.setViewport(ply.getPath());        
    });      
}

监听百度地图

zoomend事件

//监听mapzoomend事件      
map.addEventListener("zoomend", handleZoomChange);
function handleZoomChange() {        
    //获取地图缩放级别        
    const zoomLevel = map.getZoom();        
    if (zoomLevel >= 13) {          
        isLabel = false;          
        //已经创建过marker直接返回          
    if (isMarker) return;          
        // 清除覆盖物          
        map.clearOverlays();          
        addMarkers();          
        isMarker = true;        
    } else if (zoomLevel < 13) {          
        isMarker = false;          
        //已经创建过label直接返回          
        if (isLabel) return;          
        map.clearOverlays();          
        addLabels();          
        isLabel = true;        
    }      
}

添加聚合label

   //添加label      
function addLabels() {        
    regions.forEach(addLabel);      
}      
function addLabel(region) {        
    const points = region.gis.split(",");        
    const point = new BMapGL.Point(points[0], points[1]);        
    //创建label        
    const label = new BMapGL.Label(`<div class="label-wrapper"><p>${region.regionName}</p><p>${region.value}</p></div> `, { position: point,});        
    //重置label的默认样式        
    label.setStyle({ border: "0px", backgroundColor: "transparent" });        
    //添加label到地图上        
    map.addOverlay(label);        
    //监听label点击事件,修改地图缩放级别，并且设置地图中心点为ppoint对应坐标        
    label.addEventListener("click", () => {map.centerAndZoom(point, 14);});      
}

添加点

 //添加地图上的点      
function addMarkers() {        
    projects.forEach(addMarker);      
}      
function addMarker(project) {        
    const gis = project.gis.split(",");        
    const point = new BMapGL.Point(gis[0], gis[1]);        
    //创建地图上的点        
    const marker = new BMapGL.Marker(point); // 创建标注        
    //添加点到地图        
    map.addOverlay(marker);        
    const content = `<div class="info-wrapper"><table><tr><td width="120">项目名称：</td><td>${project.name}</td></tr></table></div>`;        
    //创建信息框        
    const infoWindow = new BMapGL.InfoWindow(content);        
    //监听marker的点击事件，打开infowindow        
    marker.addEventListener("click", () => { map.openInfoWindow(infoWindow, point);});
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #mapContainer {
        width: 100vw;
        height: 100vh;
      }
      .label-wrapper {
        display: flex !important;
        padding: 5px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        text-align: center;
        border: 0px !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #1d5fcd;
        color: white;
        box-shadow: 0 0 15px inset #a6a9ad;
        opacity: 0.8;
      }
      .label-wrapper p {
        margin: 0;
      }
      .info-wrapper {
        padding: 10px;
        width: 400px;
        max-height: 250px;
        overflow-y: auto;
        box-sizing: border-box;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      tr td {
        padding: 8px;
        border: 1px solid #a6a9ad59;
      }
      .BMap_bubble_content {
        width: 400px !important;
      }
    </style>
  </head>
  <body>
    <div id="mapContainer"></div>
  </body>
  <script>
    function loadBmapScript() {
      var script = document.createElement("script");
      script.src =
        "https://api.map.baidu.com/api?v=3.0&type=webgl&ak=你的ak&callback=init";
      document.body.appendChild(script);
    }
    loadBmapScript();
    const regions = [
      {
        gis: "118.060233,36.819568",
        regionName: "张店区",
        value: 10,
        regionCode: "370303000000",
      },
      {
        gis: "117.873034,36.809225",
        regionName: "周村区",
        value: 20,
        regionCode: "370306000000",
      },
      {
        gis: "117.971687,36.649142",
        regionName: "淄川区",
        value: 40,
        regionCode: "370302000000",
      },
      {
        gis: "117.87882,36.506187",
        regionName: "博山区",
        value: 50,
        regionCode: "370304000000",
      },
      {
        gis: "118.315396,36.832987",
        regionName: "临淄区",
        value: 70,
        regionCode: "370305000000",
      },
      {
        gis: "118.103288,36.964917",
        regionName: "桓台县",
        value: 80,
        regionCode: "370321000000",
      },
      {
        gis: "117.833393,37.177958",
        regionName: "高青县",
        value: 12,
        regionCode: "370322000000",
      },
      {
        gis: "118.175189,36.191149",
        regionName: "沂源县",
        value: 86,
        regionCode: "370323000000",
      },
      {
        gis: "117.882502,36.720789",
        regionName: "文昌湖",
        value: 65,
        regionCode: "370343000000",
      },
      {
        gis: "117.99948,36.7886",
        regionName: "经开区",
        value: 23,
        regionCode: "370342000000",
      },
      {
        gis: "118.060729,36.848283",
        regionName: "高新区",
        value: 78,
        regionCode: "370341000000",
      },
    ];
    const projects = [
      {
        gis: "118.060233,36.819568",
        name: "测试",
        regionName: "张店区",
        regionCode: "370303000000",
      },
      {
        gis: "117.873034,36.809225",
        name: "哈哈哈哈",
        regionName: "周村区",
        regionCode: "370306000000",
      },
      {
        gis: "117.971687,36.649142",
        name: "啊啊啊啊啊",
        regionName: "淄川区",
        regionCode: "370302000000",
      },
      {
        gis: "117.87882,36.506187",
        name: "博山区测试啊",
        regionName: "博山区",
        regionCode: "370304000000",
      },
      {
        gis: "118.315396,36.832987",
        name: "临淄区有个点",
        regionName: "临淄区",
        regionCode: "370305000000",
      },
      {
        gis: "118.103288,36.964917",
        name: "恒台县也有哦",
        regionName: "桓台县",
        regionCode: "370321000000",
      },
      {
        gis: "117.833393,37.177958",
        name: "我是高青县的傲",
        regionName: "高青县",
        regionCode: "370322000000",
      },
      {
        gis: "118.175189,36.191149",
        name: "沂源县好远傲",
        regionName: "沂源县",
        regionCode: "370323000000",
      },
      {
        gis: "117.882502,36.720789",
        name: "文昌湖旅游区傲",
        regionName: "文昌湖",
        regionCode: "370343000000",
      },
      {
        gis: "117.99948,36.7886",
        name: "经济开发来凑个热闹",
        regionName: "经开区",
        regionCode: "370342000000",
      },
      {
        gis: "118.060729,36.848283",
        name: "我是高新区的傲",
        regionName: "高新区",
        regionCode: "370341000000",
      },
    ];
    function init() {
      var map = new BMapGL.Map("mapContainer");
      map.centerAndZoom(new BMapGL.Point(118.060233, 36.819568), 10);
      map.enableScrollWheelZoom();
      map.enableAutoResize();
      map.setMinZoom(10);
      setCityBorder();
      //监听mapzoomend事件
      map.addEventListener("zoomend", handleZoomChange);
      let isLabel = false;
      let isMarker = false;
      function handleZoomChange() {
        //获取地图缩放级别
        const zoomLevel = map.getZoom();
        if (zoomLevel >= 13) {
          isLabel = false;
          //已经创建过marker直接返回
          if (isMarker) return;
          // 清除覆盖物
          map.clearOverlays();
          addMarkers();
          isMarker = true;
        } else if (zoomLevel < 13) {
          isMarker = false;
          //已经创建过label直接返回
          if (isLabel) return;
          map.clearOverlays();
          addLabels();
          isLabel = true;
        }
      }
      //设置城市边界
      function setCityBorder() {
        //创建查询区划边界
        const bdary = new BMapGL.Boundary();
        //查询区划边界，最小范围区县
        bdary.get("淄博", (rs) => {
          //创建多边形覆盖物
          const ply = new BMapGL.Polygon(rs.boundaries[0], {
            strokeWeight: 2, //设置多边形边线线粗
            //fillColor: "", 3.0设置空还是会有填充色，所以设置fillOpacity为0消除填充色
            fillOpacity: 0,
            strokeOpacity: 1, //设置多边形边线透明度0-1
            strokeStyle: "dashed", //设置多边形边线样式为实线或虚线，取值 solid 或 dashed
            strokeColor: "blue", //设置多边形边线颜色
            enableMassClear: false, //禁止清除
            enableClicking: false, //禁止点击事件
          });
          map.addOverlay(ply); //添加覆盖物
          //根据提供的地理区域或坐标设置地图视野，调整后的视野会保证包含提供的地理区域或坐标
          map.setViewport(ply.getPath());
        });
      }
      //初始化执行一次
      //handleZoomChange();
      //添加地图上的点
      function addMarkers() {
        projects.forEach(addMarker);
      }
      function addMarker(project) {
        const gis = project.gis.split(",");
        const point = new BMapGL.Point(gis[0], gis[1]);
        //创建地图上的点
        const marker = new BMapGL.Marker(point); // 创建标注
        //添加点到地图
        map.addOverlay(marker);
        const content = `<div class="info-wrapper">
                        <table>
                            <tr>
                                <td width="120">项目名称：</td>
                                <td>${project.name}</td>
                            </tr>
                        </table>
                       </div>`;
        //创建信息框
        const infoWindow = new BMapGL.InfoWindow(content);
        //监听marker的点击事件，打开infowindow
        marker.addEventListener("click", () => {
          map.openInfoWindow(infoWindow, point);
        });
      }
      //添加label
      function addLabels() {
        regions.forEach(addLabel);
      }
      function addLabel(region) {
        const points = region.gis.split(",");
        const point = new BMapGL.Point(points[0], points[1]);
        //创建label
        const label = new BMapGL.Label(
          `<div class="label-wrapper"><p>${region.regionName}</p><p>${region.value}</p></div> `,
          {
            position: point,
          }
        );
        //重置label的默认样式
        label.setStyle({ border: "0px", backgroundColor: "transparent" });
        //添加label到地图上
        map.addOverlay(label);
        //监听label点击事件,修改地图缩放级别，并且设置地图中心点为ppoint对应坐标
        label.addEventListener("click", () => {
          map.centerAndZoom(point, 14);
        });
      }
    }
  </script>
</html>
avatar
文章
阅读
粉丝