OpenLayers Popup 使用教程-优快云博客

OpenLayers Popup 使用教程

ol-popupOpenLayers popup overlay项目地址:https://gitcode.com/gh_mirrors/ol/ol-popup

1. 项目介绍

OpenLayers Popup 是一个为开源地图库 OpenLayers 设计的简单弹出框覆盖层组件。它允许你在地图上显示信息窗口，并自动调整地图以确保窗口完全可见。这个项目由 Matt Walker 创建并维护，兼容 OpenLayers 的版本 5、6。

2. 项目快速启动

安装

首先，确保你已经安装了 OpenLayers。然后，你可以通过 npm 安装 ol-popup：

npm install ol-popup

基本使用

以下是一个简单的示例，展示如何在地图上单击时显示一个弹出窗口：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OpenLayers Popup 示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.0.0/ol.css">
    <style>
        #map {
            width: 100%;
            height: 100vh;
        }
        .ol-popup {
            position: absolute;
            background-color: white;
            padding: 15px;
            border: 1px solid #ccc;
            bottom: 12px;
            left: -50px;
        }
        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }
        .ol-popup-closer:after {
            content: "✖";
        }
    </style>
</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"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/ol@v7.0.0/dist/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-popup@4.0.0/dist/ol-popup.min.js"></script>
    <script>
        const map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([120, 30]),
                zoom: 10
            })
        });

        const container = document.getElementById('popup');
        const content = document.getElementById('popup-content');
        const closer = document.getElementById('popup-closer');

        const popup = new olPopup({
            element: container,
            autoPan: true,
            autoPanAnimation: {
                duration: 250
            }
        });

        map.addOverlay(popup);

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

        map.on('click', function(evt) {
            const feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
                return feature;
            });
            if (feature) {
                const coordinates = feature.getGeometry().getCoordinates();
                popup.setPosition(coordinates);
                content.innerHTML = '<p>你点击了一个要素</p>';
            }
        });
    </script>
</body>
</html>