百度地圖API添加海量圖標解決方案

採用百度地理信息可視化開源庫mapv.js實現

以canvas形式繪畫渲染海量圖標，允許自定義圖標點擊事件及附加數據

參考文檔：https://github.com/huiyan-fe/mapv/#readme

主要代碼：

function run() {
            map.clearOverlays();
            let count = document.getElementById("txtNum").value * 1;
            img.src = 'station.png';        //圖標圖片
            data = [];
            let points = [];
            img.onload = function () {
                while (count--) {
                    let fanNum = parseInt(Math.random() * 100);
                    let lng = mapCenter.lng - 10 + Math.random() * 20;
                    let lat = mapCenter.lat - 6 + Math.random() * 12;
                    data.push({
                        geometry: {
                            type: 'Point',
                            coordinates: [lng, lat]
                        },
                        deg: 0,
                        icon: img,
                        text: fanNum.toString(),     //圖標上方文字
                        tag: { fanNum: fanNum }      //附加信息對象
                    });
                    points.push(new BMap.Point(lng, lat));
                }
                let dataSet = new mapv.DataSet(data);
                let options = {
                    draw: 'icon',
                    methods: {
                        click: (s) => {             //圖標點擊事件
                            if (s && s.tag) {
                                let html = `<div>
                                                <p>經度: ${s.geometry.coordinates[0]}</p>
                                                <p>緯度: ${s.geometry.coordinates[1]}</p>
                                                <p>有緣人數量: ${s.tag.fanNum}</p>
                                            </div>`;
                                let infoWindow = new BMap.InfoWindow(html);
                                let bPoint = new BMap.Point(s.geometry.coordinates[0], s.geometry.coordinates[1]);
                                map.openInfoWindow(infoWindow, bPoint);
                            }
                        }
                    },
                    showText: true,
                    avoid: true,
                    size: 12,
                    font: '16px Arial',
                    fillStyle: 'red',
                    shadowColor: 'red',
                    shadowBlur: 0,
                    textOffset: { x: 0, y: -16 }   //文字顯示的位置
                }
                let mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);  //顯示海量圖標
                map.setViewport(points);              //視角切換
            }
        }

 

實現效果：

 

demo打包下載：點我下載