Synthetic points example.
<!DOCTYPE html> <html> <head> <title>Synthetic points example</title> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/3.8.1/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/3.8.1/build/ol.js"></script> </head> <body> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div id="map" class="map"></div> </div> </div> </div> <script> var count = 20000; var features = new Array(count); var e = 18000000; for (var i = 0; i < count; ++i) { features[i] = new ol.Feature({ 'geometry': new ol.geom.Point( [2 * e * Math.random() - e, 2 * e * Math.random() - e]), 'i': i, 'size': i % 2 ? 10 : 20 }); } var styles = { '10': [new ol.style.Style({ image: new ol.style.Circle({ radius: 5, fill: new ol.style.Fill({color: '#666666'}), stroke: new ol.style.Stroke({color: '#bada55', width: 1}) }) })], '20': [new ol.style.Style({ image: new ol.style.Circle({ radius: 10, fill: new ol.style.Fill({color: '#666666'}), stroke: new ol.style.Stroke({color: '#bada55', width: 1}) }) })] }; var vectorSource = new ol.source.Vector({ features: features }); var vector = new ol.layer.Vector({ source: vectorSource, style: function(feature, resolution) { return styles[feature.get('size')]; } }); var map = new ol.Map({ layers: [vector], target: document.getElementById('map'), view: new ol.View({ center: [0, 0], zoom: 2 }) }); var point = null; var line = null; var displaySnap = function(coordinate) { var closestFeature = vectorSource.getClosestFeatureToCoordinate(coordinate); if (closestFeature === null) { point = null; line = null; } else { var geometry = closestFeature.getGeometry(); var closestPoint = geometry.getClosestPoint(coordinate); if (point === null) { point = new ol.geom.Point(closestPoint); } else { point.setCoordinates(closestPoint); } if (line === null) { line = new ol.geom.LineString([coordinate, closestPoint]); } else { line.setCoordinates([coordinate, closestPoint]); } } map.render(); }; map.on('pointermove', function(evt) { if (evt.dragging) { return; } var coordinate = map.getEventCoordinate(evt.originalEvent); displaySnap(coordinate); }); map.on('click', function(evt) { displaySnap(evt.coordinate); }); var imageStyle = new ol.style.Circle({ radius: 10, fill: null, stroke: new ol.style.Stroke({ color: 'rgba(255,255,0,0.9)', width: 3 }) }); var strokeStyle = new ol.style.Stroke({ color: 'rgba(255,255,0,0.9)', width: 3 }); map.on('postcompose', function(evt) { var vectorContext = evt.vectorContext; if (point !== null) { vectorContext.setImageStyle(imageStyle); vectorContext.drawPointGeometry(point); } if (line !== null) { vectorContext.setFillStrokeStyle(null, strokeStyle); vectorContext.drawLineStringGeometry(line); } }); map.on('pointermove', function(evt) { if (evt.dragging) { return; } var pixel = map.getEventPixel(evt.originalEvent); var hit = map.hasFeatureAtPixel(pixel); if (hit) { map.getTarget().style.cursor = 'pointer'; } else { map.getTarget().style.cursor = ''; } }); </script> </body> </html>