風格中矩形的最小尺寸

我在寫一個應用程序，用戶可以在世界地圖上標記區域。現在這些區域可能非常小，因此當不放大時很難點擊它們。風格中矩形的最小尺寸

有沒有一種方法可以定義（例如，在樣式函數中）應始終呈現（矩形）特徵至少例如10px×10px？

更新：上拉出側

：一些代碼，我目前使用

var draw = new ol.interaction.Draw({ 
    source: vectorSource, 
    type: 'LineString', 
    geometryFunction: function(coordinates, geometry) { 
    if(!geometry) { 
     geometry = new ol.geom.Polygon(null); 
    } 
    var start = coordinates[0]; 
    var end = coordinates[1]; 
    geometry.setCoordinates([[ 
     start, 
     [start[0], end[1]], 
     end, 
     [end[0], start[1]], 
     start 
    ]]); 
    return geometry; 
    }, 
    maxPoints: 2 
}); 

draw.on('drawend', function(e) { 
    var extent = e.feature.getGeometry().getExtent(); 
    extent = app.map.rlonlate(extent); // own function to convert it from map coordinates into lat/lon 
    // some code to save the extent to the database 
});

，並在顯示方面：

vectorSource.addFeature(
    new ol.Feature({ 
    geometry: ol.geom.Polygon.fromExtent(app.map.lonlate(extent)), 
    // … some more custom properties like a display name … 
    }) 
);

風格功能：

function(feature) { 
    return [new ol.style.Style({ 
    stroke: new ol.style.Stroke({ 
     color: feature.get('mine') ? '#204a87' : '#729fcf', 
     width: 2 
    }), 
    fill: new ol.style.Fill({ 
     color: 'rgba(255, 255, 255, ' + (feature.get('mine') ? '0.5' : '0.2') + ')' 
    }) 
    })]; 
}

來源

2016-08-15 levu

你可以顯示一些相關的代碼，特別是'ol.interaction.Draw'。 –

@JonatasWalker好吧，它不是關於繪製時，而是在（世界）地圖上顯示矩形時。假設我在柏林周圍創建了一個矩形，然後將其顯示在世界地圖上。在那裏只有1px×1px的大小（+邊框的寬度） – levu

但是工作流程如何？一些用戶創建一個矩形並將其保存到GeoJSON？ –

Usin g風格功能是一個好主意。樣式函數的第二個參數是resolution，您可以使用該函數檢查您的要素幾何體是否小於例如。 10像素，在當前的分辨率：

var styleFn = function(feature, resolution) { 
    var minSizePx = 30; 
    var minSize = minSizePx * resolution; 
    var extent = feature.getGeometry().getExtent(); 

    if (ol.extent.getWidth(extent) < minSize || ol.extent.getHeight(extent) < minSize) { 
    // special style for polygons that are too small 
    var center = new ol.geom.Point(ol.extent.getCenter(extent)); 
    return new ol.style.Style({ 
     geometry: center, 
     image: ... 
    } else { 
    // normal style 
    return defaultStyle; 
    } 
};

http://jsfiddle.net/ukc0nmy2/1/

來源

2016-08-20 17:31:17 tsauerwein

謝謝，幫助！ – levu

風格中矩形的最小尺寸

回答

相關問題