高德地图聚合效果

最近项目中遇到用高德制作地图，针对聚合的效果，将一下实现的一些思路。
高德的聚合使用的是AMap.MarkerClusterer，详细的参数设置和说明，可以参考官网的api，这边只根据自己的需求，贴上部分代码

效果：https://kaixin51.github.io/other/cluster.html

需求：在很小的层级时，需要聚合元素，显示这个图标中有多少个元素，单一元素的时候显示该元素，并根据是否预警设置闪烁的效果。
其中高德的闪烁效果实现大致有以下几种方式
1.用Marker的content 自定义一个闪烁效果
2.直接一个gif的图片做闪烁小狗
3.一个定时器自主控制闪烁
4.canvasLayer 去设计一个闪烁图层
这边打算用Marker的content属性来实现，因为聚合图层返回的对象就是一个个的Marker，所以考虑到方案的简便性还是选择了content

下面贴上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=你自己的高德key&plugin=AMap.GeoJSON"></script><script type="text/javascript" src="js/jquery.3.5.1.js"></script>
</head>
<body>
<div id="map" style="width: 100%;height:500px;"></div>
</body>
<script>var map = new AMap.Map('map', {zoom: 16,//级别center: [119.9494600, 29.3449200],//中心点坐标viewMode: '2D'//使用3D视图});let clusterLayer;$.ajax({url: 'json/pool.json', //这里就是一组接口返回的数据对象，{status:0,message:[{longitude:121,latitude:31,projectName:'项目名称'}]}type: 'get',dataType: 'json',success: function (result) {if (result.status === 0) {let markers = [];result.message.forEach(element => {if (element.longitude && element.latitude) {markers.push({lnglat: [element.longitude, element.latitude], // 点的经纬度weight: 1, //权重高的将作为聚合的中心点entity: element})}})let icon = 'image/三角形.png'let markerClusterOption = {gridSize: 100,// 聚合像素maxZoom: 16, //当大到该层级后不再聚合renderClusterMarker: function (data) { // 聚合点样式设置data.marker.setIcon(icon)if (data.count > 1) {data.marker.setLabel({content: data.count,direction: "right",// 在 direction 基础上的偏移量offset: [-20, -30]})}return data.marker},renderMarker: function (data) { // 非聚合点样式// 高德聚合图层中  非聚合点默认 setAnchor：top-left offset并不是（0,0）而是根据图片设置了一个特定的偏移，出现定位点不准确，请自行根据图片调整offsetdata.marker.setIcon(icon)if (data.data[0].entity.projectName === '测试1') {// console.log(data.marker)data.marker.setAnchor('top-left') // Anchor和offset 最好设置一下，不然点不在对应的位置，出现偏移data.marker.setOffset(new AMap.Pixel(0, -16))data.marker.setContent('<div class="marker-route"><div class="marker-title">' + data.data[0].entity.projectName + '</div><div><img class="breath_light" src="' + icon + '"/></div></div>')console.log(data.marker)} else {data.marker.setAnchor('top-left') // Anchor和offset 最好设置一下，不然点不在对应的位置，出现偏移data.marker.setOffset(new AMap.Pixel(0, 0))data.marker.setLabel({content: data.data[0].entity.projectName,direction: "right",// 在 direction 基础上的偏移量offset: [-20, -30]})}data.marker.setExtData(data.data[0].entity)return data.marker}}map.plugin(["AMap.MarkerClusterer"], function () {clusterLayer = new AMap.MarkerClusterer(map, markers, markerClusterOption);});// var marker = new AMap.Marker({//     position: new AMap.LngLat(120.0830600, 29.2075300),//     icon: 'image/三角形.png'// })// marker.setLabel({//     content: '测试',//     direction: "right",//     // 在 direction 基础上的偏移量//     offset: [-20, -30]// })// marker.setMap(map)// console.log(marker)}}})
</script>
<style>.amap-marker-label {border: none !important;background-color: inherit !important;color: black;}.marker-title {color: black;width: 100px;height: 20px;top:-32px;font-size: 12px;/*right:-40px;*//*position: absolute;*/}.breath_light {opacity: 0.1; /* 不透明度 */overflow: hidden; /* 背景色 *//* margin: 25% auto; */ /* 外边距 *//* IE10、Firefox and Opera，IE9以及更早的版本不支持 */animation-name: breath; /* 动画名称 */animation-duration: 700ms; /* 动画时长3秒 */animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */animation-iteration-count: infinite; /* 播放次数：无限 *//* Safari and Chrome */-webkit-animation-name: breath; /* 动画名称 */-webkit-animation-duration: 700ms; /* 动画时长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;}/* 动画结束时的不透明度 */}
</style>
</html>

高德地图聚合效果相关推荐

vue+openlayer实现地图聚合效果和撒点效果
前言: openlayer是目前我们gis常用的一款开源的,并且反馈都特别好的软件了,像之前的ol3, 风靡一时,地图实现也很简单,很实用,目前vue中使用地图也是非常多的,那么如果在vue中引入o ...
高德地图聚合点，增加所有点击标记，点击后展示该聚合点下所有信息
高德地图聚合点,增加所有点击标记,点击后展示该聚合点下所有信息使用高德地图图片下面是部分代码,如有不懂,留言结束使用高德地图 *1.首先去注册https://lbs.amap.com/api ...
BottomSheetBehavior实现高德地图首页效果之原理篇
1. 引言 BottomSheetBehavior能实现怎样的效果,一图胜千言. 如果仅仅是实现上下拖动和隐藏的功能.抛开BottomSheetBehavior自己实现也不难,在没有Coordinat ...
高德地图聚合android,GitHub - lingyanluoxue/android-togetherMap: 实现高德地图的marker聚合功能...
android-togetherMap 本文我将讲解一下我最近实现的高德地图Marker的聚合功能.在项目开发中需要使用到地图Marker的聚合功能,但是高德地图并没有实现对Marker的聚合功能,所 ...
安卓高德地图聚合点击事件_滴滴接入第三方平台服务商，试水聚合，又是一场新的运力争夺？...
文| AI财经社王妍编辑| 张硕 [本文由AI财经社原创出品,未经许可,任何渠道.平台请勿转载.违者必究.] 继高德地图.百度地图.美团之后,聚合模式的出行新战场,又迎来了大玩家. AI财经社了解 ...
高德地图聚合点删除_高德地图点聚合功能（Adnroid）
1.需求: 接下来的项目要实现像链家APP中地图看房的功能(效果如下图). 链家APP地图找房效果 2.实现思路.查阅资料看到这个效果图,首先想到的是在view上放一个marker,但是marker ...
android 高德地图动画,使用MotionLayout实现高德地图bottomSheets效果
高德效果搜到的一个效果,附上链接,用的behavior,我没下源码看,因为我只是想尝试另外一种方式.具体效果暂不知Android 仿高德地图可拉伸的BottomSheet 以下是我用motionla ...
vue-cli3.0引入高德地图3d效果两种方法+实例+填坑
前言: 因为项目需要引入高德地图的3d效果,找了很多资料,在这里记录下方法和实例组件 ***注意: 因为两个方法代码量都特别大,这里分2个页面详细说一下,方法一是链接出去专门说,最下面有更多资料,高德 ...
安卓高德地图聚合点击事件_滴滴进攻，华为入场，互联网地图迎来大变局|深响独家...
©深响原创 · 作者|丁直仁核心要点市场可能高估了美团与滴滴之间的冲突,而低估了滴滴与高德之间的竞争. 从去年下半年开始,华为便在组建自己的地图团队. 腾讯地图或因数据质量问题遭遇考验: ...
仿高德地图首页效果，简单代码实现
2021/11/10日高德的首页效果是这样的然后我的效果关键代码 behavior.addBottomSheetCallback(object : BottomSheetBehavior.Bott ...

高德地图聚合效果

高德地图聚合效果相关推荐

最新文章

热门文章

高德地图 聚合效果

高德地图 聚合效果相关推荐

最新文章

热门文章

高德地图聚合效果

高德地图聚合效果相关推荐