组标记3.

我想组标记在打开第3层像这样：组标记3.

我一直在寻找在互联网的一些例子，但我无法找到它。我该如何使用Open Layers 3做到这一点？

2017-09-25 Miguel Herreros Cejas

你有一些例子，可以把你在正确的方向，对于初学者来说，你可以看看这里：

的OpenLayers正式例如：Clustered Features
的OpenLayers扩展：Animated Cluster
的OpenLayers扩展名：Convex Hull
周的OpenLayers示例（3的OpenLayers初学者指南）：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>

来源

2017-09-25 16:22:33 Svinjica

非常感谢！ –

回答

相关问题