百度地图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);              //视角切换
            }
        }

实现效果:

百度地图海量图标

补充

        如果你的图片加载后位置和预想的有偏差,可以添加偏移量进行设置,直接在 options 中添加 offset 设置即可:

                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 },  //文字显示的位置
                    offset: { x: 5, y: 5 }  // 偏移量设置,根据不同图片加载效果调试修改
                }

demo打包下载:点我下载

评论 5 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

_老杨_

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值