Openlayers 实现点位聚合

最新推荐文章于 2025-07-27 22:19:25 发布

原创

最新推荐文章于 2025-07-27 22:19:25 发布 · 531 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

getMapData()
function getMapData(){
    RequestGet(SYSTEM_CONFIG.SERVER.LOCAL+'data/testData.json').then(res=>{
        if(res.success) {
            const plantMarkerList = res.data.items
            setTimeout(()=>{
                setCluster(plantMarkerList)
            },2000)
            mapRef.value.on('click',evt=>{
                // const coordinate = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326')
                let mouse = evt.coordinate // 鼠标点击的坐标位置
                const feature = mapRef.value.forEachFeatureAtPixel(evt.pixel, function(feature) {
                    return feature;
                });
                if (feature) {
                    console.log(feature, 'feature');
                    // 获取count属性
                    const count = feature.get('count');
                    // 聚合点--放大地图层级
                    if (count > 1) {
                        const czoom = mapRef.value.getView().getZoom();
                        mapRef.value.getView().animate({
                            center: evt.coordinate,
                            zoom: czoom + 1
                        });
                        // 具体点位
                    } else {
                        const custom = feature.get('features')[0].get('attribute');
                        if (custom) { // 如果是点击了坐标点
                            // 显示弹出窗口
                            popShow.value = true

                            const object={
                                '名称':custom.dwmc,
                                '年末职工人数':custom.zdmj,
                                '专业技术技能人员数':custom.zyjsjnrys,
                                '年末在院人数':custom.nmzyrs,
                                '机构管理人员数':custo

最低0.47元/天解锁文章