Google Maps for OpenLayersのような計測ツール

Question

私はOpenLayersで計測ツールを実装する必要があります。セグメントの距離をスマートな管理で表示したいと思います。それぞれ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>