-
Notifications
You must be signed in to change notification settings - Fork 12
/
classification-nearest.html
145 lines (133 loc) · 4.79 KB
/
classification-nearest.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://rawcdn.githack.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<link rel="stylesheet" href="assets/css/styles.css" type="text/css">
<script src="//cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
<script src="https://rawcdn.githack.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="assets/js/es6-promise.min.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,fetch"></script>
<script src="assets/js/helpers.js"></script>
<title>Turf and OpenLayers 3 - Nearest</title>
</head>
<body>
<div id="map" class="map"></div>
<button id="drawtoggle" data-toggle="false" type="button">
Activate/Desactivate drawing
</button>
<script type="text/javascript">
// Style
var defaultStyle = [
new ol.style.Style({
image: new ol.style.Circle({
stroke: new ol.style.Stroke({
color: 'white'
}),
fill: new ol.style.Fill({
color: '#1f6b75'
}),
radius: 4
})
})
];
// Declare a source for polygons
var vectorSourcePoints = new ol.source.Vector();
var vectorLayerPoints = new ol.layer.Vector({
source: vectorSourcePoints,
style: defaultStyle
});
// Declare a source for drawing
var vectorSourceDrawing = new ol.source.Vector();
var vectorLayerDrawing = new ol.layer.Vector({
source: vectorSourceDrawing
});
// Instanciate a map and add layers
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayerPoints,
vectorLayerDrawing
],
view: new ol.View({
center: ol.proj.transform(
[-1.5603, 47.2383],
'EPSG:4326',
'EPSG:3857'
),
zoom: 10
})
});
var styleOverlay = new ol.style.Style({
image: new ol.style.Circle({
stroke: new ol.style.Stroke({
color: 'white'
}),
fill: new ol.style.Fill({
color: 'red'
}),
radius: 5
})
});
// We will share the geojson content to be able to use Turf
var myPoints;
fetch('assets/data/key_shop_with_name_nantes_area.geojson').then(function(response) {
return response.json().then(function(points_fc) {
myPoints = points_fc;
vectorSourcePoints.addFeatures(geojsonToFeatures(points_fc, {
featureProjection: 'EPSG:3857'
}));
});
})
// Create a button and bind a click function
var button = document.getElementById('drawtoggle');
var draw;
button.onclick = function(e) {
var toggleState = this.getAttribute('data-toggle');
// Some issues due to type. Can't use !toggleState to go back and forth
// between true and false (type is not boolean but a string)
// Remove drawing interaction because
if (toggleState === 'true') {
this.setAttribute('data-toggle', 'false');
map.removeInteraction(draw);
} else {
this.setAttribute('data-toggle', 'true');
// Assign draw interaction (variable created before for scope reason)
draw = new ol.interaction.Draw({
source: vectorSourceDrawing,
type: 'Point'
});
// Bind event on the draw component
draw.on('drawend', function(e) {
// Remove immediately other features for demo purpose
vectorSourceDrawing.clear();
var formatDraw = new ol.format.GeoJSON();
featureDraw = formatDraw.writeFeature(e.feature.clone(), {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
});
//vectorSourceDrawing.addFeature(e.feature);
console.log(featureDraw);
var nearest = turf.nearest(JSON.parse(featureDraw), myPoints);
var featureId = nearest.properties.osm_id;
console.log(nearest);
// Loop on features
vectorSourcePoints.getFeatures().forEach(function(feature) {
if (feature.get('osm_id') === featureId) {
console.log('a');
feature.setStyle(styleOverlay);
} else {
console.log('b');
feature.setStyle(defaultStyle);
}
});
});
// Add the interaction to the map
map.addInteraction(draw);
}
};
</script>
</body>
</html>