Measuring Radius
Change the mouse mode to radius measurement mode, then measure the radius from the click point.
The first click point becomes the center, and the distance to the second click point forms the radius.
The measurement results are returned via an event and visualized as a POI.
Feature Implementation
Symbol
A texture map object that stores image textures is stored here.
For a brief explanation of JSSymbol, refer to the step 5. Creating a Distance Object section of the distance measurement tutorial.
POILayer
This variable stores the layer where the created JSPoint objects are saved.
The process of storing the layer is referred to in the step 1. Creating a Layer phase.
WallLayer
This is a layer that stores the wall polygon that delineates the radius.
The process of storing the layer is referred to in the step 1. Creating a Layer phase.
Following are the detailed steps of the code.
step 1. Creating a Layer
Create a layer to visualize the radius measurement Icon and radius value.
For an explanation of layer types, refer here.
var layerList = new Module.JSLayerList(true);
GLOBAL.POILayer = layerList.createLayer("MEASURE_POI", Module.ELT_3DPOINT);
GLOBAL.POILayer.setMaxDistance(20000.0);
GLOBAL.POILayer.setSelectable(false);
GLOBAL.WallLayer = layerList.createLayer("MEASURE_WALL", Module.ELT_POLYHEDRON);
GLOBAL.WallLayer.setMaxDistance(20000.0);
GLOBAL.WallLayer.setSelectable(false);
GLOBAL.WallLayer.setEditable(true);step 2. Registering an Event
Register an event to receive the calculated radius.
function initEvent(canvas) {
// Radius event setup
canvas.addEventListener("Fire_EventAddRadius", function (e) {
if (e.dTotalDistance > 0) {
// Create radius POI object
createPOI(new Module.JSVector3D(e.dMidLon, e.dMidLat, e.dMidAlt), "rgba(255, 204, 198, 0.8)", e.dTotalDistance);
}
j;
});
}The Fire_EventAddRadius event occurs when the mouse mode is set to MML_ANALYS_AREA_CIRCLE.
step 3. Changing Mouse Mode
Change the mouse mode for radius measurement.
For an explanation of mouse modes, refer here.
Module.XDSetMouseState(Module.MML_ANALYS_AREA_CIRCLE);step 4 - 1. Creating a Radius Icon
Create an Icon to render the returned radius value.
function drawIcon(_canvas, _color, _value) {
// Return context and clear background
var ctx = _canvas.getContext("2d"),
width = _canvas.width,
height = _canvas.height;
ctx.clearRect(0, 0, width, height);
// Set background Draw Path then draw text
drawBalloon(ctx, height * 0.5, width, height, 5, height * 0.25, _color);
setText(ctx, width * 0.5, height * 0.2, _value);
return ctx.getImageData(0, 0, _canvas.width, _canvas.height).data;
}First, create a canvas to draw the image, paint a background for the text (step 4-2. Creating a Radius Balloon Icon), and then input the returned altitude value as text (step 4-3. Creating a Radius Measurement Result Icon).
step 4 - 2. Creating a Radius Balloon Icon
Draw a balloon on the canvas to visualize the returned radius value.
function drawBalloon(ctx, marginBottom, width, height, barWidth, barHeight, color) {
var wCenter = width * 0.5,
hCenter = height * 0.5;
// Set the shape of the balloon Draw Path
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, height - barHeight - marginBottom);
ctx.lineTo(wCenter - barWidth, height - barHeight - marginBottom);
ctx.lineTo(wCenter, height - marginBottom);
ctx.lineTo(wCenter + barWidth, height - barHeight - marginBottom);
ctx.lineTo(width, height - barHeight - marginBottom);
ctx.lineTo(width, 0);
ctx.closePath();
// Draw the balloon
ctx.fillStyle = color;
ctx.fill();
}step 4 - 3. Creating a Radius Measurement Result Icon
Draw the returned radius value as text on the balloon.
function setText(_ctx, _posX, _posY, _value) {
var strText = "";
// Set text string
if (typeof _value == "number") {
strText = setKilloUnit(_value, 0.001, 0);
} else {
strText = _value;
}
// Set text style
_ctx.font = "bold 16px sans-serif";
_ctx.textAlign = "center";
_ctx.fillStyle = "rgb(0, 0, 0)";
// Draw text
_ctx.fillText(strText, _posX, _posY);
}step 4 - 4. Converting to m/km Text
Convert the returned radius value to m/km text.
function setKilloUnit(_text, _meterToKilloRate, _decimalSize) {
if (_decimalSize < 0) {
_decimalSize = 0;
}
if (typeof _text == "number") {
if (_text < 1.0 / (_meterToKilloRate * Math.pow(10, _decimalSize))) {
_text = _text.toFixed(1).toString() + "m";
} else {
_text = (_text * _meterToKilloRate).toFixed(2).toString() + "㎞";
}
}
return _text;
}step 5. Creating a Radius Object
Create an object with the created Icon and add it to the layer.
function createPOI(_position, _color, _value) {
// Create a canvas to draw the POI icon image
var drawCanvas = document.createElement("canvas");
drawCanvas.width = 100;
drawCanvas.height = 100;
// Return icon image data
var imageData = drawIcon(drawCanvas, _color, _value);
// Register icon image in symbol
if (GLOBAL.Symbol.insertIcon("Icon", imageData, drawCanvas.width, drawCanvas.height)) {
// Return registered icon object
var icon = GLOBAL.Symbol.getIcon("Icon");
// Create JSPoint object
var poi = Module.createPoint("POI");
poi.setPosition(_position); // Set location
poi.setIcon(icon); // Set icon
// Add object to layer
GLOBAL.POILayer.addObject(poi, 0);
}
}step 6. Clearing Radius Measurement
Clear the radius measurement results and objects.
function clearAnalysis() {
// Clear ongoing analysis content
Module.XDClearCircleMeasurement();
if (GLOBAL.WallLayer == null) {
return;
}
// Delete icon
clearIcon();
// Delete POI object
GLOBAL.WallLayer.removeAll();
}
/* Clear icon */
function clearIcon() {
if (GLOBAL.POILayer == null) {
return;
}
// Delete registered icon list
var icon, poi;
poi = GLOBAL.POILayer.keyAtObject("POI");
if (poi == null) {
return;
}
icon = poi.getIcon();
// Delete POI referencing icon
GLOBAL.POILayer.removeAtKey("POI");
// Delete icon from symbol
GLOBAL.Symbol.deleteIcon(icon.getId());
}Result Screen
If you want to check the live code of the radius measurement process, click here.
Last updated