1 |
|
2 |
|
3 | goog.require('ol.Map');
|
4 | goog.require('ol.View');
|
5 | goog.require('ol.layer.Image');
|
6 | goog.require('ol.layer.Tile');
|
7 | goog.require('ol.source.BingMaps');
|
8 | goog.require('ol.source.Raster');
|
9 |
|
10 | var minVgi = 0;
|
11 | var maxVgi = 0.25;
|
12 | var bins = 10;
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 | function vgi(pixel) {
|
22 | var r = pixel[0] / 255;
|
23 | var g = pixel[1] / 255;
|
24 | var b = pixel[2] / 255;
|
25 | return (2 * g - r - b) / (2 * g + r + b);
|
26 | }
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 | function summarize(value, counts) {
|
35 | var min = counts.min;
|
36 | var max = counts.max;
|
37 | var num = counts.values.length;
|
38 | if (value < min) {
|
39 |
|
40 | } else if (value >= max) {
|
41 | counts.values[num - 1] += 1;
|
42 | } else {
|
43 | var index = Math.floor((value - min) / counts.delta);
|
44 | counts.values[index] += 1;
|
45 | }
|
46 | }
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 | var bing = new ol.source.BingMaps({
|
53 | key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
|
54 | imagerySet: 'Aerial'
|
55 | });
|
56 |
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 | var raster = new ol.source.Raster({
|
63 | sources: [bing],
|
64 | |
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 | operation: function(pixels, data) {
|
71 | var pixel = pixels[0];
|
72 | var value = vgi(pixel);
|
73 | summarize(value, data.counts);
|
74 | if (value >= data.threshold) {
|
75 | pixel[0] = 0;
|
76 | pixel[1] = 255;
|
77 | pixel[2] = 0;
|
78 | pixel[3] = 128;
|
79 | } else {
|
80 | pixel[3] = 0;
|
81 | }
|
82 | return pixel;
|
83 | },
|
84 | lib: {
|
85 | vgi: vgi,
|
86 | summarize: summarize
|
87 | }
|
88 | });
|
89 | raster.set('threshold', 0.1);
|
90 |
|
91 | function createCounts(min, max, num) {
|
92 | var values = new Array(num);
|
93 | for (var i = 0; i < num; ++i) {
|
94 | values[i] = 0;
|
95 | }
|
96 | return {
|
97 | min: min,
|
98 | max: max,
|
99 | values: values,
|
100 | delta: (max - min) / num
|
101 | };
|
102 | }
|
103 |
|
104 | raster.on('beforeoperations', function(event) {
|
105 | event.data.counts = createCounts(minVgi, maxVgi, bins);
|
106 | event.data.threshold = raster.get('threshold');
|
107 | });
|
108 |
|
109 | raster.on('afteroperations', function(event) {
|
110 | schedulePlot(event.resolution, event.data.counts, event.data.threshold);
|
111 | });
|
112 |
|
113 | var map = new ol.Map({
|
114 | layers: [
|
115 | new ol.layer.Tile({
|
116 | source: bing
|
117 | }),
|
118 | new ol.layer.Image({
|
119 | source: raster
|
120 | })
|
121 | ],
|
122 | target: 'map',
|
123 | view: new ol.View({
|
124 | center: [-9651695, 4937351],
|
125 | zoom: 13,
|
126 | minZoom: 12,
|
127 | maxZoom: 19
|
128 | })
|
129 | });
|
130 |
|
131 |
|
132 | var timer = null;
|
133 | function schedulePlot(resolution, counts, threshold) {
|
134 | if (timer) {
|
135 | clearTimeout(timer);
|
136 | timer = null;
|
137 | }
|
138 | timer = setTimeout(plot.bind(null, resolution, counts, threshold), 1000 / 60);
|
139 | }
|
140 |
|
141 | var barWidth = 15;
|
142 | var plotHeight = 150;
|
143 | var chart = d3.select('#plot').append('svg')
|
144 | .attr('width', barWidth * bins)
|
145 | .attr('height', plotHeight);
|
146 |
|
147 | var chartRect = chart[0][0].getBoundingClientRect();
|
148 |
|
149 | var tip = d3.select(document.body).append('div')
|
150 | .attr('class', 'tip');
|
151 |
|
152 | function plot(resolution, counts, threshold) {
|
153 | var yScale = d3.scale.linear()
|
154 | .domain([0, d3.max(counts.values)])
|
155 | .range([0, plotHeight]);
|
156 |
|
157 | var bar = chart.selectAll('rect').data(counts.values);
|
158 |
|
159 | bar.enter().append('rect');
|
160 |
|
161 | bar.attr('class', function(count, index) {
|
162 | var value = counts.min + (index * counts.delta);
|
163 | return 'bar' + (value >= threshold ? ' selected' : '');
|
164 | })
|
165 | .attr('width', barWidth - 2);
|
166 |
|
167 | bar.transition().attr('transform', function(value, index) {
|
168 | return 'translate(' + (index * barWidth) + ', ' +
|
169 | (plotHeight - yScale(value)) + ')';
|
170 | })
|
171 | .attr('height', yScale);
|
172 |
|
173 | bar.on('mousemove', function(count, index) {
|
174 | var threshold = counts.min + (index * counts.delta);
|
175 | if (raster.get('threshold') !== threshold) {
|
176 | raster.set('threshold', threshold);
|
177 | raster.changed();
|
178 | }
|
179 | });
|
180 |
|
181 | bar.on('mouseover', function(count, index) {
|
182 | var area = 0;
|
183 | for (var i = counts.values.length - 1; i >= index; --i) {
|
184 | area += resolution * resolution * counts.values[i];
|
185 | }
|
186 | tip.html(message(counts.min + (index * counts.delta), area));
|
187 | tip.style('display', 'block');
|
188 | tip.transition().style({
|
189 | left: (chartRect.left + (index * barWidth) + (barWidth / 2)) + 'px',
|
190 | top: (d3.event.y - 60) + 'px',
|
191 | opacity: 1
|
192 | });
|
193 | });
|
194 |
|
195 | bar.on('mouseout', function() {
|
196 | tip.transition().style('opacity', 0).each('end', function() {
|
197 | tip.style('display', 'none');
|
198 | });
|
199 | });
|
200 |
|
201 | }
|
202 |
|
203 | function message(value, area) {
|
204 | var acres = (area / 4046.86).toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
205 | return acres + ' acres at<br>' + value.toFixed(2) + ' VGI or above';
|
206 | }
|