-
Notifications
You must be signed in to change notification settings - Fork 12
/
joins-inside.html
139 lines (130 loc) · 4.71 KB
/
joins-inside.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
<!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" type="text/javascript"></script>
<script src="assets/js/helpers.js"></script>
<title>Turf and OpenLayers 3 - Inside</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">
// Declare a source for points and drawing
var vectorSource = new ol.source.Vector();
var vectorSourceDrawing = new ol.source.Vector();
// Create a style function for coloring points
var pointStyles = (function() {
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
})
})
];
var ruleStyle = [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
})
})];
return function(feature, resolution) {
var isInside = feature.get('isInside');
if (isInside != undefined && isInside === true) {
return ruleStyle;
} else {
return defaultStyle;
}
};
})();
// Declare vector layers, one for points and the other for the drawing
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: pointStyles
});
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()
}),
vectorLayer,
vectorLayerDrawing
],
view: new ol.View({
center: ol.proj.fromLonLat([-1.5603, 47.2383]),
zoom: 11
})
});
// Generate and add random features
var newfeatures = (new ol.format.GeoJSON()).readFeatures(
turf.random('point', 50, {
bbox: ol.proj.transformExtent(map.getView().calculateExtent(map.getSize()), 'EPSG:3857', 'EPSG:4326')
}), {
featureProjection: 'EPSG:3857'
}
);
vectorSource.addFeatures(newfeatures);
// Create a button and bind a click function
var button = document.getElementById('drawtoggle');
var draw;
button.addEventListener('click', 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 not boolean but string)
// Remove drawing interaction if true
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: 'Polygon'
});
// 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();
var featureDraw = formatDraw.writeFeature(e.feature, {
featureProjection: 'EPSG:3857'
});
// Loop on features
vectorSource.getFeatures().forEach(function(el) {
var feat = formatDraw.writeFeature(el, {
featureProjection: 'EPSG:3857'
});
// Below function can be replaced with ol.extent.intersects
// if drawing a bounding box
var isInside = turf.inside(JSON.parse(feat), JSON.parse(featureDraw));
el.set('isInside', isInside);
});
});
// Add the interaction to the map
map.addInteraction(draw);
}
});
</script>
</body>
</html>