2021-09-01
天地图 地图 海量点 单图层下 多种颜色 多种样式 设置
之前是多个图层的所以 用了图层容器，后来需要每一层都加点击事件，图层太多就只能点到最上边图层
所以辗转 找到一个图层设置多种颜色和形状的 方法

var cloudCollectionList = []
 function createCloudMarkerCollection() {
        let lnglats = [];
        for (var i = 0; i < data_info.length; i++) {

          let data = data_info[i]
          let dataList = data_info[i].list

          for (let dataItem of dataList) {
            let dataItemList = dataItem[0]
            dataItemList = dataItemList.split(',')
            let ll = new T.LngLat(dataItemList[0], dataItemList[1])
            ll.content = data
            ll.id = dataItemList[2]
            lnglats.push(ll)
          }

        }
         if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
          let _CloudCollection = new T.CloudMarkerCollection(lnglats, {
            color: 'red',
            SizeType: TDT_POINT_SIZE_BIG,
          });

          let oldOnAdd = _CloudCollection.addLayer;// 取出图层的addLayer方法
         //重置添加每个点的 方法
          _CloudCollection.addLayer = function (t) {
           // 修改颜色
            t.options.color = t.or.content.color
            
            if (t.or.content.name == '已确认') {
              //修改图标形状，具体形状值可以自己尝试打印一下t，在设置图层时设置想要的形状，看下形状对应的shape 值
              t.options.shape = 3
            }
            oldOnAdd.call(this, t);
          }
          //图层 点绑定点击方法
          _CloudCollection.addEventListener("click", function (e) {
            addClickHandler(e)
          });
         
          cloudCollectionList.push(_CloudCollection)

        } else {
          alert('此示例目前只有在IE9及以上浏览器打开');
        }
        //之前是多个图层的所以 用了图层容器，后来需要每一层都加点击事件，图层太多就只能点上边的
        let LayerGroup = new T.LayerGroup(cloudCollectionList)
        map.addOverLay(LayerGroup);
      }