Open Layers 3 中的组标记。

Question

我想在开放层 3 中对标记进行分组。像这样：

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

Answer 1

您有一些示例可以将您推向正确的方向，对于初学者，您可以查看此处：

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>

Open Layers 3 中的组标记。

Group markers in Open Layers 3.

javascript

openlayers

openlayers-3