OpenLayersベクター機能でラベルを表示する方法を見つけようとしているのは、マウスがその機能アイコン上を移動したときだけです。私は似たようなことのいくつかの例を見つけましたが、私がする必要があることは全くありません。それはかなりシンプルなように私には思われるが、私はちょうど始める方法を考えることができない。OpenLayers 3：ホバー上にベクターラベルを表示
これは私のフィーチャースタイルのコードの様子です（いくつかの例の1つ）。私は色のセクションでは、いくつかにGeoJSONファイルから特徴データに、したがってfeature.get(...)秒を持ってることに注意してください：
if (feature.get('level_pc') < 35) {
var style = new ol.style.Style({
fill: new ol.style.Fill({color: feature.get('shapefill')}),
stroke: new ol.style.Stroke({color: feature.get('shapestroke')}),
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [16, 16],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
opacity: 0.75,
src: '/icons/aws-red.png'
})),
text: new ol.style.Text({
font: '12px Roboto',
text: feature.get('label'),
fill: new ol.style.Fill({
color: feature.get('textfill')
}),
stroke: new ol.style.Stroke({
color: feature.get('textstroke'),
width: 1
})
})
});
return style
} else { ...
を私は本当にスタイル定義にいくつかのコードを挿入する方法があることを望んでいることすべてのスタイルの複製を作成し、必要に応じてホバー/非ホバースタイルを切り替える余分なコードを書く必要がなく、ホバーの相互作用を作成します。おそらく、マウスオーバー時にはテキストの色のアルファ値を255に、それ以外の時は0に設定することができます。おそらく私はあまりにも楽観的だ。
誰も私がチェックアウトできるアイデアや例はありますか？
おかげで、 ガレス
EDIT：ホセのおかげで、私は今の目標に非常に近いです。最初の質問から私の元のコードは多少変更されています。 GeoJSONデータからアイコンファイルの名前を読み取る機能を使用して、各機能にスタイルを適用します。例えば、ゲートは「ゲートオープン」または「ゲートクローズ」アイコンで表示され、サイロは「サイロハイ」、「サイロメディア」または「サイロロー」アイコンで表示されます。すべての機能のホバー上に正しいアイコンとテキストが表示されています。アイコン上にマウスを乗せていないときは間違ったアイコンが表示されています。アイコンの上にカーソルを合わせると、正しいアイコンが表示され、もうホバリングしなくなったら元の状態に戻ります。マウスがアイコンの上にマウスを移動されていない限り、それだけで正しいアイコンを示していない - 私はすべてのエラーを取得していないよ
var structuresStyleHover = function(feature, resolution) {
style = new ol.style.Style({
fill: new ol.style.Fill({color: feature.get('shapefill')}),
stroke: new ol.style.Stroke({color: feature.get('shapestroke')}),
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [16, 16],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
opacity: 1,
src: '/icons/'+feature.get('icon')+'-'+feature.get('status').toLowerCase()+'.png'
})),
text: new ol.style.Text({
font: '12px Roboto',
text: feature.get('label'),
fill: new ol.style.Fill({
color: feature.get('textfill')
}),
stroke: new ol.style.Stroke({
color: feature.get('textstroke'),
width: 1
})
})
})
return style;
};
var styleCache = {};
var styleFunction = function(feature,resolution) {
var radius = 16;
var style = styleCache[radius];
if (!style) {
style = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [16, 16],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
opacity: 0.5,
src: '/icons/'+feature.get('icon')+'-'+feature.get('status').toLowerCase()+'.png'
})),
});
styleCache[radius] = style;
}
return style;
};
var structuresLayer = new ol.layer.Vector({
source: structuresSource,
style: styleFunction
});
...
var map = new ol.Map({
layers: [paddocksLayer,structuresLayer],
interactions: ol.interaction.defaults({
altShiftDragRotate: false,
dragPan: false,
rotate: false
}).extend([new ol.interaction.DragPan({kinetic: null})]),
target: olMapDiv,
view: view
});
...
map.on('pointermove', function(evt) {
if (evt.dragging) {
return;
}
structuresLayer.getSource().getFeatures().forEach(f=>{
f.setStyle(styleFunction);
});
var pixel = map.getEventPixel(evt.originalEvent);
map.forEachFeatureAtPixel(pixel,function(feature,resolution) {
feature.setStyle(structuresStyleHover(feature,resolution));
return feature;
});
});
：
はここ（の重要なビット）私の更新されたコードをです。
私は本当に明白な何かが欠けていると確信していますが、私はそれを解決することはできません。どんなアイデアですか？
チェックこの例http://openlayers.org/en/latest/examples/kml-earthquakes.html – pavlos
ありがとう@pavlos、それはです私がやろうとしていることではありません。私は本当に、ツールチップを表示するのではなく、 "ネイティブ" OpenLayersのテキストラベルをマウスの上に表示させたいと思っています。これが可能かどうか知っていますか？ –