【问题标题】:How to set spider view marker on marker click in open layer map?如何在打开图层图中的标记单击上设置蜘蛛视图标记?
【发布时间】:2025-12-05 20:00:02
【问题描述】:

我已经创建了开放图层地图并使用一些动态纬度和经度在地图中设置标记 一些纬度和经度值是相同的所以 点击标记时如何打开蜘蛛视图

   let path = this.props.waypts;

        path.map((lat,index)=>{
            let fill = new style.Fill({color:'rgba(255,255,255,1)'}),
            stroke = new style.Stroke({color:'rgba(0,0,0,1)'}),
            style1 = [
                new style.Style({
                    image: new style.Icon(({
                        scale: .9, 
                        opacity: 1,
                        rotateWithView: false, 
                        anchor: [0.5, 1],
                        anchorXUnits: 'fraction', 
                        anchorYUnits: 'fraction',
                        src: "https://img.icons8.com/metro/40/"+(this.props.color[index]).replace( /#/g, "" )+"/marker.png"
                    })),
                    zIndex: 5
                }),
                new style.Style({
                    image: new style.Circle({
                        radius: 6, 
                        fill: fill, 
                        stroke: stroke
                    }),
                    zIndex: 4
                })
            ];

            let abc = 'feature'+[index+1];               
            abc = new Feature({
                geometry: new geom.Point(path[index])
            });
            abc.setStyle(style1);
            sourceFeatures.addFeatures([abc]);
        })

        map.getView().fit(sourceFeatures.getExtent(), map.getSize()); 

【问题讨论】:

  • 如果您正在寻找类似OL Earthwake Example 的东西,那么您需要使用集群源OL API Cluster Doc。这就是蜘蛛视图的意思吗?。
  • 蜘蛛视图意味着当我单击同一位置的标记时,将所有标记与连接线展开。

标签: openlayers openlayers-3 openlayers-5 angular-openlayers openlayers-6


【解决方案1】:

看看ol-ext中的ol/interaction/SelectCluster。在选择时,簇会弹开以显示其中的特征。 在线查看示例:https://viglino.github.io/ol-ext/examples/animation/map.animatedcluster.html

【讨论】:

    最近更新 更多