1

我有这个 Javascript，它通过 Openlayers 显示地图并在地图上用文本绘制点。出于某种原因，文本图层在第一次单击时不起作用。这是该网站的链接。这也是我第一个使用 Javascript 的项目，如果有任何帮助，我将不胜感激。

谢谢！

代码：

//---------------------------------------------------------------------
// creates a filtered point vector layer, the base of the text layer 
// and also genetates a table
//
function createVector( ajaxUrl ) {

    console.log( ajaxUrl );

    //remove all the layers except the base (google) layers
    while( map.layers.length > 4 )
    map.removeLayer(map.layers[map.layers.length - 1]);

    var date = $('#datepicker').val();
    var filter = $('input:radio[name=filter]:checked').val();

    //json, ajax, and kml urls 
    var jsonUrl = "/map/desc/";
    var url = "/map/test-";
    url += date;
    jsonUrl += date;
    url += "/"+filter;
    jsonUrl += "/"+filter;
    url += ".kml"

    //create a new layer for the points
    points = new OpenLayers.Layer.Vector("Albedo Data Points", {
        strategies: [new OpenLayers.Strategy.Fixed()],
        protocol: new OpenLayers.Protocol.HTTP({
            url: url,
            format: new OpenLayers.Format.KML({
                extractStyles: true,
                extractAttributes: true
            })
    }),
    });

    //create a style map layer for the text. Empty at this point
    text = new OpenLayers.Layer.Vector("Text Layer", {
     styleMap: new OpenLayers.StyleMap({'default':{
                pointerEvents: "visiblePainted",

                label : "${val}",
                fontColor: "${color}",
                fontSize: "12px",
                fontFamily: "Courier New, monospace",
                fontWeight: "bold",
                labelAlign: "${align}",
                labelXOffset: "${xOffset}",
                labelYOffset: "${yOffset}",
                labelOutlineColor: "white",
                labelOutlineWidth: 3

    } }),
    });

    //get the json from the model
    $.getJSON(jsonUrl, function(json, textStatus, jqXHR) {
    data = json;
    });

    //load this function after the map has been processed
    points.events.register( 'loadend', points, function (e) {   
    addTextLayer( filter );
    });     

    //add all the layers to the map
    map.addLayers( [points, text] );

    //and the control
    selectControl = new OpenLayers.Control.SelectFeature(points);
    map.addControl(selectControl);
    selectControl.activate();
    points.events.on({
        'featureselected': onFeatureSelect,
        'featureunselected': onFeatureUnselect
    });

    //generate the table
    ajaxUrl += '?q=';
    $( '#results' ).html( ' ' ).load( ajaxUrl + date );
}

//---------------------------------------------------------------------
// loops through the points layer to grab the coordiantes, and
// adds features to the text layer 
//
function addTextLayer( filter ) {

    for( var i = 0; i < points.features.length; i++ ) {

    var value;

    if( filter == "albedo" )
        value = data[i].fields.albedo;
    else
        value = data[i].fields.snow_Density;

        var temp = new OpenLayers.Geometry.Point(
        points.features[i].geometry.x, 
        points.features[i].geometry.y 
    );

    var textFeature = new OpenLayers.Feature.Vector( temp );
        textFeature.attributes = {
        val: value,
        color: 'blue',
        align: "cm",
        xOffset: 20,
        yOffset: 10,        
    };

    text.addFeatures( textFeature );
    };     
}
4

0 回答 0