基于openlayer4打点,点击点位弹出窗


<!DOCTYPE html>
<html>
<head>
<title>打点位、点击点位弹出信息</title>
<!-- <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css"> -->
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<!-- openlayers:地图控件 -->
<script src="js/openlayers/v4.3.3-dist/ol.js"></script>
<!-- openlayers CSS 文件 -->
<link rel="stylesheet" href="js/openlayers/v4.3.3-dist/ol.css" type="text/css" />
<!-- 弹出窗样式 -->
<link rel="stylesheet" href="js/OLMap/map-pop.css" type="text/css" />

</head>

<body>
    <div id="map" class="map"></div>
    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content" style="width: 360px; height: 210px;"></div>
    </div>
            <script>
                // 初始给的中心点坐标。
                var centerX = 117.3626;
                var centerY = 32.9184;
                // 我们需要一个vector的layer来放置图标
                var layer = new ol.layer.Vector({
                    source : new ol.source.Vector()
                })

                var map = new ol.Map({
                    layers : [ new ol.layer.Tile({
                        // 加载互联网地图
                        source : new ol.source.OSM()
                    }), layer ],
                    target : 'map',
                    view : new ol.View({
                        projection : 'EPSG:4326',
                        center : [ 117.204883, 31.840285 ],
                        zoom : 10
                    })
                });

                var lnglats = [
                    [117.204883, 31.840285],
                    [117.2616140654, 31.8626171434],
                    [117.2870114613, 31.8588879936],
                    [117.2822851546, 31.8862905440]
                ];
                // 创建一个Feature,并设置好在地图上的位置
                var anchor = new ol.Feature({
                    geometry : new ol.geom.Point(lnglats[0])
                });
                // 设置样式,在样式中就可以设置图标
                anchor.setStyle(new ol.style.Style({
                    image : new ol.style.Icon({
                        src : 'img/1_03.png'
                    }),
                    //anchor: [0.5, 1]    // 设置图标位置
                }));
                // 添加到之前的创建的layer中去
                layer.getSource().addFeature(anchor);
                // 弹出窗容器DIV
                var container = document.getElementById("popup");
                // 弹出窗内容DIV
                var content = document.getElementById("popup-content");
                // 弹出窗关闭
                var popupCloser = document.getElementById("popup-closer");
                var overlay = new ol.Overlay({
                    //设置弹出框的容器
                    element : container,
                    //是否自动平移,即假如标记在屏幕边缘,弹出时自动平移地图使弹出框完全可见
                    autoPan : true,
                    autoPanAnimation : {
                        duration : 250
                    //当Popup超出地图边界时,为了Popup全部可见,地图移动的速度. 
                    }
                });
                // openlayer4只有针对整个地图事件监听,可以通过以下方式达到对feature监听,也可对feature自定义点击事件。
                map.on('click', function(e) {
                    //在点击时获取像素区域
                    var pixel = map.getEventPixel(e.originalEvent);
                    map.forEachFeatureAtPixel(pixel, function(feature) {
                        //coodinate存放了点击时的坐标信息
                        var coodinate = e.coordinate;
                        console.log(coodinate);
                        //设置弹出框内容,可以HTML自定义
                        content.innerHTML = coodinate;
                        //设置overlay的显示位置
                        overlay.setPosition(coodinate);
                        //显示overlay
                        map.addOverlay(overlay);
                    });
                });
                popupCloser.addEventListener('click', function() {
                    overlay.setPosition(undefined);
                });
                /**
                * 为map添加鼠标移动事件监听,当指向标注时改变鼠标光标状态
                */
                map.on('pointermove', function (e) {
                    var pixel = map.getEventPixel(e.originalEvent);
                    var hit = map.hasFeatureAtPixel(pixel);
                    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
                })

            </script>
            </script>
</body>
</html>

弹出窗样式:

.ol-popup {
        position: absolute;
        background-color: rgba(1,61,85,.7);
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #013d55;
        bottom: 12px;
        left: -50px;
        min-width: 280px;
    }
    .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: #eeeeee;
        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;
    }
    .ol-popup-closer:after {
        content: "✖";
        color: #c3c3c3;
    }

转载自:https://blog.csdn.net/qq_27186245/article/details/82227234

You may also like...