스타일이있는 사각형의 최소 크기

사용자가 세계지도에서 영역을 표시 할 수있는 응용 프로그램을 작성 중입니다. 이제는이 영역이 매우 작아서 확대되지 않을 때 클릭하기가 어렵습니다.스타일이있는 사각형의 최소 크기

스타일 기능에서 (사각형 기능을 항상 렌더링해야 함) 정의 할 수있는 방법이 있습니까? 적어도 예를 들면 10px × 10px?

업데이트 : 현재 사용하는 몇 가지 코드 :

도면 측 :

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') + ')' 
    }) 
    })]; 
}

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 
});

과 표시면에

출처

2016-08-15 levu

당신은 몇 가지 관련 코드, 특별히'ol.interaction.Draw'을 보여줄 수 있습니다. –

@JonatasWalker 글쎄, 그림 그리기가 아니라 (세계)지도에 사각형을 표시 할 때가 아닙니다. 베를린 주변에 직사각형을 만들고 나서 그것을 세계지도에 표시한다고 가정 해 봅시다. 거기에 그냥 1px × 1px 크기 (+ 경계의 너비) – levu

하지만 워크 플로가 어떻게됩니까? 어떤 사용자는 직사각형을 만들어 GeoJSON에 저장합니까? –

Usin 스타일 함수는 좋은 생각입니다. 스타일 함수의 두 번째 인수는 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

스타일이있는 사각형의 최소 크기

답변

관련 문제