OpenLayers 용 Google지도와 같은 도구를 사용하여 측정

Question

OpenLayers를 사용하여 측정 도구를 구현해야하며 눈금을 현명한 관리로 세그먼트에 거리를 표시하고 싶습니다 (각 세그먼트에서 10m를 표시 한 다음, 각각의 50m, 100m, 1km, 5km, 예를 들어 ...), Google지도의 '거리 측정'도구와 매우 흡사합니다.

라이브러리가 있습니까? 그것을 구현하는 좋은 접근 방법은 무엇입니까?

한마디로

Answer 1

: 아니, 난 당신이 상자에서 원하는 것을 제공하는 모든 lib 디렉토리 나 클래스를 알지 못한다.

옵션 1 : 사용자 정의 ScaleLine

ScaleLine은 (api docs 참조) 자신의 렌더링 기능을 제공 할 수있는 옵션 (code 참조)이있다. 기본 구현은 단지 거리를 계산하고 내부 함수 updateElement_을 호출하여 {number} {scale}으로 표시합니다. 그러면 ScaleLine의 innerHtml이 업데이트됩니다.

이론적으로이 메서드를 대체하고 innerHTML을 직접 설정할 수 있습니다. 이 방법을 사용하면 프로덕션 코드가 축소되어 해당 요소 (innerElement_, element_)가 api로 표시되지 않으므로 라이브러리의 개발 방식으로 제한 될 수 있습니다.

new ol.control.ScaleLine({ 
    render: function(mapEvent) { 
    // do stuff 
    } 
}); 

---

옵션 2 : 사용자 정의 유도 선 스타일

와 그리기 기능을 사용 그래서이 너무 복잡 할 수 있으며 난 당신이 ol.interaction.Draw 기능에 대한 이동하는 것이 좋습니다. Measure Example은 사용자가 선을 그리는 동안 물건을 그릴 수있는 방법을 보여줍니다. LineString에서이를 사용자 정의 스타일과 결합 할 수 있습니다.

// TODO split the uses drawn line into segments, like this mockup 
 
const line = new ol.geom.LineString([ 
 
    [20.0, 50.0], 
 
    [30.0, 47.0], 
 
    [40.0, 47.0], 
 
    [50.0, 47.0] 
 
]); 
 

 
line.transform('EPSG:4326', 'EPSG:3857'); 
 

 
const lineFeature = new ol.Feature(line); 
 
const lineSource = new ol.source.Vector({ 
 
    features: [lineFeature] 
 
}); 
 

 

 
function segmentText(coord, coord2) { 
 
    const coord_t = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326'); 
 
    let coordText = coord_t[1].toFixed(0) + '/' + coord_t[0].toFixed(0); 
 
    
 
    if(coord2) { 
 
     const length = ol.Sphere.getLength(new ol.geom.LineString([coord2, coord])); 
 
     const distance = (Math.round(length/1000 * 100)/100) + ' km'; 
 
     coordText = coordText + '\n' + distance; 
 
    } else { 
 
     coordText = coordText + '\n0'; 
 
    } 
 
    
 
    return new ol.style.Text({ 
 
     text: coordText, 
 
     fill: new ol.style.Fill({ 
 
      color: "#00f" 
 
     }), 
 
     offsetY: 25, 
 
     align: 'center', 
 
     scale: 1, 
 
    }); 
 
} 
 

 
function styleFunction(feature) { 
 
    var geometry = feature.getGeometry(); 
 
    var styles = [ 
 
     // linestring style 
 
     new ol.style.Style({ 
 
      stroke: new ol.style.Stroke({ 
 
       color: '#ff0000', 
 
       width: 2 
 
      }) 
 
     }) 
 
    ]; 
 

 
    function createSegmentStyle(coord, coord2, rotation) { 
 
     return new ol.style.Style({ 
 
      geometry: new ol.geom.Point(coord), 
 
      image: new ol.style.Icon({ 
 
       src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAUSURBVBhXY1Da6MPEwMDAxMDAAAALMAEkQYjH8gAAAABJRU5ErkJggg==', 
 
       anchor: [0.75, 0.5], 
 
       rotateWithView: true, 
 
       rotation: -rotation, 
 
       scale: 4 
 
      }), 
 
      text: segmentText(coord, coord2) 
 
     }) 
 
    }; 
 
    
 
    const firstCoord = geometry.getFirstCoordinate(); 
 
    geometry.forEachSegment(function (start, end) { 
 
     var dx = end[0] - start[0]; 
 
     var dy = end[1] - start[1]; 
 
     var rotation = Math.atan2(dy, dx); 
 
     if (firstCoord[0] === start[0] && firstCoord[1] === start[1]) { 
 
      styles.push(createSegmentStyle(start, null, rotation)); 
 
     } 
 

 
     styles.push(createSegmentStyle(end, firstCoord, rotation)); 
 
    }); 
 

 
    return styles; 
 
} 
 

 

 
const map = new ol.Map({ 
 
    target: 'map', 
 
    layers: [ 
 
     new ol.layer.Tile({ 
 
      source: new ol.source.Stamen({ layer:'toner-lite' }) 
 
     }), 
 
     new ol.layer.Vector({ 
 
      source: lineSource, 
 
      style: styleFunction 
 
     }) 
 
    ], 
 
    view: new ol.View({ 
 
     center: ol.proj.transform(
 
      [35, 45], 'EPSG:4326', 'EPSG:3857'), 
 
     zoom: 4 
 
    }) 
 
});

<link href="https://openlayers.org/en/v4.5.0/css/ol.css" rel="stylesheet"/> 
 
<script src="https://openlayers.org/en/v4.5.0/build/ol-debug.js"></script> 
 
<div id="map" style="height:300px"></div>