ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript – 如何使用Openlayers文本层编辑弹出窗口

2019-06-21 03:20:17  阅读:175  来源: 互联网

标签:javascript gis openlayers


我正在使用Openlayers创建一个大约1000点的地图.目前,当我点击一个点的图标时,该点的描述会显示在弹出窗口中,要退出弹出窗口,我需要再次点击同一个点的图标.有没有办法修改代码,以便我可以按一个关闭按钮或我可以点击地图上的任何地方,以便这个弹出窗口将再次关闭?我知道有一种方法,如果我只是使用常规弹出窗口,但我使用的是Openlayers.layer.text图层.

var pois = new OpenLayers.Layer.Text( "Frequencies",
                { location:"./frequencyrange.txt",
                  projection: map.displayProjection
                });
        map.addLayer(pois);

我使用此代码添加文本图层.在文本文件中将是以下列:lon lat标题描述图标iconSize iconOffset.我应该为弹出窗口添加另一列吗?我已经尝试了一个应该修改弹出窗口大小的列,但它对我不起作用.所以,到目前为止,我还没有能够修改弹出窗口,除了它的内容.

解决方法:

如果要刷新具有控件的地图,请注意不要有多个控件和事件处理程序(请参阅本文末尾的最后一个注释).

两个不同的事件可以关闭弹出窗口:弹出窗口中的CLOSE(‘X’)框和一个自动过程,当弹出窗口失去焦点时关闭弹出窗口.

此伪代码取自功能映射,其中弹出窗口在用户单击任何MARKER时显示.

我在地图上创建一个图层(在这种情况下,从动态KML文件,由PHP解析):

var urlKML = 'parseKMLTrack07d.php';         
var layerKML = new OpenLayers.Layer.Vector("KML1", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: urlKML,
                format: new OpenLayers.Format.KML({
                    extractStyles: true, 
                    extractAttributes: true,
                    maxDepth: 2
                })
            })
        });

然后我创建一个选择控件,我称之为’selectStop’,我将2个函数关联到EVENTS(当选择和取消选择MARKER时):

var selectStop = new OpenLayers.Control.SelectFeature(layerKML,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
layerKML.events.on({
            "featureselected": onFeatureSelect,
            "featureunselected": onFeatureUnselect
        });
map.addControl(selectStop);
selectStop.activate();

这些是选择MARKER或UNSELECTED时的两个功能

function onFeatureSelect(event) {
    var feature = event.feature;
    var content = feature.attributes.name + '<br/>'+feature.attributes.description;
    popup = new OpenLayers.Popup.FramedCloud("chicken", 
                             feature.geometry.getBounds().getCenterLonLat(),
                             new OpenLayers.Size(100,100),
                             content,
                             null, true, onFeatureUnselect);
    feature.popup = popup;
    map.addPopup(popup);
    // GLOBAL variable, in case popup is destroyed by clicking CLOSE box
    lastfeature = feature;
}
function onFeatureUnselect(event) {
    var feature = lastfeature;  
    if(feature.popup) {
        map.removePopup(feature.popup);
        feature.popup.destroy();
        delete feature.popup;
    }
}

请注意,在onFeatureSelect函数中,我创建一个名为’lastfeature’的GLOBAL变量.我这样做的原因是我的onFeatureUnselect将用于销毁弹出窗口,以防它是未选择的或关闭的CLOSE BOX.

如果我没有将该功能保存为全局变量,我将不得不单独处理取消选择和关闭框,因为每个原因都有所不同.

要在弹出窗口中创建CLOSE BOX,我将倒数第二个参数(在onFeatureSelect函数的弹出声明中)设置为TRUE,并将onFeatureUnselect命名为关闭框的回调函数:

popup = new OpenLayers.Popup.FramedCloud("chicken", 
                         feature.geometry.getBounds().getCenterLonLat(),
                         new OpenLayers.Size(100,100),
                         content,
                         null, true, onFeatureUnselect);

最后注意:如果您在图层上使用刷新,请注意不要复制处理程序.在这种情况下,当你的javascript启动时,创建一个变量’id1′,它将保存你的selectStop控件ID.在创建新控件和处理程序之前检查它是否存在.像这样:

if (id1 == '') {
    var selectStop = new OpenLayers.Control.SelectFeature(layerKML,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});

    layerKML.events.on({
                "featureselected": onFeatureSelect,
                "featureunselected": onFeatureUnselect
            });
    map.addControl(selectStop);
    selectStop.activate(); 
    id1 = selectStop.id;
} else {
    selectStop = OpenLayers.Control.SelectFeature(layerKML,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
}

您可以通过在onFeatureSelect中发出警报来检查是否复制了事件处理程序.如果你点击一个标记,你会得到多个警报窗口,那么你有重复的处理程序.你会得到一个印象,你不能破坏弹出窗口,这是不真实的.你销毁了一个弹出窗口,但你有N个相同的弹出窗口(顺便说一句,ID相同).

标签:javascript,gis,openlayers
来源: https://codeday.me/bug/20190621/1251031.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有