精华内容
下载资源
问答
  • 高德地图点聚合

    2021-04-06 14:27:47
    点聚合
    <!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <title>点聚合</title>
        <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
        <style>
            html,
            body,
            #container {
                height: 100%;
                width: 100%;
            }
    
            .input-card {
                width: 25rem;
            }
    
            .input-card .btn {
                width: 7rem;
                margin-right: .7rem;
            }
    
            .input-card .btn:last-child {
                margin-right: 0;
            }
        </style>
    </head>
    
    <body>
        <div id="container" class="map" tabindex="0"></div>
        <div class="input-card">
    
        </div>
        <script src="//a.amap.com/jsapi_demos/static/china.js"></script>
        <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.MarkerClusterer"></script>
        <script type="text/javascript">
            var cluster, markers = [];
    
            var map = new AMap.Map("container", {
                resizeEnable: true,
                center: [105, 34],
                zoom: 4
            });
            console.log(points);
            var startIcon = new AMap.Icon({
                size: new AMap.Size(40, 40),
                image: 'https://ship.png',
                imageSize: new AMap.Size(40, 40),
            });
            var labelOffset = new AMap.Pixel(-15, -15);
            for (var i = 0; i < points.length; i += 1) {
                markers.push(new AMap.Marker({
                    position: points[i]['lnglat'],
                    offset: new AMap.Pixel(-15, -15),
                    icon: startIcon,
                    label: {
                        content: i,
                        offset: labelOffset,
                    }
                }))
            }
            console.log(markers);
    
            var count = markers.length;
            addCluster(2);
    
            function addCluster(tag) {
                if (cluster) {
                    cluster.setMap(null);
                }
                cluster = new AMap.MarkerClusterer(map, markers);
            }
        </script>
    </body>
    
    </html>

     

    展开全文
  • 高德地图点聚合多个车辆的定位高德地图点聚合多个车辆的定位高德地图点聚合多个车辆的定位高德地图点聚合多个车辆的定位高德地图点聚合多个车辆的定位
  • 高德地图点聚合,聚合点点击事件,一切效果都需要您自己的key值,单点点击事件,点聚合点击事件后信息窗体每个点添加点击事件。
  • 高德地图点聚合效果

    2017-08-16 09:56:28
    使用高德地图完成点聚合效果
  • 最近需要实现地图的点聚合功能,由于刚开始项目中使用的是高德地图,查看Android高德地图的官方文档,发现没有这个功能,要自己实现了,下面把demo源码贴出来供大家参考!
  • vue高德地图点聚合

    千次阅读 2020-04-22 15:07:49
    点聚合: 可以在不同的地图缩放级别对海量的数据点进行聚合展示,点聚合插件可以支持10万个点,性能良好。 未做聚合之前(此为测试数据,GPS在陆地上): 以下开始使用点聚合尝试一下: 点聚合代码 var _rende...
    遇到的问题:

    因为需要展示渔船估计,因为早期渔船上面的GPS是10分钟上传一个经纬度点,所以在地图上展示经纬度点非常多,显得非常密集。解决这些密集点的办法就是通过点聚合来做。
    点聚合: 可以在不同的地图缩放级别对海量的数据点进行聚合展示,点聚合插件可以支持10万个点,性能良好。
    官方文档
    未做聚合之前(此为测试数据,GPS在陆地上):
    在这里插入图片描述

    以下开始使用点聚合尝试一下:

    在这里插入图片描述
    点聚合代码

       var _renderClusterMarker = function(context) {
            var div = document.createElement('div')
            var size = 10
            div.style.backgroundColor = '#ffffff'
            div.style.width = div.style.height = size + 'px'
            div.style.border = 'solid red 2px'
            div.style.borderRadius = size / 2 + 'px'
            context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
            context.marker.setContent(div)
          }
          const that = this
          this.map.plugin(['AMap.MarkerClusterer'], function() {
            that.cluster = new AMap.MarkerClusterer(
              that.map, // 地图实例
              that.markerArray, // 海量点组成的数组
              {
                gridSize: 30,
                zIndex: 2,
                zoomOnClick: false,
                renderClusterMarker: _renderClusterMarker
              })
          })
    

    聚合点的点击事件

         this.cluster.on('click', (cluster, lnglat, target, markers) => {
           console.log(cluster.lnglat.lat)
          }
          )
    

    聚合后的效果:
    缩小后只剩两个点
    在这里插入图片描述
    接着放大,点变多
    在这里插入图片描述
    聚合后的坏处:
    的确随着地图的放大、缩小可以展示不同数量的经纬度点,本项目的经纬度点可以点击展示经纬度信息、渔船信息等,但是采用点聚合后的经纬度不再是渔船GPS真正上传的经纬度,而是周边gridSize范围内的点聚合的结果。当然如果不是需要准确的点,采用点聚合效果还是非常理想的~

    展开全文
  • 高德地图点聚合分组

    2020-11-18 15:23:24
    因为高德地图的API是不提供分组功能的,如果我放一个麦当劳和肯德基的图标会自动聚合,但这并不是我想要的。 所以我就在render的时候手动筛选出这个聚合点的麦当劳和肯德基有多少个,直接把这个聚合点使用Dom进行...

    在这里插入图片描述
    在这里插入图片描述
    因为是公司项目所以只能放部分代码片段。
    这边说一下思路。

    因为高德地图的API是不提供分组功能的,如果我放一个麦当劳和肯德基的图标会自动聚合,但这并不是我想要的。
    所以我就在render的时候手动筛选出这个聚合点的麦当劳和肯德基有多少个,直接把这个聚合点使用Dom进行替换。

    //这里说一下iconList是我这些图标的数组对象。
    // point是存放各种经纬度的,我进行筛选的
      this.iconList.map((item) => {
            if (item.checked) {
              if (this.point.data[item.desc].length > 0) {
                for (let el of this.point.data[item.desc]) {
                  let icon = new AMap.Icon({
                    size,
                    image: item.url,
                    imageSize: size,
                  });
                  // 添加一些分布不均的点到地图上,地图上添加三个点标记,作为参照
                  let marker = new AMap.Marker({
                    icon: icon,
                    position: [el.longitude, el.latitude],
                    extData: { flag: item.desc, ...el },
                    // shadow: shadow,
                    offset: new AMap.Pixel(-18, -18), //设置文本标注偏移量
                    // content: `<div class='info'>${item.departName}</div>`, //设置文本标注内容
                    // direction: 'right' //设置文本标注方位
                  });
    
                  markers.push(marker);
                } //for循环括号
              } //if
            }
            // iconList循环结束
          });
          //marker里面最主要的就是extData存放一个标识符能进行分组筛选
          map.plugin(["AMap.MarkerClusterer"], () => {
            this.cluster = new AMap.MarkerClusterer(
              map, // 地图实例
              markers, // 海量点组成的数组
              {
                zoomOnClick: false,
                renderClusterMarker: (ctx) => {
                  let str = ``;
                  let arr = [];
                  // 深拷贝
                  this.deepClone(this.iconList, arr);
                  //
                  arr.map((item) => {
                    // 把所有点都塞到对应的对象里面
                    item.list = [];
                    this.deepClone(
                      ctx.markers.filter((item1) => {
                        return item1.getExtData().flag == item.desc;
                      }),
                      item.list
                    );
                  });
                  // 循环添加dom
                  let indexList = [];
                  arr.map((item, index) => {
                    if (item.list && item.list.length > 0) {
                      indexList.push(item.desc);
                      // 判断当前品牌在地图上展示的索引
                      let zIndex = indexList.indexOf(item.desc);
                      str += `<div class="cluster-box" style="top:${
                        zIndex * 18 + 24
                      }px">
                        <img class="cluster-logo" src="${item.img}"  />
                        <img class="cluster-border" src="${border}" >
                        <div class="cluster-num">${item.list.length}</div>
                       </div>`;
                    }
                  });
    
                  str = `<div style="position:relative;width:65px;height:${
                    indexList.length * 22
                  }px">${str}</div>`;
                  ctx.marker.setContent(str);
                  // ctx.markers[1].show()
                },
              }
            );
          });
    
    展开全文
  • 高德点聚合

    其实说自定义呢也只是稍微修改了一点官方提供的代码

    好吧,说重点:
    1.下载官方的点聚合源码,地址为:https://github.com/amap-demo/android-cluster-marker

    2.将里面主要的几个文件复制到项目中。还有demo中的那个RegionItem也要一起。

    这里写图片描述

    3.其实这样可以简单的实现点聚合了,不过是官方默认的实现的方法:

    List list = new ArrayList();
    for (int i = 0; i < 10000; i++) {
              LatLng latLng = new LatLng(x, y, false);
              RegionItem regionItem = new RegionItem(latLng, title);
              list.add(regionItem);
        }
    mClusterOverlay=newClusterOverlay(map,list,dp2px(50,getActivity()),getActivity());

    4.以下就是自己的改动了,在 RegionItem里面加一个属性为icon;再在接口ClusterItem里面添加一个方法来获取这个icon,对应的在RegionItem里面实现这个方法回图片。

    这里写图片描述

    5.接下来就是重要的一步了,在ClusterOverlay中找到addSingleClusterToMap()方法,这个方法就是加载marker的,将其参数添加一个bitmap。然后将传进来的这个bitmap转换为BitmapDescriptor设置到markerOptions的icon里面。

    private void addSingleClusterToMap(Cluster cluster, Bitmap bitmap) {
            BitmapDescriptor bitmap1 = BitmapDescriptorFactory.fromBitmap(bitmap);
            LatLng latlng = cluster.getCenterLatLng();
            MarkerOptions markerOptions = new MarkerOptions();
            markerOptions.anchor(0.5f, 0.5f)
                    .icon(bitmap1).position(latlng);
            Marker marker = mAMap.addMarker(markerOptions);
            marker.setAnimation(mADDAnimation);
            marker.setObject(cluster);
    
            marker.startAnimation();
            cluster.setMarker(marker);
            mAddMarkers.add(marker);
        }

    6.这个时候整个类会出现两个地方报错,一个在上面,一个在下面,先说上面这个。报错的方法为addClusterToMap(),他调用了addSingleClusterToMap()方法,需要多传一个bitmap。这时候最开始传进RegionItem里面的那个icon就有用了,这个icon可以是网络图片,也可以是本地图片,反正自己看着办。
    通过方法传进来的list集合clusters,可以拿到集合点所有的RegionItem,在通过RegionItem拿出穿进去的图片,或下载,或读取。然后设置进addSingleClusterToMap()方法。

    提示:如果是通过网络下载的图片,最好统一下载好,存在某个集合中,最后在提取,不然当图标刷新时会一直闪。最好再写一个三级缓存,免得每次刷新都需要下载图片。而且下载没必要开线程或者异步,因为本来就在子线程中。

    private void addClusterToMap(List<Cluster> clusters) {
    
            ArrayList<Marker> removeMarkers = new ArrayList<>();
            removeMarkers.addAll(mAddMarkers);
            AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
            MyAnimationListener myAnimationListener = new MyAnimationListener(removeMarkers);
            for (Marker marker : removeMarkers) {
                marker.setAnimation(alphaAnimation);
                marker.setAnimationListener(myAnimationListener);
                marker.startAnimation();
            }
            Map map = new HashMap();
            //List<Bitmap> list = new ArrayList<>();
            for (int i = 0; i < clusters.size(); i++) {
                Cluster cluster = clusters.get(i);
                // 将InputStream转换成Bitmap
                CacheUtils utils = new CacheUtils();
                Bitmap bitmap = null;
                bitmap = utils.getImageFromCache(cluster.getClusterItems().get(0).getIcon());//三级缓存的工具类来获取图片。
                map.put(i, bitmap);//存map集合是因为有时候下载失败,bitmap会为null,设置进地图后会显示默认图标,特别丑,所以存个map,只把有值的存进去,而且是一一对应。
                //list.add(bitmap);
            }
            for (Object i : map.keySet()) {
                if (map.get(i) != null) {
                    addSingleClusterToMap(clusters.get((Integer) i), (Bitmap) map.get(i));
                }
            }
        }

    7.下面那个报错也是同理,虽然不知道有什么用,先改了再说。

    Cluster cluster = (Cluster) message.obj;
    CacheUtils utils = new CacheUtils();
    Bitmap bitmap = null;
    bitmap = utils.getImageFromCache(cluster.getClusterItems().get(0).getIcon());
    addSingleClusterToMap(cluster, bitmap);

    8.最后在需要的地方按最开始的方法添加就是了,只是多传一个icon就好了。

    总结:最主要的就是addSingleClusterToMap()方法,这个方法在设置图标,然后还有cluster.getClusterItems()方法,这个方法能获得当前聚合点所有的内容。然后想实现什么自己改就可以了。虽然我没有看懂他是怎么实现的,但是确实可以改出来,嘿嘿嘿。只是下载图片的时候会耗时,在这个过程中地图会是白的,在考虑考虑怎么优化吧

    展开全文
  • 然后想添加一个点聚合功能,聚合功能可以实现,但是自定义的标点还在地图上, <code>var data_point_x = 116.306771, data_point_y = 31.653254; var cluster, markers = [],...
  • 高德地图官方api:https://lbs.amap.com/api/javascript-api/reference/plugin#AMap.MarkerClusterer 开始要先引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己的...
  • 更具产品需求,需要做一个地图显示房源信息的功能 先展示吧: 一开始看文档怎么也找不到AMap的IndexCluster插件,只好直接从案例入手了,要想跑通那必须先找案例数据结构,看了下js原来是有2个JSON数据,一个是...
  • 整个APP使用kotlin语言的方式实现高德地图地图点选、点聚合、地图截图、地图文字标注、地图基本操作、地图Marker自定义,Marker自定义弹窗、地图轨迹管理、轨迹平滑处理、Marker平滑移动、多类型路径规划、定位、...
  • 高德地图 点聚合功能(Adnroid)

    万次阅读 2017-05-25 10:07:53
    要实现像链家APP中地图看房的效果
  • 高德点聚合的demo直接复制下来,报错。 39行少了http头,添加上 <script src="http://a.amap.com/jsapi_demos/static/china.js"></script> 40行改为自己的ak <script type="text/javascript" ...
  • Android 高德地图自定义点聚合marker图片及Overlay点击选中功能的代码实现及布局文件
  • 高德地图删除点聚合

    2021-02-04 18:25:26
    点击绘制清除地图上的所有聚合,开始绘制轨迹路线,点击销毁清除地图上的轨迹路线,展示聚合,快进快推、开始暂停、回到起点直达终点是轨迹展示的功能组件,主要用于控制巡航器,有需要可以看一下 初始化聚合...
  • 高德地图区划聚合+海量展示

    千次阅读 2019-07-03 16:42:09
     区划聚合+海量展示    html,  body,  #container {  width: 100%;  height: 100%;  margin: 0px;  }    #loadingTip {  position: absolute;  z-index: 9999;  top: 0;  left: 0; ...
  • 高德地图API点聚合样式自定义

    千次阅读 2019-12-18 09:39:25
    高德地图API点聚合样式自定义官方呈现效果最后一层marker图标自定义 官方呈现效果 官方提供的API可以完成聚合样式的自定义设置,但是对于下图标记所示的最后一层marker的样式却未提供图标自定义方法。 最后一层...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 121
精华内容 48
关键字:

高德地图点聚合