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

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

需要考虑的问题:

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

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

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

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

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

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

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

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

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

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

高德地图海量撒点 （普通/实时）_代码凯乐的博客-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]);
                    }
                }
            }
        }