如何防止图像在openlayers中缩放时调整大小?

时间:2014-05-06 07:10:21

标签: javascript openlayers-3

执行此操作后,我在地图上得到两个点,但是当我缩放时,图像会变小。

如何保持图像的大小固定?以下是javascript代码。

function init() {
    var feature_data = {
        "type":"FeatureCollection",
        "features": [{
            "type":"Feature",
            "id":4,
            "geometry": {
                "type":"Point",
                "coordinates": [65.216,33.677]
            },
            "properties": {
                "name":"Afghanistan",
                "population":25067407,
                "pop_0_14":47,
                "pop_15_59":49.3,
                "pop_60_above":3.7
            }
        },  
        {
           "type":"Feature",
           "id":8,
           "geometry": {
               "type":"Point",
               "coordinates":[20.068,41.143]
           },
           "properties: {
               "name":"Albania",
               "population":3153731,
               "pop_0_14":26.3,
               "pop_15_59":61.4,
               "pop_60_above":12.3
            }
        }]
    };

    var map = new OpenLayers.Map('map_element',{});
    var wms_layer = new OpenLayers.Layer.WMS('OpenLayers WMS',
        'http://vmap0.tiles.osgeo.org/wms/vmap0', 
        {layers: 'basic'},
        {}
    );

    var format_geojson = new OpenLayers.Format.GeoJSON({});
    var vector_strategies = new OpenLayers.Strategy.Cluster({});
    var vector_layer= new OpenLayers.Layer.Vector('bar graph visualization',
        {strategies: vector_strategies}
    );
    vector_layer.addFeatures(format_geojson.read(feature_data));
    map.addLayers([wms_layer,vector_layer]);
    if(!map.getCenter()) {
        map.zoomToMaxExtent();
    }
}

1 个答案:

答案 0 :(得分:0)

您实际上想要在每次缩放变化后对点强制调整大小事件。

您可以收听缩放事件和update the pointRadius style attribute

或者您可以收听缩放事件和resize each point feature using the resize function

map.events.register("zoomend", map, function() {
    var currentZoom = map.getZoom();
    // check for desired zoom levels
    if (currentZoom == 5) {

        // update the style's pointRadius 
        // style.pointRadius = newRadius;

        // OR
        // resize each individual point feature 
        // loop through the point features
            // pointFeature.geometry.resize(scale, origin);

        // and after either strategy
        // redraw the point layer 

    } else if (currentZoom == 6) {
        ...
    } ...
}