2016-07-15 2 views
1

OpenLayers 3에서는 스케일에 따라 선 스트링 기능을 따라 여러 번 복제하는 텍스트 레이블을 작성할 수 있습니까? 같은 뭔가 :선 스트링 기능에 따른 복수 텍스트 레이블

enter image description here

다음

enter image description here

우리가 규모의 레이블을 변경하는 경우 "IX 군단 넓은 길"이 두 번 나타납니다 볼 수 있습니다. 어떻게 구현할 수 있습니까?

답변

2

이 기능은 스타일 기능으로 구현할 수 있습니다. 내 코드 샘플은 줄 문자열 (약간 다른 경우)에 화살표를 만드는 방법에 대한,하지만 난 (적어도) 변경이 필요한 부분을 댓글을 달았 :

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

+0

만 나는이 이전 = 본 적이 경우)) 이미 구현 한 내 자신의 HTML5 캔버스 기반의 텍스트 레이블. – Jacobian

관련 문제