| 1 | ---
|
| 2 | layout: example.html
|
| 3 | title: Region Growing
|
| 4 | shortdesc: Grow a region from a seed pixel
|
| 5 | docs: >
|
| 6 | <p>Click a region on the map. The computed region will be red.</p>
|
| 7 | <p>
|
| 8 | This example uses a <code>ol.source.Raster</code> to generate data
|
| 9 | based on another source. The raster source accepts any number of
|
| 10 | input sources (tile or image based) and runs a pipeline of
|
| 11 | operations on the input data. The return from the final
|
| 12 | operation is used as the data for the output source.
|
| 13 | </p>
|
| 14 | <p>
|
| 15 | In this case, a single tiled source of imagery data is used as input.
|
| 16 | The region is calculated in a single "image" operation using the "seed"
|
| 17 | pixel provided by the user clicking on the map. The "threshold" value
|
| 18 | determines whether a given contiguous pixel belongs to the "region" - the
|
| 19 | difference between a candidate pixel's RGB values and the seed values must
|
| 20 | be below the threshold.
|
| 21 | </p>
|
| 22 | <p>
|
| 23 | This example also shows how an additional function can be made available
|
| 24 | to the operation.
|
| 25 | </p>
|
| 26 | tags: "raster, region growing"
|
| 27 | cloak:
|
| 28 | As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
| 29 | ---
|
| 30 | <div id="map" class="map" style="cursor: pointer"></div>
|
| 31 | <table class="controls">
|
| 32 | <tr>
|
| 33 | <td>Threshold: <span id="threshold-value"></span></td>
|
| 34 | <td><input id="threshold" type="range" min="1" max="50" value="20"></td>
|
| 35 | </tr>
|
| 36 | </table>
|