Công cụ đo đạc | Maps Javascript APIs

Ví dụ này thêm thanh công cụ đo lên trên bản đồ.
MapLibre GL JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Công cụ đo đạc</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform.min.js"></script>
<link href="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform.min.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	             #map { position: absolute; top: 0; bottom: 0; width: 100%; background:#ddd;}
</style>
</head>
<body>
<style>
.map {
width: 100%;
height: calc(100vh - 15px);
}
 
body {
overflow: hidden;
}
 
.displayMeasure {
background-color: #fff;
right: 120px;
top: 20px;
position: absolute;
z-index: 3;
user-select: none;
box-shadow: 0 2px 4px rgb(0 0 0 / 20%), 0 -1px 0px rgb(0 0 0 / 2%) !important;
padding: 0.5rem 0;
}
 
.labelMeasure {
float: left;
padding-left: 15px;
font-size: 17px;
padding-top: 6px;
}
 
.contentMeasure {
display: inline-block;
padding: 6px 5px 0px 10px;
font-size: 15px;
}
</style>
 
<div style="width: 100%">
<div id="divMapId" class="map"></div>
</div>
<div id="measure-display" class="displayMeasure">
<div class="labelMeasure">Kết quả đo:</div>
<div class="contentMeasure">
<span id="contentMeasure" style="font-weight: 700"></span>
</div>
</div>
 
<script>
var map = new maplibregl.Map({
container: 'divMapId',
center: [105, 17],
zoom: 4
});
// Bản đồ nền
var mapOSMBright = new ekmapplf.VectorBaseMap(
'OSM:Bright',
'{YOUR_API_KEY}'
).addTo(map);
 
// Thêm measure
var measure = new ekmapplf.control.Measure();
map.addControl(measure, 'top-right');
measure.on('endMeasure', function (res) {
if (res.typeMeasure == 'Length') {
document.getElementById('contentMeasure').innerHTML =
res.length.toFixed(2) + ' ' + res.units;
} else {
document.getElementById('contentMeasure').innerHTML =
res.area.toFixed(2) + ' ' + res.units + '<sup>2</sup>';
}
});
</script>
 
 
</body>
</html>