高德地图关于多类图标点切换问题

本是古典何须时尚 2024-04-01 16:46 167阅读 0赞

撒点方式:①海量撒点 ②marker撒点

需要考虑的问题:

什么时候需要海量撒点？海量撒点能干啥？

什么时候需要marker撒点？marker撒点能干啥？

近期遇到一个问题把撒36种图标

我第一个印象是用海量撒点，但越到后来越偏离了方向，干啥都是海量，好像是为了满足自己的好奇心。当时我为了切换多类点在javascript用过3维数组、用过72个对象，每次点击都生成对象，最后奇迹的实现了，造成的结果是项目运行慢。这个36个图标的点一年超不过20起，就算过70年也不会超过1000起。我深刻进行自我检讨。最后经过老的的点播和提点我毅然采用了marker对象撒点。

marker 多类切换点 与 海量撒点 多类切换的区别

①当都用一个数组并分配类型撒点到地图上时，都是正常的；当我海量撒点时我点击切换点的类型时会把这个数组里的点的类型改为切换的类型；当我用marker多类切换点时，我可以点击的时候查出我想要点的数据并分配类型，其他的图层都给清空，比海量轻松了不少

②海量撒点撒多个点需要生成多个对象，这是他骨子里造成的；而marker能够按照自己的意向去做处理

③海量针对千以上的数据，而marker 普通的可以用

④做实时数据时，maker可以按照自己的意向去更新数据；而海量撒点还需要去获取图层去更新mass点的数据

如果感兴趣可以看看我这篇博客

[高德地图海量撒点 （普通/实时）\_代码凯乐的博客-CSDN博客\_高德地图海量点][_-CSDN]

marker多类点切换例子

var iconEStyle=[//事件图标加载
                {
                    image: contextPath + "/weaversys_cityFTEMDatav/images/eventsManage/newImg/ET1A1.svg",
                    imageSize: new AMap.Size(19, 19)
                }...];   
    
    
     var data = [
    	        {
    	          lnglat: [116.105285, 39.904989], //点标记位置
    	          name: "beijing",
    	          id: 1,
    	          style:2
    	        }, // {}, …,{}, …
    	        {
    	          lnglat: [116.105285, 39.804989], //点标记位置
    	          name: "beijing",
    	          id: 2,
    	          style:1
    	        },
    	        {
    	          lnglat: [116.305285, 39.904989], //点标记位置
    	          name: "beijing",
    	          id: 3,
    	          style:2
    	        },
    	        {
    	          lnglat: [116.405285, 39.904989], //点标记位置
    	          name: "beijing",
    	          id: 4,
    	          style:0
    	        },
    	        {
    	          lnglat: [116.505285, 39.904989], //点标记位置
    	          name: "beijing",
    	          id: 5,
    	          style:1
    	        },
    	        {
    	          lnglat: [116.605285, 39.904989], //点标记位置
    	          name: "beijing",
    	          id: 6,
    	          style:2
    	        },
    	        {
    	          lnglat: [116.705285, 39.904989], //点标记位置
    	          name: "beijing",
    	          id: 7,
    	          style:0
    	        },
    	        {
    	          lnglat: [116.805285, 39.904989], //点标记位置
    	          name: "beijing",
    	          id: 8,
    	          style:0
    	        },
    	        {
    	          lnglat: [116.905285, 39.904989], //点标记位置
    	          name: "beijing",
    	          id: 9,
    	          style:0
    	        },
    	        {
    	          lnglat: [116.405285, 39.704989], //点标记位置
    	          name: "beijing",
    	          id: 10,
    	          style:2//点的样式
    	        },
    	        {
    	          lnglat: [116.405285, 39.604989], //点标记位置
    	          name: "beijing",
    	          id: 11,
    	          style:0
    	        },
    	        {
    	          lnglat: [116.405285, 39.504989], //点标记位置
    	          name: "beijing",
    	          id: 12,
    	          style:1
    	        }
    	      ];
    
    
    
        for (let item of data ) {
               if (isEmpty(item.longitude)  && isEmpty(item.latitude)) {
                   var mapPoint = bdDecrypt(item.longitude, item.latitude);
                   var marker = new AMap.Marker({
                       map: map,
                       position: new AMap.LngLat(mapPoint.gg_lon, mapPoint.gg_lat),//基点位置
                       topWhenMouseOver: true,//鼠标移进时marker是否置顶，默认false，不置顶（自v1.3 新增）
                       draggable: false,  //是否可拖动
                       icon: new AMap.Icon(iconEStyle[item.style]),
                       eventType:item.style
                    });
                    marker.on('click', function (e) {
                                toEventsDetailsPage(e.target.De.operaTionId,e.target.De.eventNumber);
                   })
               }
          }
    
            //判断字段是否为空
            function isEmpty(str) {
                if (str != null && str != "" && str != undefined) {
                    return true;
                }
                return false;
            }
    
    
            //清除需要删除类型
            clearMarker('marker',id)
    
    
            //清除选择的marker图层里面类型的点
            function clearMarker(typename,chooseTypeName) {
                var lays = map.getAllOverlays(typename); //获取田地地图中所有地块 数组
                if (lays.length > 0) {
                    for (var i = 0; i < lays.length; i++) { //遍历数组
                        var eventType = lays[i].De.eventType;
                        if (eventType == chooseTypeName) {//寻找相同名称的
                            map.remove(lays[i]);
                        }
                    }
                }
            }

[_-CSDN]: https://blog.csdn.net/juedaifenghua2/article/details/127431928?spm=1001.2014.3001.5501

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关 (android地图开发) 高德地图手势切换

果截图： ![Center][]![Center 1][]![Center 2][] 相关布局文件：（手势滑动第一个界面） <LinearLayout ...

逃离我推掉我的手/ 2024年04月17日 05:45/ 0 赞/ 226 阅读

相关高德地图关于多类图标点切换问题

撒点方式:①海量撒点 ②marker撒点需要考虑的问题: 什么时候需要海量撒点？海量撒点能干啥？什么时候需要marker撒点？marker撒点能干啥？近期遇到一个

本是古典何须时尚/ 2024年04月01日 16:46/ 0 赞/ 168 阅读

相关高德地图自定义图标加路线规划

<!doctype html> <html> <head> <meta charset="utf-8"> <meta h

红太狼/ 2023年05月30日 03:57/ 0 赞/ 159 阅读

相关高德地图自定义图标显示

<!doctype html> <html> <head> <meta charset="utf-8"> <meta h

た入场券/ 2023年05月30日 03:43/ 0 赞/ 154 阅读

相关高德地图定位问题

记录下使用高德、百度地图遇到的一些问题 1、从定位中拿城市名，一般情况下高德地图返回的字段名是city，但是直辖市返回的是字段province const addr

左手的ㄟ右手/ 2022年12月24日 13:51/ 0 赞/ 414 阅读

相关 PHP高德地图描点,引用高德地图描点画行动轨迹

arr数组中存放地址的经纬度 function initMap(arr)\{ mapObj = new AMap.Map("staff\_track\_index\_map

秒速五厘米/ 2022年11月19日 01:25/ 0 赞/ 420 阅读

相关高德地图打点

高德地图API的使用看官方文档就能很容易的上手。在高德地图的使用过程中，了解了一些关于地图的需求与使用。复习了一下地理知识：经纬度还复习了一下数学知识

桃扇骨/ 2022年07月16日 06:52/ 0 赞/ 579 阅读

相关高德地图-删除多个指定点标记

1、问题背景高德地图上标记多个标记，点击删除按钮，可以删除指定的几个点标记 2、实现源码 <!DOCTYPE html> <html

r囧r小猫/ 2022年07月15日 05:26/ 0 赞/ 594 阅读

相关高德地图-删除多个点标记

1、问题背景高德地图上有自己创建的marker，单击删除按钮，可以删除多个标记 2、实现源码 <!DOCTYPE html> <ht

绝地灬酷狼/ 2022年07月15日 05:25/ 0 赞/ 523 阅读

相关高德地图点击获取坐标

<link href="<?=Yii::getAlias('@resUrl/css/manage.css');?>" rel="stylesheet">

刺骨的言语ヽ痛彻心扉/ 2022年05月17日 11:09/ 0 赞/ 694 阅读