1
OpenLayers 3
에서는 스케일에 따라 선 스트링 기능을 따라 여러 번 복제하는 텍스트 레이블을 작성할 수 있습니까? 같은 뭔가 :선 스트링 기능에 따른 복수 텍스트 레이블
우리가 규모의 레이블을 변경하는 경우 "IX 군단 넓은 길"이 두 번 나타납니다 볼 수 있습니다. 어떻게 구현할 수 있습니까?
OpenLayers 3
에서는 스케일에 따라 선 스트링 기능을 따라 여러 번 복제하는 텍스트 레이블을 작성할 수 있습니까? 같은 뭔가 :선 스트링 기능에 따른 복수 텍스트 레이블
우리가 규모의 레이블을 변경하는 경우 "IX 군단 넓은 길"이 두 번 나타납니다 볼 수 있습니다. 어떻게 구현할 수 있습니까?
이 기능은 스타일 기능으로 구현할 수 있습니다. 내 코드 샘플은 줄 문자열 (약간 다른 경우)에 화살표를 만드는 방법에 대한,하지만 난 (적어도) 변경이 필요한 부분을 댓글을 달았 :
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var source = new ol.source.Vector();
var styleFunction = function(feature) {
var geometry = feature.getGeometry();
var styles = [
// linestring
new ol.style.Style({
stroke: new ol.style.Stroke({ // apply street style here
color: '#ffcc33',
width: 2
})
})
];
geometry.forEachSegment(function(start, end) {
var dx = end[0] - start[0];
var dy = end[1] - start[1];
var rotation = Math.atan2(dy, dx);
// arrows
styles.push(new ol.style.Style({
geometry: new ol.geom.Point(end),
image: new ol.style.Icon({ // Use here label, not icon.
src: 'http://openlayers.org/en/v3.17.1/examples/data/arrow.png',
anchor: [0.75, 0.5],
rotateWithView: false,
rotation: -rotation
})
}));
});
return styles;
};
var vector = new ol.layer.Vector({
source: source,
style: styleFunction
});
map.addInteraction(new ol.interaction.Draw({
source: source,
type: /** @type {ol.geom.GeometryType} */ ('LineString')
}));
일부 더 많은 노력이 올바른 게재 위치에있는 제목을 배치 할 필요 . 귀하의 기능을 구축하기위한 견고한 출발점을 제공하기 위해이 답변을 남겼습니다.
내 소스 :
[1] http://openlayers.org/en/master/examples/line-arrows.html
만 나는이 이전 = 본 적이 경우)) 이미 구현 한 내 자신의 HTML5 캔버스 기반의 텍스트 레이블. – Jacobian