openlayers - 如何在打开图层图中的标记单击上设置蜘蛛视图标记?
问题描述
我已经创建了开放图层地图并使用一些动态纬度和经度在地图中设置标记,一些纬度和经度值是相同的,所以单击标记时如何打开蜘蛛视图
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-ext 中的 ol/interaction/SelectCluster。在选择时,簇会弹开以显示其中的特征。在线查看示例:https ://viglino.github.io/ol-ext/examples/animation/map.animatedcluster.html
推荐阅读
- java - 在 Java Spring boot 中有没有一种方法可以将单个 kafka 队列用于不同的 Java 对象?
- python - 如何抓取受密码保护的网站
- java - 将没有 web 项目的 springboot 打包到一个可运行的 Jar 并由 java -jar 运行,但 @Scheduled 方法不起作用
- amazon-web-services - 如何将 aws sumerian acene 与 aws iot 核心连接起来?
- azure - 通过 Powershell 脚本将 swagger 导入 APImanagement 在 Azure devops 管道中不起作用
- laravel - 使用部署程序的 Laravel 部署无法更新 shared/.env 文件
- javascript - 使用 javascript chrome 扩展从 chrome 自动填充中读取值
- graphql - GraphQL 到 Swagger (Azure APIM)
- elasticsearch - Bool 应该使用过滤器和嵌套对象进行查询
- r - 如何选择列以使用 dplyr 中的中值函数?