我正在将项目从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();
},
我还想知道是否以这种方式更改了样式(将每个功能获取到另一个变量),或者这是否只会更改该功能并保持原始状态不变。另外,总是获取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
});
如果更改特征“隐藏”属性,则会立即刷新
因此,一遍又一遍地查看文档时,我终于找到了触发变更事件的原因,就像濑户之后建议的那样。
这是从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.style = null
而不是feature.setStyle(null)
,因为这会在内部触发更改的事件,并应立即自动更改样式。同样,feature.style = { display: 'none' }
在openlayers 3中将不起作用,因为该样式必须是ol.style.Style对象(http://openlayers.org/en/v3.14.2/apidoc/ol.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
我喜欢这种用于层切换的方法(同样适用于其他功能):
JAVASCRIPT
<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);