OpenLayers基础教程——实现popup弹出框_openlayers popup

作者：笔触狂放9 | 2024-05-20 00:07:02

踩

openlayers popup

1、前言

在OpenLayers中，一般使用ol.Overlay实现popup弹出框，弹出框一般用于显示地图上兴趣点的一些属性信息，如下图所示。下面开始介绍实现方法。

在这里插入图片描述

2、实现popup弹出框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>popup弹出框</title>
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .ol-popup {
            position: absolute;
            background-color: #012456;
            padding: 15px;
            border: 1px solid #012456;
            bottom: 12px;
            left: -50px;
            min-width: 200px;
        }

        .ol-popup:after,
        .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }

        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }

        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
            color: white;
        }

        .ol-popup-closer:after {
            content: "✖";
        }

        #popup-content {
            color: white;
            padding-top: 10px;
        }

        #popup-content div {
            margin-bottom: 6px;
        }

        hr {
            color: white;
        }

        span {
            font-size: 13px;
        }

        button {
            border-radius: 5px;
            color: white;
            width: 63px;
            height: 30px;
        }

        .circle {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
            position: absolute;
            left: 150px;
            top: 100px;
        }

        .circle>img {
            width: 100%;
            height: 100%;
        }
    </style>
    <link rel="stylesheet" href="libs/ol/ol.css" />
    <script src="libs/ol/ol.js"></script>
</head>
<body>
    <div id="map"></div>
    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content">
            <span style="margin-left: 60px;font-size: 20px;">警员信息</span>
            <hr />
            <div>
                <span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span>
                <span id="name" style="margin-left: 10px;"></span>
            </div>
            <div>
                <span>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</span>
                <span id="type" style="margin-left: 10px;"></span>
            </div>
            <div>
                <span>警&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
                <span id="num" style="margin-left: 10px;"></span>
            </div>
            <div>
                <span>当前经度：</span>
                <span id="lon" style="margin-left: 10px;"></span>
            </div>
            <div>
                <span>当前纬度：</span>
                <span id="lat" style="margin-left: 10px;"></span>
            </div>
            <div>
                <span>手机号码：</span>
                <span id="tel" style="margin-left: 10px;"></span>
            </div>
            <div>
                <span>是否在线：</span>
                <span id="online" style="margin-left: 10px;"></span>
            </div>
            <hr />
            <div>
                <button style="background-color: #0d6DFD;border-color: #0d6DFD;">定位</button>
                <button style="background-color: #E6BF4D;border-color: #E6BF4D;">呼叫</button>
                <button style="background-color: #DC3546;border-color: #DC3546;">告警</button>
            </div>
        </div>
        <div class="circle">
            <img src="img/a.png" />
        </div>
    </div>

    <script>
        // 创建图层
        var layer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.0, 30.0]),
                        name: '霸王花',
                        type: '民警',
                        num: 'A0001',
                        lon: 120,
                        lat: 30,
                        tel: '123456789',
                        online: '是'
                    })
                ]
            }),
            style: new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 20,
                    fill: new ol.style.Fill({
                        color: 'red'
                    })
                })
            })
        });

        // 创建地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            })
        });

        // 获取popup的dom对象
        var container = document.getElementById('popup');
        var content = document.getElementById('popup-content');
        var closer = document.getElementById('popup-closer');

        // 创建popup
        var popup = new ol.Overlay({
            element: container,
            autoPan: true,
            positioning: 'bottom-center',
            stopEvent: true,
            autoPanAnimation: {
                duration: 250
            }
        });
        map.addOverlay(popup);

        // 关闭popup
        closer.onclick = function () {
            popup.setPosition(undefined);
            closer.blur();
            return false;
        };

        // 监听鼠标单击事件，点击feature后弹出popup
        map.on('click', function (e) {
            var coordinate = e.coordinate;
            var feature = map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
                return feature;
            });
            if (feature) {
                document.getElementById('name').innerText = feature.get('name');
                document.getElementById('type').innerText = feature.get('type');
                document.getElementById('num').innerText = feature.get('num');
                document.getElementById('lon').innerText = feature.get('lon');
                document.getElementById('lat').innerText = feature.get('lat');
                document.getElementById('tel').innerText = feature.get('tel');
                document.getElementById('online').innerText = feature.get('online');
                popup.setPosition(coordinate);
            }
        });

        // 监听鼠标移动事件，鼠标移动到feature区域时变为手形
        map.on('pointermove', function (e) {
            var pixel = map.getEventPixel(e.originalEvent);
            var hit = map.hasFeatureAtPixel(pixel);
            map.getTargetElement().style.cursor = hit ? 'pointer' : '';
        });
    </script>
</body>
</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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243

3、结语

需要注意的是：记得把Overlay的stopEvent属性设置为true，否则用鼠标点击popup面板时，地图会放大、面板的位置也会发生改变。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/595171