Skip to content

Draw great circle lines with Measure Tool #710

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jtroberts merged 10 commits into from
Jul 1, 2025
Merged

Draw great circle lines with Measure Tool #710

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
42ce6ad
Use PolyMeasure to draw great circle lines with Measure Tool
jtroberts May 13, 2025
192cd82
Round meters to two digits on Measure tool x-axis
jtroberts May 28, 2025
781f1ba
Added option to not display PolylineMeasure tooltips
jtroberts May 28, 2025
c0c1dff
Fixed issue where rubberline is not drawn with first click or after zoom
jtroberts Jun 3, 2025
d020603
Make sure polyline measurements are cleared on reset
jtroberts Jun 9, 2025
f33f39a
Don't use polyline with LOS or else it results in two lines
jtroberts Jun 16, 2025
a9f591b
Make sure rubberline gets drawn in continuous modes
jtroberts Jun 16, 2025
ea5e5a4
Ensure line of sight follows great circle and polyline display cleanup
jtroberts Jun 24, 2025
e67988e
Use LOS technique to draw great circle lines with varying colors
jtroberts Jun 30, 2025
c4c85e0
Show great circle line even if no DEM #52
jtroberts Jul 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 96 additions & 59 deletions src/essence/Tools/Measure/MeasureTool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,7 +424,7 @@ const Measure = () => {
if (distDisplayUnit === 'kilometers') {
return value.toFixed(2) + 'km'
}
return value + 'm'
return value.toFixed(2) + 'm'
},
},
},
Expand Down Expand Up @@ -721,6 +721,7 @@ let MeasureTool = {
'#3dffdf',
'#cc5200',
],
polylineMeasure: null,
init: function () {},
make: function () {
Map_.rmNotNull(measureToolLayer)
Expand All @@ -731,6 +732,34 @@ let MeasureTool = {
distDisplayUnit = 'meters'
steps = 100

MeasureTool.polylineMeasure = L.control.polylineMeasure({
position: 'bottomright', // hide the control
unit: distDisplayUnit,
showBearings: false,
showTooltips: false,
clearMeasurementsOnStop: false,
showClearControl: false,
showUnitControl: false,
fixedLine: {
color: 'red',
weight: 3
},
tempLine: {
color: 'yellow',
weight: 3
},
currentCircle: {
color: '#000',
weight: 1,
fillOpacity: 0,
radius: 6
},
tooltipTextFinish: '',
tooltipTextDelete: '',
})
MeasureTool.polylineMeasure.addTo(Map_.map)
MeasureTool.polylineMeasure._toggleMeasure()

//Get tool variables
this.vars = JSON.parse(JSON.stringify(L_.getToolVars('measure', true)))
this.vars.layerDems = this.vars.layerDems || {}
Expand Down Expand Up @@ -774,6 +803,10 @@ let MeasureTool = {
.off('mousemove', MeasureTool.moveMap)
.off('mouseout', MeasureTool.mouseOutMap)

MeasureTool.polylineMeasure._clearAllMeasurements()
MeasureTool.polylineMeasure.onRemove()
Map_.map.removeControl(MeasureTool.polylineMeasure)

if (L_.hasGlobe) {
const globeCont = Globe_.litho.getContainer()
globeCont.removeEventListener(
Expand Down Expand Up @@ -1031,6 +1064,7 @@ let MeasureTool = {
MeasureTool.lastData = []
MeasureTool.uniformData = []
MeasureTool.datasetMapping = []
MeasureTool.polylineMeasure._clearAllMeasurements()
//distDisplayUnit = 'meters'

Map_.rmNotNull(distLineToMouse)
Expand Down Expand Up @@ -1157,13 +1191,11 @@ let MeasureTool = {

function recomputeLineOfSight() {
MeasureTool.lineOfSight = []
if (LOS.on) {
F_.chunkArray(profileData, steps).forEach((chunk) => {
MeasureTool.lineOfSight = MeasureTool.lineOfSight.concat(
F_.lineOfSight1D(chunk, LOS.observerHeight, LOS.targetHeight)
)
})
}
F_.chunkArray(profileData, steps).forEach((chunk) => {
MeasureTool.lineOfSight = MeasureTool.lineOfSight.concat(
F_.lineOfSight1D(chunk, LOS.observerHeight, LOS.targetHeight)
)
})
}

// Takes non-linear x-axis profileData and makes it fit linearly. (Only for display purposes)
Expand Down Expand Up @@ -1242,10 +1274,14 @@ function getIdealXAxisStepSize() {

function makeMeasureToolLayer() {
Map_.rmNotNull(measureToolLayer)
if (MeasureTool.polylineMeasure._arrPolylines.length > 0) {
MeasureTool.polylineMeasure._clearAllMeasurements()
}

var pointsAndPathArr = []
var polylinePoints = []
var temp
var clickedLatLngsPoly = []
for (var i = 0; i < clickedLatLngs.length; i++) {
temp = new L.circleMarker([clickedLatLngs[i].x, clickedLatLngs[i].y], {
fillColor: i == 0 ? 'var(--color-green2)' : 'black',
Expand Down Expand Up @@ -1304,11 +1340,25 @@ function makeMeasureToolLayer() {
polylinePoints.push(
new L.LatLng(clickedLatLngs[i].x, clickedLatLngs[i].y)
)

// rename object keys to lat/lng for polylineMeasure
clickedLatLngsPoly.push({lat: clickedLatLngs[i].x, lng: clickedLatLngs[i].y})
}

// draw latlngs as a great circle arc
if (mode === 'segment' && clickedLatLngs.length > 1) {
MeasureTool.polylineMeasure.options.fixedLine.weight = 3
if (clickedLatLngs.length > 1) {
MeasureTool.polylineMeasure.seed([clickedLatLngsPoly])
}
} else {
MeasureTool.polylineMeasure.options.fixedLine.weight = 0
}

const segments = []
recomputeLineOfSight()
if (LOS.on && MeasureTool.lineOfSight.length > 0) {

if (MeasureTool.lineOfSight.length > 0) {
let currentVis = MeasureTool.lineOfSight[0]
F_.chunkArray(MeasureTool.lineOfSight, steps).forEach(
(chunk, chunkIdx) => {
Expand All @@ -1318,69 +1368,56 @@ function makeMeasureToolLayer() {
const chunkOffset = chunkIdx * steps
if (idx === 0) currentVis = visible

if (visible != currentVis || idx === chunk.length - 1) {
// draw previous
segments.push(
new L.Polyline(
[
{
lat: MeasureTool.lastData[
startIdx + chunkOffset
][1],
lng: MeasureTool.lastData[
startIdx + chunkOffset
][0],
},
{
lat: MeasureTool.lastData[
endIdx + chunkOffset
][1],
lng: MeasureTool.lastData[
endIdx + chunkOffset
][0],
},
],
// draw previous
segments.push(
new L.Polyline(
[
{
lat: MeasureTool.lastData[
startIdx + chunkOffset
][1],
lng: MeasureTool.lastData[
startIdx + chunkOffset
][0],
},
{
color:
currentVis === 0
lat: MeasureTool.lastData[
endIdx + chunkOffset
][1],
lng: MeasureTool.lastData[
endIdx + chunkOffset
][0],
},
],
{
color:
LOS.on
? currentVis === 0
? 'black'
: mode === 'continuous_color'
? MeasureTool.getColor(chunkIdx)
: mode === 'continuous'
? (chunkIdx + 1) % 2
? '#ff002f'
: '#ff5070'
: '#ff002f'
: mode === 'continuous_color'
? MeasureTool.getColor(chunkIdx)
: mode === 'continuous'
? (chunkIdx + 1) % 2
? '#ff002f'
: '#ff5070'
: '#ff002f',
weight: 3,
}
)
weight: 3,
}
)

currentVis = visible
startIdx = idx
endIdx++
} else {
endIdx++
}
)
currentVis = visible
startIdx = idx
endIdx++
})
}
)
} else {
for (let i = 1; i < polylinePoints.length; i++) {
segments.push(
new L.Polyline([polylinePoints[i - 1], polylinePoints[i]], {
color:
mode === 'continuous_color'
? MeasureTool.getColor(i - 1)
: mode === 'continuous'
? i % 2
? '#ff002f'
: '#ff5070'
: '#ff002f',
weight: 3,
})
)
}
}

pointsAndPathArr.unshift(...segments)
Expand Down
59 changes: 59 additions & 0 deletions src/external/Leaflet/Leaflet.PolylineMeasure.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/*********************************************************
** **
** Leaflet Plugin "Leaflet.PolylineMeasure" **
** File "Leaflet.PolylineMeasure.css" **
** Date: 2023-05-26 **
** **
*********************************************************/


a.polyline-measure-controlOnBgColor, a.polyline-measure-controlOnBgColor:hover {
background-color: #8f8;
}

.polyline-measure-unicode-icon {
font-size: 19px;
font-weight: bold;
}

a.polyline-measure-clearControl:active {
background-color: #f88;
}

.polyline-measure-unicode-icon, .polyline-measure-clearControl, #unitControlId
{
cursor: pointer;
}

.polyline-measure-tooltip {
font: 10px Arial, Helvetica, sans-serif;
line-height: 10px;
background-color: rgba(255, 255, 170, 0.7);
border-radius: 3px;
box-shadow: 1px 1px 4px #888;
margin: 0;
padding: 2px;
width: auto !important;
height: auto !important;
white-space: nowrap;
text-align: right;
}

.polyline-measure-tooltip-end {
background-color: rgba(255, 255, 40, 0.7);
}

.polyline-measure-tooltip-total {
color: #006;
font-weight: bold;
}

.polyline-measure-tooltip-difference {
color: #060;
font-style: italic;
}

.polyline-measure-popupTooltip {
font: 11px Arial, Helvetica, sans-serif;
line-height: 11px;
}
Loading
⚡