Question

我使用OpenLayers创建了一个包含10个以上地标的KML文件。我想要做的是，当我点击radiobutton时，一个特定的地标会改变它的颜色。

有人知道怎么做吗？

感谢。

编辑：

所以这就是我到目前为止：

    function init(){

        ///////////////////////////////////////////////
                  CONTROLS AND MAP STUFF
        //////////////////////////////////////////////     


        var myvector = new OpenLayers.Layer.Vector("myvector", {

            projection: map.displayProjection,
            styleMap: new OpenLayers.StyleMap(
                 { 'default': 
                    {
                    strokeColor: "#777777",
                    strokeOpacity: 1,
                    strokeWidth: "2",
                    fillColor: "#FFF900",
                    fillOpacity: 1,
                    pointRadius: 8,
                    pointerEvents: "visiblePainted",                        
                    graphicName: "circle",
                }
            }),
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: url_time,
                format: new OpenLayers.Format.KML({
                    extractStyles: false,
                    extractAttributes: true
                })
            })
        });


        map.addLayers([wms, wms2, myvector]);


        select = new OpenLayers.Control.SelectFeature(myvector);

        myvector.events.on({
            "featureselected": onFeatureSelect,
            "featureunselected": onFeatureUnselect
        });            
        map.addControl(select);
        select.activate();   
        map.zoomToExtent(new OpenLayers.Bounds(-53,-21,13,22));
    }

    function switchLabels() {

        /////// PROBABLY HERE IS THE PLACE TO DO THE TRICK ////////

        myvector.redraw();

    }

        ///////////////////////////////////////////////
                        SOME OTHER THINGS
        //////////////////////////////////////////////

和radion按钮：

<input name="button1" type="radio" value="button1" onClick="switchLabels()">

Here是显示此switchLabels的帖子，但我不知道如何更改由一个地标创建的点。

感谢。

Answer 1

行。我放弃使用KML做我想做的事。对于那些需要在OpenLayers中更改向量的某些属性的人来说，这里有一个可能的解决方案：

var features = [];
        features[0] = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point(10,10),
            {
            name : "Hello",
            body : "world",
            }, {strokeColor: "#777777",strokeOpacity: 1,strokeWidth: "2",fillColor: "#FFF900",fillOpacity: 1,pointRadius: 8,pointerEvents: "visiblePainted",graphicName: "circle"});
        features[1] = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point(15,10),
            {
            name : "Hello",
            body : "Mars",
            }, {strokeColor: "#777777",strokeOpacity: 1,strokeWidth: "2",fillColor: "#FFF900",fillOpacity: 1,pointRadius: 8,pointerEvents: "visiblePainted",graphicName: "circle"});

  ///////////// POPUPS //////////////

vector = new OpenLayers.Layer.Vector("LAYER",{
    eventListeners:{
        'featureselected':function(evt){
            var feature = evt.feature;
            var popup = new OpenLayers.Popup.FramedCloud("popup",
                OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
                new OpenLayers.Size(350,350),
                feature.attributes.name + feature.attributes.body,
                                 null, false, onPopupClose
            );
    popup.maxSize = new OpenLayers.Size(350, 350);
       popup.minSize = new OpenLayers.Size(350, 350);
            feature.popup = popup;
            map.addPopup(popup);
        },
        'featureunselected':function(evt){
            var feature = evt.feature;
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }
    }
});

function onPopupClose(evt) {
        select.unselectAll();
    }

vector.addFeatures(features);

// create the select feature control
var selector = new OpenLayers.Control.SelectFeature(vector,{
    click:true,
    autoActivate:true
}); 


map.addLayers([vector]);
map.addControl(selector);
map.zoomToExtent(new OpenLayers.Bounds(-53,-21,13,22));        
}

///////////////////// FUNCTION TO CHANGE THE VECTOR STYLE ///////////
function switchColors(p_ind,p_id) {
  if (eval('document.form.' + p_id).checked == 1){
    vector.features[p_ind].style = {
                strokeColor: "#777777",
                    strokeOpacity: 1,
                    strokeWidth: "2",
                    fillColor: "#FF0000",
                    fillOpacity: 1,
                    pointRadius: 8,
                    pointerEvents: "visiblePainted",                        
                    graphicName: "circle"
     };
    }
  else {
    vector.features[p_ind].style = {
          strokeColor: "#777777",
          strokeOpacity: 1,
          strokeWidth: "2",
          fillColor: "#FFF900",
          fillOpacity: 1,
          pointRadius: 8,
          pointerEvents: "visiblePainted",                        
          graphicName: "circle"
      };
    }
    vector.redraw();
}

然后收音机：

<form name="form" method="post" action="action.php">
<input name="p1" type="checkbox" value="p1" onClick="switchColors(0,'p1');">
<input name="p2" type="checkbox" value="p2" onClick="switchColors(1,'p2');">
</form>

在onClick radiobutton上更改特定地标的颜色

1 个答案: