Skip to content

Commit

Permalink
#138 Projection agnostic Uncertain Ellipses, touch ups
Browse files Browse the repository at this point in the history
  • Loading branch information
@tariqksoliman
tariqksoliman committed Jan 31, 2022
1 parent 0e77d9e commit af79773
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 27 deletions.
75 changes: 74 additions & 1 deletion src/essence/Basics/Formulae_/Formulae_.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1741,8 +1741,81 @@ var Formulae_ = {
})
return str
},
/** Returns an ellipse with major and minor axes and rotation about a point
// Adapted from turf.js' ellipse function
* @param lnglat {lng: lat:}
* @param axes {x: y:}
* @param crs {object}
* @param options {units: 'meters', steps: 32, angle: 0}
*/
toEllipse(lnglat, axes, crs, options) {
if (crs == null) return null

let xAxis = axes.x || 0
let yAxis = axes.y || 0
// Optional params
options = options || {}
let steps = options.steps || 32
let units = options.units || 'meters'
let angle = (options.angle || 0) * -1
const angleRad = angle * (Math.PI / 180)

if (units === 'kilometers') {
xAxis *= 1000
yAxis *= 1000
}

const centerEN = crs.project(lnglat)
const centerCoordsEN = [centerEN.x, centerEN.y]

const coordinates = []
for (let i = 0; i < steps; i += 1) {
let stepAngle = (i * -360) / steps
let x =
(xAxis * yAxis) /
Math.sqrt(
Math.pow(yAxis, 2) +
Math.pow(xAxis, 2) *
Math.pow(Math.tan((stepAngle * Math.PI) / 180), 2)
)
let y =
(xAxis * yAxis) /
Math.sqrt(
Math.pow(xAxis, 2) +
Math.pow(yAxis, 2) /
Math.pow(Math.tan((stepAngle * Math.PI) / 180), 2)
)

if (stepAngle < -90 && stepAngle >= -270) x = -x
if (stepAngle < -180 && stepAngle >= -360) y = -y

const rot = Formulae_.rotatePoint(
{
x: x,
y: y,
},
[0, 0],
angleRad
)
x = rot.x
y = rot.y

let lnglatCoord = crs.unproject({
x: x + centerCoordsEN[0],
y: y + centerCoordsEN[1],
})
coordinates.push([lnglatCoord.lng, lnglatCoord.lat])
}
coordinates.push(coordinates[0])

return {
type: 'Feature',
properties: {},
geometry: { type: 'Polygon', coordinates: [coordinates] },
}
},
getCookieValue(a) {
var b = document.cookie.match('(^|[^;]+)\\s*' + a + '\\s*=\\s*([^;]+)')
let b = document.cookie.match('(^|[^;]+)\\s*' + a + '\\s*=\\s*([^;]+)')
return b ? b.pop() : ''
},
getBrowser() {
Expand Down
43 changes: 27 additions & 16 deletions src/essence/Basics/Layers_/LayerConstructors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@

import $ from 'jquery'
import * as d3 from 'd3'
import { ellipse } from '@turf/turf'
import F_ from '../Formulae_/Formulae_'
import L_ from '../Layers_/Layers_'

Expand Down Expand Up @@ -157,8 +156,8 @@ export const constructVectorLayer = (
break
case 'directional_circle':
svg = [
`<div style="transform: rotateZ(${yaw}deg); transform-origin: center;">`,
`<svg style="height=100%;width=100%;overflow: visible;" viewBox="0 0 24 24" fill="${featureStyle.fillColor}" stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<div style="height: 100%; width: 100%;transform: rotateZ(${yaw}deg); transform-origin: center;">`,
`<svg style="overflow: visible;" viewBox="0 0 24 24" fill="${featureStyle.fillColor}" stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<path d="M12,8L4.5,20.29L5.21,21L18.79,21L19.5,20.29L12,8Z" transform="translate(0 ${-(
12 -
pixelBuffer +
Expand All @@ -174,21 +173,21 @@ export const constructVectorLayer = (
break
case 'triangle':
svg = [
`<svg style="height=100%px;width=100%px" viewBox="0 0 24 24" fill="${featureStyle.fillColor}" stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<svg viewBox="0 0 24 24" fill="${featureStyle.fillColor}" stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<path d="M1,21H23L12,2Z" />`,
`</svg>`,
].join('\n')
break
case 'triangle-flipped':
svg = [
`<svg style="height=100%px;width=100%px;transform:rotate(180deg);" viewBox="0 0 24 24" fill="${featureStyle.fillColor}" stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<svg style="transform:rotate(180deg);" viewBox="0 0 24 24" fill="${featureStyle.fillColor}" stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<path d="M1,21H23L12,2Z" />`,
`</svg>`,
].join('\n')
break
case 'square':
svg = [
`<svg style="width=100%;height=100%" viewBox="0 0 24 24" fill="${featureStyle.fillColor}" stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<svg viewBox="0 0 24 24" fill="${featureStyle.fillColor}" stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<rect x="${pixelBuffer}" y="${pixelBuffer}" width="${
24 - pixelBuffer * 2
}" height="${24 - pixelBuffer * 2}"/>`,
Expand All @@ -197,42 +196,42 @@ export const constructVectorLayer = (
break
case 'diamond':
svg = [
`<svg style="height=100%;width=100%" viewBox="0 0 24 24" fill="${featureStyle.fillColor} "stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<svg viewBox="0 0 24 24" fill="${featureStyle.fillColor} "stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<path d="M19,12L12,22L5,12L12,2" />`,
`</svg>`,
].join('\n')
break
case 'pentagon':
svg = [
`<svg style="height=100%;width=100%" viewBox="0 0 24 24" fill="${featureStyle.fillColor} "stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<svg viewBox="0 0 24 24" fill="${featureStyle.fillColor} "stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<path d="M12,2.5L2,9.8L5.8,21.5H18.2L22,9.8L12,2.5Z" />`,
`</svg>`,
].join('\n')
break
case 'hexagon':
svg = [
`<svg style="height=100%;width=100%" viewBox="0 0 24 24" fill="${featureStyle.fillColor} "stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<svg viewBox="0 0 24 24" fill="${featureStyle.fillColor} "stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<path d="M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5Z" />`,
`</svg>`,
].join('\n')
break
case 'star':
svg = [
`<svg style="height=100%;width=100%" viewBox="0 0 24 24" fill="${featureStyle.fillColor}" stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<svg viewBox="0 0 24 24" fill="${featureStyle.fillColor}" stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />`,
`</svg>`,
].join('\n')
break
case 'plus':
svg = [
`<svg style="height=100%;width=100%" viewBox="0 0 24 24" fill="${featureStyle.fillColor} "stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<svg viewBox="0 0 24 24" fill="${featureStyle.fillColor} "stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<path d="M20 14H14V20H10V14H4V10H10V4H14V10H20V14Z" />`,
`</svg>`,
].join('\n')
break
case 'pin':
svg = [
`<svg style="height=100%;width=100%" viewBox="0 0 24 24" fill="${featureStyle.fillColor} "stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<svg viewBox="0 0 24 24" fill="${featureStyle.fillColor} "stroke="${featureStyle.color}" stroke-width="${featureStyle.weight}">`,
`<path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" />`,
`</svg>`,
].join('\n')
Expand Down Expand Up @@ -340,16 +339,28 @@ export const constructSublayers = (geojson, layerObj) => {
if (uncertaintyVar.angleUnit === 'rad')
uncertaintyAngle = uncertaintyAngle * (180 / Math.PI)

uncertaintyEllipse = ellipse(
[latlong.lng, latlong.lat],
F_.getIn(feature.properties, uncertaintyVar.xAxisProp, 1),
F_.getIn(feature.properties, uncertaintyVar.yAxisProp, 1),
uncertaintyEllipse = F_.toEllipse(
latlong,
{
x: F_.getIn(
feature.properties,
uncertaintyVar.xAxisProp,
1
),
y: F_.getIn(
feature.properties,
uncertaintyVar.yAxisProp,
1
),
},
window.mmgisglobal.customCRS,
{
units: uncertaintyVar.axisUnits || 'meters',
steps: 32,
angle: uncertaintyAngle,
}
)

uncertaintyEllipse = L.geoJSON(uncertaintyEllipse, {
style: {
fillOpacity: 0.25,
Expand Down
2 changes: 1 addition & 1 deletion src/essence/Basics/UserInterface_/BottomBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ let BottomBar = {
`<div>Radius of Tiles<i title='Number of tiles to query out from the center in the Globe view.\nThe higher the number, the more data queried in the distance (which may hurt performance).\n' class="infoIcon mdi mdi-information mdi-12px"></i></div>`,
`<div class='flexbetween'>`,
`<div id='globeRadiusOfTilesValue' style='padding: 0px 6px;'>${L_.Globe_.litho.options.radiusOfTiles}</div>`,
`<input id='globeSetRadiusOfTiles' class="slider2 darker" type="range" min="4" max="11" step="1"/>`,
`<input id='globeSetRadiusOfTiles' class="slider2 darker" type="range" min="4" max="11" step="1" value="${L_.Globe_.litho.options.radiusOfTiles}"/>`,
`</div>`,
`</li>`,
`</ul>`,
Expand Down
22 changes: 13 additions & 9 deletions src/essence/Tools/Measure/MeasureTool.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -771,19 +771,23 @@ function makeProfile() {
'Warning: MeasureTool: No elevation data found in ' +
pathDEM
)
MeasureTool.reset()
return
}
try {
data = data.replace(/[\n\r]/g, '')
data = JSON.parse(data)
} catch (err) {
console.log(err)
// Fake a line between the most then
// Fake a no data line between them then
data = [
[elevPoints[0].y, elevPoints[0].x, 0],
[elevPoints[1].y, elevPoints[1].x, 0],
]
} else {
try {
data = data.replace(/[\n\r]/g, '')
data = JSON.parse(data)
} catch (err) {
console.log(err)
// Fake a no data line between them then
data = [
[elevPoints[0].y, elevPoints[0].x, 0],
[elevPoints[1].y, elevPoints[1].x, 0],
]
}
}

if (mode === 'segment') MeasureTool.data = F_.clone(data)
Expand Down

0 comments on commit af79773

Please sign in to comment.