zoukankan      html  css  js  c++  java
  • 百度地图坐标只加载可视范围内的坐标

      因为客户需求加载的坐标点比较多,然而一次性加载太多点就会整个浏览器都会变卡,所以采用了分区加载的方法。

      首先,思路其实很简单

      1.先获取当前百度地图可视范围内的左上左下右下右上的4个顶点,然后塞入一个多边形对象里:

      var bounds = map.getBounds();                            //获取地图可视区域
      var sw = bounds.getSouthWest(); //获取西南角的经纬度(左下端点)
      var ne = bounds.getNorthEast(); //获取东北角的经纬度(右上端点)
      var wn = new BMap.Point(sw.lng, ne.lat); //获取西北角的经纬度(左上端点)
      var es = new BMap.Point(ne.lng, sw.lat); //获取东南角的经纬度(右下端点)

      var polygon = new BMap.Polygon([
        new BMap.Point(sw.lng,sw.lat),//左下
        new BMap.Point(wn.lng,wn.lat),//左上
        new BMap.Point(ne.lng,ne.lat),//右上
        new BMap.Point(es.lng,es.lat)//右下
      ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})

      2.我们需要一个方法判断你的点是否在该范围内(需要引用百度地图的GeoUtils.js):

      //判断点是否在范围内
      function IsInPolygon(x,y) {
      let point = new BMap.Point(x, y);
      if (BMapLib.GeoUtils.isPointInPolygon(point, polygon)) {
       console.log("在区域内");
       return true
       } else {
       console.log("不再区域内");
       return false
       }
      }

      3.添加缩放监听和拖动监听,然后在监听里循环判断你的坐标数据,如果在该范围就渲染出来,否则就不渲染:

      map.addEventListener("dragend",listenerFunc);
      map.addEventListener("zoomend",listenerFunc);
      function listenerFunc() {
       //监听地图
       for(let i=0;i<pointList.length;i++){
       if(IsInPolygon(pointList[i].x,pointList[i].y)){
       map.addOverlay(new BMap.Marker(pointList[i]));
       }
       }
      }

      这样就出效果啦。但是如果缩放等级比较大、显示的东西非常多的时候还是会卡的,所以还是点聚合比较流畅点,

    但是点聚合还是有点难用的,我就是显示坐标用了点聚合,显示坐标label文本框就用了这种方式,

    监听如果缩放等级>14时显示文本框。

    附上GeoUtils.js的百度网盘链接:

    链接:https://pan.baidu.com/s/1xFbkCE4H1zCfLlxnasFWmw
    提取码:cdt3 

  • 相关阅读:
    6、UITableView表的分割线左对齐
    5、清理mac缓存和关闭后台运行程序
    1、iOS9 HTTP 不能正常使用的解决办法
    在ios下提示“@synthesize of ‘weak’ property is only allowed in ARC or GC mode”
    java中的String类
    java思考题
    java思考
    java动手动脑思考
    大道至简第二章读后感
    JAVA训练参数求和
  • 原文地址:https://www.cnblogs.com/LinTianwen/p/13070770.html
Copyright © 2011-2022 走看看