[英]How to hide and show features in OpenLayers 3? (Redraw?)
我正在将一个项目从OL2更新到OL3 ,但我在更改特征样式后无法重绘特征。
在 OL2 中,这有效:
hidePoints: function(id) {
if (! this.getMap().center) {
return;
}
var i,
feature,
len = this.points.features.length;
if (id !== null) {
for( i = 0; i < len; i++ ) {
feature = this.points.features[i];
if (feature.attributes.aces_id == id) {
feature.style = null;
} else {
feature.style = { display: 'none' };
}
}
} else {
for( i = 0; i < len; i++ ) {
feature = this.points.features[i];
feature.style = { display: 'none' };
}
}
this.points.redraw();
},
在 OL3 中,我尝试更新函数以隐藏点图层,但redraw()
不再存在,并且由于我正在使用的图层是ol.layer.Vector
,因此除了向量之外,我找不到任何updateParams
选项,例如其他来源有。 调度事件和更改也不起作用。 我希望改变会,但没有任何反应。
hidePoints: function(id) {
if (! this.getMap().getView().getCenter()) {
return;
}
var i,
feature,
layerSourceFeatures = this.pointsLayer.getSource().getFeatures(),
len = layerSourceFeatures.length;
if (id !== null) {
for( i = 0; i < len; i++ ) {
feature = this.pointsLayer.getSource().getFeatures()[i];
if (feature.get('aces_id') == id) {
feature.style = null;
} else {
feature.style = { display: 'none' };
}
}
} else {
for( i = 0; i < len; i++ ) {
feature = this.pointsLayer.getSource().getFeatures()[i];
feature.style = { display: 'none' };
}
}
//this.pointsLayer.redraw();
//this.pointsLayer.dispatchEvent(goog.events.EventType.CHANGE);
this.pointsLayer.changed();
},
我还想知道是否以这种方式更改样式(将每个功能提取到另一个 var),或者这是否不会只是更改该功能并保持原始不变。 加上总是获取getSource().getFeatures()
似乎滥用了性能......但我似乎无法找到另一种方法。
无论如何,现在如何在 OL3 中执行重绘以渲染样式已更改的特征? 可以将图层设置为可见,但我不想一直隐藏/显示所有功能。 有时我只想根据他们给定的 id 隐藏/显示一些。
另一种方法是在特征上使用样式函数和隐藏属性:
var style = new ol.Style(...);
function Stylefunction (feature, resolution) {
var prop = feature.getProperties();
if (prop.HIDDEN)
return;
return style;
}
var layer = new ol.layer.Vector({
source: new ol.source.Vector(...),
style: Stylefunction
});
如果您更改功能“隐藏”属性,它会立即刷新
因此,在一遍又一遍地查看文档时,我终于找到了会触发更改事件的原因,就像 seto 之后建议的那样。
这是从 OL2 到 OL3 的转换函数,对我有用。 不再需要重绘,因为 setStyle 已完成所有操作。
hidePoints: function(id) {
if (! this.getMap().getView().getCenter()) {
return;
}
var i,
feature,
layerSourceFeatures = this.pointsLayer.getSource().getFeatures(),
len = layerSourceFeatures.length;
var emptyImgStyle = new ol.style.Style({ image: '' });
// If an aces id was provided
if (id !== undefined) {
for( i = 0; i < len; i++ ) {
feature = layerSourceFeatures[i];
feature.setStyle(emptyImgStyle);
// Resetting feature style back to default function given in defaultPointStyleFunction()
if (feature.get('aces_id') == id) {
feature.setStyle(null);
}
// Hiding marker by removing its associated image
else {
feature.setStyle(emptyImgStyle);
}
}
}
// No id was provided - all points are hidden
else {
for( i = 0; i < len; i++ ) {
feature = layerSourceFeatures[i];
feature.setStyle(emptyImgStyle);
}
}
},
我无法添加评论,因为我没有足够的声誉,但是您可能想要调用feature.setStyle(null)
而不是feature.style = null
,因为这会在内部触发更改的事件并且应该立即自动更改样式. 此外, feature.style = { display: 'none' }
将无法在 openlayers 3 中使用,因为样式需要是 ol.style.Style 对象( http://openlayers.org/en/v3.14.2/apidoc/ol.style )。 Feature.html#setStyle )
如果您有功能的 ID,则可以使用 source.getFeatureById() 方法而不是循环浏览功能。( http://openlayers.org/en/v3.14.2/apidoc/ol.source.Vector.html #getFeatureById )
关于渲染,我认为使用地图的 map.render()(在 openlayers.org/en/v3.14.2/apidoc/ol.Map.html#render)将重新渲染地图。
如果您只是在重新渲染地图时调用函数,您可以监听地图上的 postrender 或 postcompose 事件。
如果您创建一个 JSFiddle,我可以进一步帮助您。
编辑:这个例子可能对你有帮助 - openlayers.org/en/v3.14.2/examples/dynamic-data.html?q=style
我喜欢这种图层切换方法(也适用于其他功能):
爪哇脚本
<script>
var layerBing = new ol.layer.Tile({
source: new ol.source.BingMaps({
imagerySet: 'Aerial',
key: 'YourKeyBingAccess'
}),
name: 'Bing'
});
/*
* YOUR MAP CODE GOES HERE
*/
function toggleLayer(layerObject) {
var newVisibility = !(layerObject.get('visible'));
layerObject.set('visible', newVisibility);
}
</script>
HTML
<button onclick="toggleLayer(layerBing)">Bing Satellite</button>
<div id="map" class="map"></div>
为了隐藏或显示,您需要将图层的可见属性设置为false或true。
var someFeature = ...; // create some feature
someFeature.set('style', someStyle) // set some style
var someFeatureLayer = ...; // create Layer from someFeature
map.addLayer( someFeatureLayer ); // add someFeatureLayer
someFeatureLayer.set('visible', false);
//someFeatureLayer.set('visible', true);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.