Openlayers自定义简单popup

时间：2022-09-11 12:56:20

OpenLayers中可以使用很多种类型的popup,大家可以到Openlayers的 popupMatrix.html示例中看。之前存在这样一个错误的想法：popup和marker是绑定的，要有popup就必须有marker。然后最近为了实现这样一样需求：在接图表的网格中点击，产生相应的一个简单的popup只有一个些简单的信息，不需要和其他项目中的nestpupop那么多的内容。经过自己的摸索后，终于实现。先展示下效果图：

Openlayers自定义简单popup

实现方法不难，主要如下：

1.给地图map对象添加click事件

map.events.register('click', map, function (e) {

               var position = map.getLonLatFromPixel(e.xy);

               dealwithMapClick(position);

           });

　　

2.地图点击事件处理，dealwithMapClick

/在地图上添加操作的气泡

function dealwithMapClick(pos){

                var lonlat = new OpenLayers.LonLat(pos.lon, pos.lat);

                var size=new OpenLayers.Size(110,155);

                var popup = new OpenLayers.Popup.Anchored('12', lonlat, size, getPopupCon(), null, false, null);

                var popups = map.popups;

                for (var i = 0; i < popups.length; i  ) {

                    popups[i].destroy();

                }

                map.addPopup(popup);

                initPopupBtnEvents();

}

　　

3.popup内容填充

 /*填充popup的内容*/

    function getPopupCon() {

        var str = '<div id="selectedAreaPopup">'

                            '<div class=areaPopupHead>'

                                data.name

                            '</div>'

                            '<div class="areaPopupItem">'

                                '<div class="left">'

                                    '<img src="'   baseUrl   'Content/images/indexMap/showReport.png"/>'

                                '</div>'

                                '<div class="right">'

                                    '<label>查看报告</label>'

                                '</div>'

                            '</div>'

                            '<div class="areaPopupItem abled">'

                                 '<div class="left">'

                                    '<img src="'   baseUrl   'Content/images/indexMap/closePopup.png"/>'

                                '</div>'

                                '<div class="right">'

                                    '<label>关闭气泡</label>'

                                '</div>'

                            '</div>'

                            '<div id="noReportTips">报告建设中，不可查看</div>'

                      '</div>';

        return str;

}

　　

这个效果相对nestpupop来说，比例简单。没有锚点，只能适合简单的使用。

相关文章