<!DOCTYPE html> <html> <head> <title>Clustered Features</title> <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css"> <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script> </head> <body> <div id="map" class="map"></div> <form> <label>cluster distance</label> <input id="distance" type="range" min="0" max="100" step="1" value="40"/> </form> <script> var distance = document.getElementById('distance'); var count = 20000; var features = new Array(count); var e = 4500000; for (var i = 0; i < count; ++i) { var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e]; features[i] = new ol.Feature(new ol.geom.Point(coordinates)); } var source = new ol.source.Vector({ features: features }); var clusterSource = new ol.source.Cluster({ distance: parseInt(distance.value, 10), source: source }); var styleCache = {}; var clusters = new ol.layer.Vector({ source: clusterSource, style: function(feature) { var size = feature.get('features').length; var style = styleCache[size]; if (!style) { style = new ol.style.Style({ image: new ol.style.Circle({ radius: 10, stroke: new ol.style.Stroke({ color: '#fff' }), fill: new ol.style.Fill({ color: '#3399CC' }) }), text: new ol.style.Text({ text: size.toString(), fill: new ol.style.Fill({ color: '#fff' }) }) }); styleCache[size] = style; } return style; } }); var raster = new ol.layer.Tile({ source: new ol.source.OSM() }); var map = new ol.Map({ layers: [raster, clusters], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); distance.addEventListener('input', function() { clusterSource.setDistance(parseInt(distance.value, 10)); }); </script> </body> </html>
OpenLayers示例代码:集群特性
Copyright © Since 2014.
开源地理空间基金会中文分会
吉ICP备05002032号
Powered by TorCMS