WebGIS-openlayers-geoserver-/BoxSelection.html at master · Hyperionlucky/WebGIS-openlayers-geoserver- · 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
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Box Selection</title>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <link rel="stylesheet" href="ol/ol.css" type="text/css">
    <script src="ol/ol.js" type="text/javascript"></script>
    <style>
        .map {
            width: 100%;
            height: 400px;
        }

        .ol-dragbox {
            background-color: rgba(255, 255, 255, 0.4);
            border-color: rgba(100, 150, 0, 1);
        }
    </style>
</head>

<body>
    <div id="map" class="map"></div>
    <div id="info">No countries selected</div>
    <script type="text/javascript">
        var vectorSource = new ol.source.Vector({
            url: 'geojson/chinacapital.geojson',
            format: new ol.format.GeoJSON()
        });
        var wmsSource = new ol.source.ImageWMS({
            url: 'http://39.97.184.163/geoserver/WebGIS/wms',
            params: {
                'LAYERS': 'WebGIS:province_boundary,WebGIS:china_boundary,WebGIS:river,WebGIS:road,WebGIS:railway,WebGIS:capital'
            },
            serverType: 'geoserver',
            crossOrigin: 'anonymous'
        });
        var wmsLayer = new ol.layer.Image({
            source:wmsSource
        });
var vectorLayer = new ol.layer.Vector({
    source:vectorSource
});
        var map = new ol.Map({
            controls: ol.control.defaults().extend([
                new ol.control.ScaleLine({
                    units: 'degrees'
                })
            ]),
            layers: [
                wmsLayer,vectorLayer
            ],
            target: 'map',
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [104, 28],
                zoom: 2
            })
        });

        // a normal select interaction to handle click
        var select = new ol.interaction.Select();
        map.addInteraction(select);

        var selectedFeatures = select.getFeatures();

        // a DragBox interaction used to select features by drawing boxes
        var dragBox = new ol.interaction.DragBox({
            condition: ol.events.platformModifierKeyOnly
        });

        map.addInteraction(dragBox);

        dragBox.on('boxend', function () {
            // features that intersect the box geometry are added to the
            // collection of selected features

            // if the view is not obliquely rotated the box geometry and
            // its extent are equalivalent so intersecting features can
            // be added directly to the collection
            var rotation = map.getView().getRotation();
            var oblique = rotation % (Math.PI / 2) !== 0;
            var candidateFeatures = oblique ? [] : selectedFeatures;
            var extent = dragBox.getGeometry().getExtent();
            vectorSource.forEachFeatureIntersectingExtent(extent, function (feature) {
                candidateFeatures.push(feature);
            });

            // when the view is obliquely rotated the box extent will
            // exceed its geometry so both the box and the candidate
            // feature geometries are rotated around a common anchor
            // to confirm that, with the box geometry aligned with its
            // extent, the geometries intersect
            if (oblique) {
                var anchor = [0, 0];
                var geometry = dragBox.getGeometry().clone();
                geometry.rotate(-rotation, anchor);
                var extent$1 = geometry.getExtent();
                candidateFeatures.forEach(function (feature) {
                    var geometry = feature.getGeometry().clone();
                    geometry.rotate(-rotation, anchor);
                    if (geometry.intersectsExtent(extent$1)) {
                        selectedFeatures.push(feature);
                    }
                });
            }

        });

        // clear selection when drawing a new box and when clicking on the map
        dragBox.on('boxstart', function () {
            selectedFeatures.clear();
        });

        var infoBox = document.getElementById('info');

        selectedFeatures.on(['add', 'remove'], function () {
            var names = selectedFeatures.getArray().map(function (feature) {
                return feature.get('PINYIN');
            });
            if (names.length > 0) {
                infoBox.innerHTML = names.join(', ');
            } else {
                infoBox.innerHTML = 'No countries selected';
            }
        });
    </script>
</body>

</html>