0

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()">

これはこのswitchLabelsを示す投稿ですが、1つの目印によって作成されたポイントを変更する方法がわかりません。

ありがとう。

4

1 に答える 1

0

わかった。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>
于 2012-06-27T15:33:38.293 に答える