動態改變圓圈大小的OpenLayers

我試圖動態地增加使用圓形圍欄尺寸：動態改變圓圈大小的OpenLayers

$(document).on("keypress", "#radius", function() { 
    circleFeature.set("radius",parseInt($("#radius").val())); 
});

我最初創建使用此代碼的圈子：

var circleFeature = new ol.Feature(circle); 
    circleFeature.set('fenceId', fenceId); 
    circleFeature.set('latitude', latitude); 
    circleFeature.set('longitude', longitude); 
    circleFeature.set('radius', givenRadius); 
    circleFeature.set('circleRadius', radius); 
    circleFeature.set('desc', desc); 
    circleFeature.set('isActive', isActive);

當我按下輸入半徑，按鍵事件被觸發，但圓形不會改變大小。

來源

2016-09-21 Vivek Sadh

您正在更改您的功能屬性，但不是您的ol.geom.geometry或ol.style.Style的屬性。我想你的幾何圖形是ol.geom.Circle。

然後你就可以使用它代替：

$(document).on("keypress", "#radius", function() { 
    circleFeature.getGeometry().setRadius(parseInt($("#radius").val())); 
});

來源

2016-09-22 07:19:15 Lars

它說setRadius不是功能。 –

你的幾何是'ol.geom.Circle'？你能提供一個JSFiddle與你的相關代碼嗎？ – Lars

您不要在幾何體上設置半徑，而是在樣式上設置半徑，但我認爲您確實需要矢量圖層上的樣式函數。請參閱http://openlayers.org/en/latest/apidoc/ol.layer.Vector.html#setStyle和http://www.acuriousanimal.com/thebookofopenlayers3/chapter04_06_text_style.html。 –

雖然this PR不合並使用樣式功能，如：

var styleFunction = function(feature) { 
    return [ 
    new ol.style.Style({ 
     image: new ol.style.Circle({ 
     radius: feature.get('radius'), 
     fill: new ol.style.Fill({ 
      color: 'green' 
     }) 
     }) 
    }) 
    ]; 
};

然後：

$(document).on("keypress", "#radius", function() { 
    circleFeature.set("radius",parseInt($("#radius").val())); 
    circleFeature.setStyle(styleFunction); 
    circleFeature.changed(); 
});

來源

2016-09-23 16:32:24

動態改變圓圈大小的OpenLayers

回答

相關問題