OpenLayers 벡터 기능에 레이블을 표시하는 방법을 찾으려면 마우스를 해당 기능 아이콘 위로 가져 가야합니다. 비슷한 일에 대한 몇 가지 예를 발견했지만, 내가해야 할 일은 전혀하지 않았습니다. 꽤 간단 할 것 같지만 시작하는 법을 배울 수 없습니다.OpenLayers 3 : 호버에 벡터 레이블 표시
내 기능 스타일 코드는 다음과 같습니다 (여러 가지 예 중 하나). 나는 색상 섹션에서 몇 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으로 텍스트 색상의 알파 값을 설정하는 방법 일 수 있습니다. 아마도 나는 너무 낙관적 인 듯하다.
체크 아웃 할 수있는 아이디어 나 예제가있는 사람이 있습니까?
감사합니다, 가레스
편집 : 호세 덕분에 지금 목표에 더 가까이입니다. 처음에이 질문을 한 후에 원래 코드가 다소 변경되었습니다. 이제 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 텍스트 레이블을 가리 키도록 할 수 있기를 정말로 바랍니다. 이것이 가능한지 아십니까? –