1 | goog.require('ol.Feature');
|
2 | goog.require('ol.Map');
|
3 | goog.require('ol.View');
|
4 | goog.require('ol.geom.LineString');
|
5 | goog.require('ol.geom.Point');
|
6 | goog.require('ol.layer.Vector');
|
7 | goog.require('ol.source.Vector');
|
8 | goog.require('ol.style.Circle');
|
9 | goog.require('ol.style.Fill');
|
10 | goog.require('ol.style.Stroke');
|
11 | goog.require('ol.style.Style');
|
12 |
|
13 |
|
14 | var count = 20000;
|
15 | var features = new Array(count);
|
16 | var e = 18000000;
|
17 | for (var i = 0; i < count; ++i) {
|
18 | features[i] = new ol.Feature({
|
19 | 'geometry': new ol.geom.Point(
|
20 | [2 * e * Math.random() - e, 2 * e * Math.random() - e]),
|
21 | 'i': i,
|
22 | 'size': i % 2 ? 10 : 20
|
23 | });
|
24 | }
|
25 |
|
26 | var styles = {
|
27 | '10': new ol.style.Style({
|
28 | image: new ol.style.Circle({
|
29 | radius: 5,
|
30 | fill: new ol.style.Fill({color: '#666666'}),
|
31 | stroke: new ol.style.Stroke({color: '#bada55', width: 1})
|
32 | })
|
33 | }),
|
34 | '20': new ol.style.Style({
|
35 | image: new ol.style.Circle({
|
36 | radius: 10,
|
37 | fill: new ol.style.Fill({color: '#666666'}),
|
38 | stroke: new ol.style.Stroke({color: '#bada55', width: 1})
|
39 | })
|
40 | })
|
41 | };
|
42 |
|
43 | var vectorSource = new ol.source.Vector({
|
44 | features: features,
|
45 | wrapX: false
|
46 | });
|
47 | var vector = new ol.layer.Vector({
|
48 | source: vectorSource,
|
49 | style: function(feature) {
|
50 | return styles[feature.get('size')];
|
51 | }
|
52 | });
|
53 |
|
54 | var map = new ol.Map({
|
55 | layers: [vector],
|
56 | target: document.getElementById('map'),
|
57 | view: new ol.View({
|
58 | center: [0, 0],
|
59 | zoom: 2
|
60 | })
|
61 | });
|
62 |
|
63 | var point = null;
|
64 | var line = null;
|
65 | var displaySnap = function(coordinate) {
|
66 | var closestFeature = vectorSource.getClosestFeatureToCoordinate(coordinate);
|
67 | if (closestFeature === null) {
|
68 | point = null;
|
69 | line = null;
|
70 | } else {
|
71 | var geometry = closestFeature.getGeometry();
|
72 | var closestPoint = geometry.getClosestPoint(coordinate);
|
73 | if (point === null) {
|
74 | point = new ol.geom.Point(closestPoint);
|
75 | } else {
|
76 | point.setCoordinates(closestPoint);
|
77 | }
|
78 | if (line === null) {
|
79 | line = new ol.geom.LineString([coordinate, closestPoint]);
|
80 | } else {
|
81 | line.setCoordinates([coordinate, closestPoint]);
|
82 | }
|
83 | }
|
84 | map.render();
|
85 | };
|
86 |
|
87 | map.on('pointermove', function(evt) {
|
88 | if (evt.dragging) {
|
89 | return;
|
90 | }
|
91 | var coordinate = map.getEventCoordinate(evt.originalEvent);
|
92 | displaySnap(coordinate);
|
93 | });
|
94 |
|
95 | map.on('click', function(evt) {
|
96 | displaySnap(evt.coordinate);
|
97 | });
|
98 |
|
99 | var stroke = new ol.style.Stroke({
|
100 | color: 'rgba(255,255,0,0.9)',
|
101 | width: 3
|
102 | });
|
103 | var style = new ol.style.Style({
|
104 | stroke: stroke,
|
105 | image: new ol.style.Circle({
|
106 | radius: 10,
|
107 | stroke: stroke
|
108 | })
|
109 | });
|
110 |
|
111 | map.on('postcompose', function(evt) {
|
112 | var vectorContext = evt.vectorContext;
|
113 | vectorContext.setStyle(style);
|
114 | if (point !== null) {
|
115 | vectorContext.drawGeometry(point);
|
116 | }
|
117 | if (line !== null) {
|
118 | vectorContext.drawGeometry(line);
|
119 | }
|
120 | });
|
121 |
|
122 | map.on('pointermove', function(evt) {
|
123 | if (evt.dragging) {
|
124 | return;
|
125 | }
|
126 | var pixel = map.getEventPixel(evt.originalEvent);
|
127 | var hit = map.hasFeatureAtPixel(pixel);
|
128 | if (hit) {
|
129 | map.getTarget().style.cursor = 'pointer';
|
130 | } else {
|
131 | map.getTarget().style.cursor = '';
|
132 | }
|
133 | });
|