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);
}
