To learn how to use measurement tools in 3d Mode. To take 3d measurements your need to be in a 3d mode in ultra layer, and alo you need to have access to this feature. The 3d measures are allowed only in zoom levels bigger than 19
Mode Controls
Orientation Controls
Tooltips
Measurement tools
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://app.vexcelgroup.com/map/v1/public/css/styles.css" type="text/css"/>
<style>
.map {
height: 800px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div class="col-md-3">
<h4>Mode Controls</h4>
<button onclick="changeMode('2D')">2d</button>
<button onclick="changeMode('3D')">3d</button>
</div>
<div class="col-md-3">
<h4>Orientation Controls</h4>
<button onclick="changeOrientation('V')">Vertical</button>
<button onclick="changeOrientation('N')">North</button>
<button onclick="changeOrientation('S')">South</button>
<button onclick="changeOrientation('E')">East</button>
<button onclick="changeOrientation('W')">West</button>
</div>
<div class="col-md-3">
<h4>Tooltips</h4>
<div class="form-check">
<input class="form-check-input" type="checkbox" checked id="tooltip-visibility">
<label class="form-check-label" for="tooltip-visibility">
Visible
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" checked id="tooltip-length-visibility">
<label class="form-check-label" for="tooltip-length-visibility">
Length
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" checked id="tooltip-area-visibility">
<label class="form-check-label" for="tooltip-area-visibility">
Area
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" checked id="tooltip-slope-visibility">
<label class="form-check-label" for="tooltip-slope-visibility">
Slope
</label>
</div>
</div>
<div class="col-md-3">
<h4>Measurement tools</h4>
<button id="point">Point</button>
<button id="line">Line</button>
<button id="polygon">Polygon</button>
<button id="rectangle">Rectangle</button>
<button id="circle">Circle</button>
</div>
<script type="text/javascript" src="https://app.vexcelgroup.com/map/v1/public/Vexcel.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.js
const API_KEY = "YOUR_KEY";
const core = new Vexcel.Map({
target: "map",
token: API_KEY,
init: {
layers: false,
callback: () => {
core
.getLayerManager()
.getVexcelLayer(Vexcel.Constants.BuiltInLayers.BLUESKY)
.setVisible(true);
},
},
});
document.getElementById("tooltip-visibility").onchange = function () {
if (this.checked) {
core.getMeasurementManager().enableTooltips();
} else {
core.getMeasurementManager().disableTooltips();
}
};
document.getElementById("tooltip-length-visibility").onchange = function () {
if (this.checked) {
core.getMeasurementManager().enableLengthTooltips();
} else {
core.getMeasurementManager().disableLengthTooltips();
}
};
document.getElementById("tooltip-area-visibility").onchange = function () {
if (this.checked) {
core.getMeasurementManager().enableAreaTooltips();
} else {
core.getMeasurementManager().disableAreaTooltips();
}
};
document.getElementById("tooltip-slope-visibility").onchange = function () {
if (this.checked) {
core.getMeasurementManager().enableSlopeTooltips();
} else {
core.getMeasurementManager().disableSlopeTooltips();
}
};
// event to receive the measure after it's created
core.addEventListener(Vexcel.Events.MapEvents.START_MEASURE, (evt) => {
console.log(
`MeasurementInfo Start: ${JSON.stringify(evt.measure.toGeoJSON())}`
);
});
// event to receive the measure after it's finished
core.addEventListener(Vexcel.Events.MapEvents.FINISH_MEASURE, (evt) => {
console.log(
`MeasurementInfo Finish: ${JSON.stringify(
evt.measure.toGeoJSON()
)}`
);
});
// event to receive the measure after change
core.addEventListener(Vexcel.Events.MapEvents.CHANGE_MEASURE, (evt) => {
console.log(
`MeasurementInfo Change: ${JSON.stringify(
evt.measure.getMeasurementInfo()
)}`
);
});
function changeMode(mode) {
core
.changeMode(mode)
.then((response) => {
console.log(response.msg);
if (response.layer) {
console.log(
`Change to mode ${mode} for layer ${response.layer.getName()}`
);
}
})
.catch((error) => {
console.log(error);
alert(error);
});
}
function changeOrientation(orientation) {
core
.changeOrientation(orientation)
.then((response) => {
console.log(response.msg);
})
.catch((error) => {
console.log(error);
alert(error);
});
}
document.getElementById("point").addEventListener("click", () => {
core
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.POINT);
});
document.getElementById("line").addEventListener("click", () => {
core.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.LINE);
});
document.getElementById("polygon").addEventListener("click", () => {
core
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.POLYGON);
});
document.getElementById("rectangle").addEventListener("click", () => {
core
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.RECTANGLE);
});
document.getElementById("circle").addEventListener("click", () => {
core
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.CIRCLE);
});