最新バージョンのopenlayers5.2、再書き込み測定方法、良いコードの例を達成している公式サイトにアップグレードしますが、プロジェクトは、モジュラー開発VUE、例の公式サイトの公式ウェブサイトの直接の例の導入に基づいて非常に適切ではなく、継続的なことができます測定、そしてプロジェクトがな方法で測定する必要があるので、また、直接取ることはありませ感謝する必要があり、友人があり、このマークを見て、例の公式ウェブサイトにいくつかの改善を行う必要があるO（
¯）¯）
O
レンダリング以下のとおりです。
レンダリング以下のとおりです。
Measure.jsを達成
「オール/対話/ドロー」からインポートドロー
「オール/ソース/ベクタ」からインポートVectorSource。
「オール/層/ベクタ」からインポートVectorLayer。
「オール/層/タイル」からインポートTileLayer。
'オール/ソース/ OSM'からインポートOSM;
インポート{
unByKey
'OL / Observable.js'から}。
「オール/オーバーレイ」からインポートするオーバーレイ。
インポート{
のgetArea、
のgetLength
'OL / sphere.js'から}。
「オール/ビュー」からインポートビュー。
インポート{
ラインストリング、
ポリゴン
'OL / geom.js'から}。
インポート{
CircleStyleとしてサークル、
塗りつぶし、
ストローク、
スタイル
'OL / style.js'から}。
対策（マップ、measureType）{
/ **
*現在の機能を描かれました。
* @type {モジュール：オール/特集〜特集}
* /
VARスケッチ。
/ **
*ヘルプtooltip要素。
* @type {エレメント}
* /
VARのhelpTooltipElement。
/ **
*ヘルプメッセージを表示するオーバーレイ。
* @type {モジュール：OL /オーバーレイ}
* /
VARのhelpTooltip。
/ **
*測定ツールチップ要素。
* @type {エレメント}
* /
VARのmeasureTooltipElement。
/ **
*測定を表示するオーバーレイ。
* @type {モジュール：OL /オーバーレイ}
* /
VARのmeasureTooltip。
/ **
*ユーザーはポリゴンの描画されたときに表示するメッセージ。
* @type {文字列}
* /
VARのcontinuePolygonMsg = '继续点击绘制多边形'。
/ **
*ユーザーがラインを描いているときに表示するメッセージ。
* @type {文字列}
* /
VARのcontinueLineMsg = '继续点击绘制线'。
createMeasureTooltip（）;
createHelpTooltip（）;
/ **
*ポインタの移動を処理します。
* @param {モジュール：OL / MapBrowserEvent〜MapBrowserEvent}イベントEVT。
* /
VARのpointerMoveHandler =関数（EVT）{
IF（evt.dragging）{
リターン。
}
/ ** @type {文字列} * /
VARのHELPMSG = '描画を開始]をクリックし';
IF（スケッチ）{
VARのgeom =（sketch.getGeometry（））。
（ポリゴンのinstanceofのgeom）{もし
HELPMSG = continuePolygonMsg。
}（GEOM instanceofのラインストリング）もしそうでなければ{
HELPMSG = continueLineMsg。
}
}
helpTooltipElement.innerHTML = HELPMSG。
helpTooltip.setPosition（evt.coordinate）。
helpTooltipElement.classList.remove（ '隠されました'）;
}。
map.on（ 'pointermove'、pointerMoveHandler）。
。map.getViewport（）のaddEventListener（ 'マウスアウト'、関数（）{
helpTooltipElement.classList.add（） '隠されました';
}）;
VaRのドロー。
VAR formatLength =関数（線）{
VAR長=のgetLength（ライン）
VAR出力。
IF（長さ> 100）{
出力=（恐らくMath.round（長さ/ 1000 * 100）/ 100）+
'' + 'キロ';
}他{
出力=（恐らくMath.round（長さ* 100）/ 100）+
'' + 'M'。
}
出力を返します。
}。
VaRのformatArea =関数（ポリゴン）{
var領域=のgetArea（ポリゴン）。
VAR出力。
IF（領域> 10000）{
出力=（恐らくMath.round（面積/ 1000000 * 100）/ 100）+
'' + 'キロ<SUP> 2 </ SUP>'。
}他{
出力=（恐らくMath.round（面積×100）/ 100）+
'' + '
}
出力を返す;
};
VAR出典;
// VARレイヤ;
// vectorlayer層が機能を堆積させなさい。ウェルのマップ初期化を追加することができる
ため（LET map.getLayersのlayerTmp（）のgetArray（））{
IF（layerTmp.get（ "名前"）== "機能"）{
//レイヤ= layerTmp;
// layerTmp .setSource（ヌル）
ソースlayerTmp.getSource =（）;
}
}
関数addInteraction（）{
VARタイプは=（MeasureType == 'エリア' 'ポリゴン'： '？ラインストリング'）;
描く新しい新=（{描画
出典：ソース、
タイプの、：タイプの
スタイル：新新しいスタイル（{
塗りつぶし：
色： 'RGBA（255、255、255、0.2）'
}）、
ストローク：ストローク新しい新しいです（{
色'RGBA（0、0、0、0.5）'、
lineDash：[10、10]、
幅：2
}）、
画像：新しいCircleStyle（{
半径：5、
ストローク：新しいストローク（{
色： 'RGBA（0、0、0、0.7）'
}）は、
塗りつぶし：新しい塗りつぶし（{
色： 'RGBA（255、255、255、0.2）'
}）
}）を
}）
}）。
map.addInteraction（引き分け）。
VARリスナー。
draw.on（ 'drawstart'、
関数（EVT）{
//設定スケッチ
スケッチ= evt.feature。
/ ** @type {モジュール：OL /座標〜座標|未定義} * /
VAR tooltipCoord = evt.coordinate。
（ '変更'、関数（EVT）{上のリスナー= sketch.getGeometry（）
; VARのgeom = evt.target
VAR出力、
多角形のinstanceof（GEOM場合）{
出力= formatArea（GEOM）;
tooltipCoord = geom.getInteriorPoint（） .getCoordinates（）;
}そうでない場合（GEOM instanceofのラインストリング）{
出力= formatLength（GEOM）;
tooltipCoord = geom.getLastCoordinate（）;
}
measureTooltipElement.innerHTML =出力。
measureTooltip.setPosition（tooltipCoord）;
}）;
}、 この）;
draw.on（ 'drawend'、
関数（）{
measureTooltipElement.className = 'ツールチップツールチップ静的';
measureTooltip.setOffset（[0、-7]）;
//未設定スケッチ
スケッチ= NULL;
//解除ツールチップよう新しいものを作成することができ
measureTooltipElement =ヌル;
createMeasureTooltip（）;
unByKey（リスナー）;
map.un（ 'pointermove'、pointerMoveHandler）;
map.removeInteraction（ドロー）;
helpTooltipElement.classList.add（ '隠された'）;
}、これは、 ）;
}
関数createHelpTooltip（）{
IF（helpTooltipElement）{
helpTooltipElement.parentNode.removeChild（helpTooltipElement）。
}
helpTooltipElement =のdocument.createElement（ 'DIV'）。
helpTooltipElement.className = 'ツールチップが隠されました';
helpTooltip =新しいオーバーレイ（{
エレメント：helpTooltipElement、
オフセット：[15、0]、
ポジショニング： '中央左'
}）。
map.addOverlay（helpTooltip）。
}
関数createMeasureTooltip（）{
IF（measureTooltipElement）{
measureTooltipElement.parentNode.removeChild（measureTooltipElement）。
}
measureTooltipElement =のdocument.createElement（ 'DIV'）。
measureTooltipElement.className =「ツールチップツールチップメジャー」;
要素：measureTooltipElement、
オフセット：[0、-15]、
ポジショニング： 'ボトム中心'
}）。
map.addOverlay（measureTooltip）。
}
//量测调用
addInteraction（）。
}
}
上記のコードの公式ネットワークの再構成の例は、多くの測定値を有していてもよいです。
唯一の我々はで測定を行いたい場合はdrawend、イベントを追加します
map.un（ 'pointermove'、pointerMoveHandler）。 map.removeInteraction（引き分け）。 helpTooltipElement.classList.add（ '隠されました'）;
変更
draw.on（ 'drawend'、
関数（）{
measureTooltipElement.className = 'ツールチップツールチップ静的';
measureTooltip.setOffset（[0、-7]）;
//未設定スケッチ
スケッチ= NULL;
//解除ツールチップよう新しいものを作成することができ
measureTooltipElement =ヌル;
createMeasureTooltip（）;
unByKey（リスナー）;
map.un（ 'pointermove'、pointerMoveHandler）;
map.removeInteraction（ドロー）;
helpTooltipElement.classList.add（ '隠された'）;
}、これは、 ）;
}
それはすることができます。
コール
そして、直接
「./Measure」から測定をインポートします。 ... Measure.measure（this.map、タイプ）。 ...
あなたは、それを呼び出すことができtypeているLineStringとき、距離測定、areaとき測定エリア
リンクします。https：//www.jianshu.com/p/f00da34bb4da