OpenLayers标记地图点及点击地图点显示自定义弹出框

css代码(设置弹出框样式)

/*设置弹出框样式*/
        .ol-popup {
            position: absolute;
            background-color: #eeeeee;
            -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 #cccccc;
            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: "✖";
        }

弹出框主要html代码

<div id="popup" class="ol-popup">
    <div class="pophead" style="width:100%;height: 20px;">
        //弹出框标题
        <div id="popup-title" style="font:bold 15px sans-serif;align:left;position: absolute;top: 5px;left: 8px;color: #000000">设备信息</div>
        //弹出框右上角关闭效果
        <a href="#" id="popup-closer" class="ol-popup-closer" style="color:#8e908c;"></a>
    </div>
    //弹出框内容
    <div id="popup-content" style="padding: 10px"></div>
</div>

 地图上显示标记点(前提数据库已存有坐标值信息)

//创建地图
var map = new ol.Map({
        layers: [
            /*new ol.layer.Tile({
                source: new ol.source.OSM()
            })*/
            //加载高德地图数据源
            getTdtLayer("vec_w", '高德底图'),
            getTdtLayer("cva_w", '高德标注')

        ],
        //地图属性
        view: new ol.View({
            center: [113.927905, 22.578945],
            //初始地图缩放
            zoom: 15,
            //限制地图缩放最小级别
            minZoom: 4,
            //限制地图缩放最大级别
            maxZoom: 19,
            projection: 'EPSG:4326'
        }),
        target: 'map'
    });

//获取高德图层
    function getTdtLayer(lyr, name) {
        var urls = [];
        for (var i = 1; i < 5; i++) {
            //urls.push("http://t" + i + ".tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}&tk=a4c01359108c54c0c298e2e1c59c81c6")
            urls.push("http://wprd0" + i + ".is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}")
        }
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                urls: urls
                //url: "http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
            }),
            name: name
        });
        return layer;
    };

//显示图标
var pumpingStation = new ol.style.Style({  /*icon样式*/
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
            opacity: 0.95,
            src: '${pageContext.request.contextPath}/images/pumpingStation.jpg'
        }))
    });


//ajax从数据库读取图标坐标信息
    $.get(
        "${pageContext.request.contextPath}/xxx.action?wType=pumpingStation",
        function (data) {
            addPumpingStationJson(data);
        },
        "json"
    );

    function addPumpingStationJson(data) {
        //查询所有图标信息
        for (i = 0; i < data.features.length; i++) {
            //创建容器
            var waterIntakeLayer = new ol.layer.Vector({
                source: new ol.source.Vector(),
                name: '图标'
            });
            //取坐标值
            var feature1 = data.features[i];
            var featurexx = new ol.Feature({
                geometry: new ol.geom.Point(feature1.geom.coordinates)
            });
            //添加点的时候赋值属性
            featurexx.setProperties({
                id: feature1.w_id,
                name: feature1.w_name,
                desc: feature1.w_desc,
                type: "device"
            });
            //添加图标图案
            featurexx.setStyle(pumpingStation);
            //将图标特性添加进容器中
            waterIntakeLayer.getSource().addFeature(featurexx);
            //添加到地图显示
            map.addLayer(waterIntakeLayer);
        }
    }

点击地图上标记点弹出自定义弹出框

//拿到弹出框元素
var container = document.getElementById("popup");
//拿到弹出框内容元素
var content = document.getElementById("popup-content");
//拿到弹出框关闭元素
var popupCloser = document.getElementById("popup-closer");

    //创建弹出框容器
    var overlay1 = new ol.Overlay({
        //设置弹出框的容器
        element: container,
        //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
        autoPan: true,
        autoPanAnimation: {
            duration: 250
            //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
        }
    });
    //点击图标显示自定义弹出框
    map.on('click',function(e){
        var pixel = map.getEventPixel(e.originalEvent);
        map.forEachFeatureAtPixel(pixel,function(feature){
            var attr = feature.getProperties();
            var coodinate = e.coordinate;
            content.innerHTML = "<ul>" +
                    '<li>设备名称: ' + attr.name +'</li>' +
                    '<li>设备描述:' + attr.desc + '</li>' +
                    "</ul>";
            overlay1.setPosition(coodinate);
            map.addOverlay(overlay1);
        });
    });

    //关闭弹出框操作
    popupCloser.addEventListener('click',function(){
        overlay1.setPosition(undefined);
    });

效果如图：