单击单选按钮时更改特定地标的颜色

Change color of particular placemark when onClick radiobutton

本文关键字：颜色 单选按钮 单击      更新时间：2023-09-26

我有一个使用 OpenLayers 的包含 10 多个地标的 KML 文件。我想做的是，当我点击单选按钮时，特定的地标会改变它的颜色。

有人知道如何做到这一点吗？

谢谢。

编辑：

所以这是我到目前为止所拥有的：

    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
        //////////////////////////////////////////////

和辐射按钮：

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

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

谢谢。

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

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>
相关文章：