开发者

Adding popup info in openlayers?

Im using th开发者_运维技巧is code to load a kml file over the map which in this case Im using OpenStreetMap.

I want to know how can I add a popup when clicking on the kml(road) so that it shows some information about it.

var line_1 = new OpenLayers.Layer.GML(
    'Line - 1', 
    "lines/line_1.kml",
    {
        visibility: true,
        format: OpenLayers.Format.KML,
        style: 
        {
            strokeWidth: 4, 
            strokeColor: "#ff0000", 
            strokeOpacity: 1
        },
        projection: map.displayProjection
    }
);


A GML layer is really a Vector layer instantiated with GML data. So you can look into how Vector layers should be used for opening popups. Your example is already doing that.

They use a Select Control and opens the popup when a feature is selected:

selectControl = new OpenLayers.Control.SelectFeature(polygonLayer,
            {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});

Where polygonLayer in your case would be line_1 instead.

Create a method onFeatureSelect where you open a popup:

        function onFeatureSelect(feature) {
        selectedFeature = feature;
        popup = new OpenLayers.Popup.FramedCloud("chicken", 
                                 feature.geometry.getBounds().getCenterLonLat(),
                                 null,
                                 "<div style='font-size:.8em'>Feature: " + feature.id +"<br>Area: " + feature.geometry.getArea()+"</div>",
                                 null, true, onPopupClose);
        feature.popup = popup;
        map.addPopup(popup);
    }

Where map is your map object.

Try it out and comment on your progress or questions.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜