2021-09-01
天地圖 地圖 海量點(diǎn) 單圖層下 多種顏色 多種樣式 設(shè)置
之前是多個圖層的所以 用了圖層容器，后來需要每一層都加點(diǎn)擊事件，圖層太多就只能點(diǎn)到最上邊圖層
所以輾轉(zhuǎn) 找到一個圖層設(shè)置多種顏色和形狀的 方法

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) {  // 判斷當(dāng)前瀏覽器是否支持繪制海量點(diǎn)
          let _CloudCollection = new T.CloudMarkerCollection(lnglats, {
            color: 'red',
            SizeType: TDT_POINT_SIZE_BIG,
          });

          let oldOnAdd = _CloudCollection.addLayer;// 取出圖層的addLayer方法
         //重置添加每個點(diǎn)的 方法
          _CloudCollection.addLayer = function (t) {
           // 修改顏色
            t.options.color = t.or.content.color
            
            if (t.or.content.name == '已確認(rèn)') {
              //修改圖標(biāo)形狀，具體形狀值可以自己嘗試打印一下t，在設(shè)置圖層時設(shè)置想要的形狀，看下形狀對應(yīng)的shape 值
              t.options.shape = 3
            }
            oldOnAdd.call(this, t);
          }
          //圖層 點(diǎn)綁定點(diǎn)擊方法
          _CloudCollection.addEventListener("click", function (e) {
            addClickHandler(e)
          });
         
          cloudCollectionList.push(_CloudCollection)

        } else {
          alert('此示例目前只有在IE9及以上瀏覽器打開');
        }
        //之前是多個圖層的所以 用了圖層容器，后來需要每一層都加點(diǎn)擊事件，圖層太多就只能點(diǎn)上邊的
        let LayerGroup = new T.LayerGroup(cloudCollectionList)
        map.addOverLay(LayerGroup);
      }