GIS-Cloud-Examples/spatialfilter.html at master · giscloud/GIS-Cloud-Examples · GitHub

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
<!DOCTYPE html>
<html>
    <title>Spatial filter</title>

    <link rel="stylesheet" type="text/css" href="examples.css"/>
    <script type="text/javascript" src="https://api.giscloud.com/1/api.js"></script>

    <script type="text/javascript">
        var $ = giscloud.exposeJQuery(), mapId = 1198964, layerId = 3163194, geometryObject, viewer;

        function displayFeatures(result) {
            var allFeatureIds = [];

            viewer.selection.clear();

            result.forEach(function(feature) {
                allFeatureIds.push(feature.id);
            });

            // select features on map
            viewer.selection.add(allFeatureIds, layerId)
            $("#result").text("[" + allFeatureIds.join(", ") + "]");
        }

        function doSpatialFilter(operation) {
            giscloud.geoutils.spatialFilter(geometryObject, [layerId], {srid: 900913, operation: operation})
            .done(function(result) {
                displayFeatures(result)
            });
        }

        function reset() {
            // clear current polygon from map
            viewer.graphic.clear();

            // clear current selection from map
            viewer.selection.clear();

            // clear text
            $("#result").text("[]");

            enableDrawing();
        }

        function enableDrawing() {
            // set viewer to drawing mode
            viewer.graphic.draw("polygon").done(function(result) {
                geometryObject = result.geometry();
            });
        }

        giscloud.ready(function () {
            // create a viewer
            viewer = new giscloud.Viewer("mapViewer", mapId, { slider: true });

            viewer.loading.done(function() {
                enableDrawing();
                $("#draw-new-polygon").prop("disabled", false);
                $("#intersect").prop("disabled", false);
                $("#within").prop("disabled", false);
                $("#outside").prop("disabled", false);
                $("#contains").prop("disabled", false);
                $("#overlaps").prop("disabled", false);
                $("#touches").prop("disabled", false);
            });
        });
    </script>

    <style type="text/css">
        #result-container {
            margin: 20px 0;
            font-size: 16px;
        }
        #draw-new-polygon {
            margin-bottom: 20px;
        }
        #selected-features {
            display: inline;
        }
        #result {
            color: blue;
            display: inline;
        }
    </style>

    <body>
        <a href="https://github.com/giscloud/GIS-Cloud-Examples/">
            <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
        </a>
        <h1>Spatial filter</h1>
        <p>
            Draw a polygon by clicking a few points on the map. After that, pick a spatial filter operation to be executed on the layer.
            As a result, you will get feature IDs that are returned from the spatial filter request.
        </p>
        <p>You can reset the polygon you drew and draw a new one by clicking the "Draw new polygon" button.</p>

        <button id="draw-new-polygon" disabled="disabled" onclick="reset()">Draw new polygon</button>
        <div id="button-container">
            <button id="intersect" disabled="disabled" onclick="doSpatialFilter('intersect')">Intersect</button>
            <button id="within" disabled="disabled" onclick="doSpatialFilter('within')">Within</button>
            <button id="outside" disabled="disabled" onclick="doSpatialFilter('outside')">Outside</button>
            <button id="contains" disabled="disabled" onclick="doSpatialFilter('contains')">Contains</button>
            <button id="overlaps" disabled="disabled" onclick="doSpatialFilter('overlaps')">Overlaps</button>
            <button id="touches" disabled="disabled" onclick="doSpatialFilter('touches')">Touches</button>
        </div>
        <div id="result-container">
            <div id="selected-features">Selected Feature IDs: </div>
            <div id="result">[]</div>
        </div>
        <div id="mapViewer"></div>

        <p>
            The code:
        </p>
<pre>
// geometryObject is a giscloud.geometry object. <a href="http://developers.giscloud.com/javascript-api/javascript-reference/#giscloud.geometry.Polygon" target="blank">See more</a>
// it is the polygon we drew on the map
// it can be created from wkt by calling giscloud.geometry.fromOGC(polygonWkt)

giscloud.geoutils.spatialFilter(geometryObject, [layerId], {srid: 900913, operation: operation})
.done(function(result) {
    displayFeatures(result)
});
</pre>
    </body>
</html>