javascript - 在“开放层3”中对标记进行分组。

Closed. This question needs details or clarity。它当前不接受答案。












                            想改善这个问题吗？添加详细信息并通过editing this post阐明问题。

                        2年前关闭。



我想在开放层3中对标记进行分组。如下所示：

我在互联网上寻找一些示例，但找不到。
如何使用开放层3做到这一点？

最佳答案

您可以通过一些示例向正确的方向发展，对于初学者来说，您可以在这里查看：

OpenLayers官方示例：Clustered Features
OpenLayers扩展名：Animated Cluster
OpenLayers扩展名：Convex Hull
OpenLayers示例（《 OpenLayers 3入门指南》）：Cluster GeoJSON Source

还有这个小片段

var map = new ol.Map({
    view: new ol.View({
        zoom: 4,
        center: [2152466, 5850795]
    }),
    target: 'js-map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ]
});

// generate random elements
var getRandomInt = function(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
};


var features = [];
var numberOfFeatures = 0;

while (numberOfFeatures < 100) {
    var point = new ol.geom.Point([
        getRandomInt(1545862, 2568284),
        getRandomInt(6102732, 7154505)
    ]);

    features.push(new ol.Feature(point));
    numberOfFeatures++;
}


var getStyle = function(feature) {

    var length = feature.get('features').length;
    return [
        new ol.style.Style({

            image: new ol.style.Circle({
                radius: Math.min(
                    Math.max(length * 0.8, 10), 15
                ),
                fill: new ol.style.Fill({
                    color: [0, 204, 0, 0.6]
                })
            }),
            text: new ol.style.Text({
                text: length.toString(),
                fill: new ol.style.Fill({
                    color: 'black'
                })
            }),
            stroke: new ol.style.Stroke({
                color: [0, 51, 0, 1],
                width: 1
            }),
            font: '26px "Helvetica Neue", Arial'
        })
    ];
};
// https://github.com/Viglino/OL3-AnimatedCluster
var clusterSource = new ol.source.Cluster({
    distance: 100,
    source: new ol.source.Vector({
        features: features
    })
});

// Animated cluster layer
var clusterLayer = new ol.layer.AnimatedCluster({
    source: clusterSource,
    // Use a style function for cluster symbolisation
    style: getStyle
});


map.addLayer(clusterLayer);

.map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font-family: Arial, sans-serif;
}

.ol-attribution > ul {
    font-size: 1rem;
}

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Clusters</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.3.3/css/ol.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="js-map" class="map"></div>
    <script src="https://openlayers.org/en/v4.3.2/build/ol.js"></script>
    <!--animated cluster plugin -->
    <script type="text/javascript" src="https://cdn.rawgit.com/Viglino/OL3-AnimatedCluster/gh-pages/interaction/selectclusterinteraction.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/Viglino/OL3-AnimatedCluster/gh-pages/layer/animatedclusterlayer.js"></script>
    <script src="clustering.js"></script>
</body>

</html>

关于javascript - 在“开放层3”中对标记进行分组。，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46409021/