Skip to content

Commit

Permalink
#151 Support 3D Uncertainty Ellipses on Point Features (#153)
Browse files Browse the repository at this point in the history 
* 3D Uncertainty ellipses

* #151 Upgrade lithosphere, more uncertainty ellipse options, docs
  • Loading branch information
@tariqksoliman
tariqksoliman committed Feb 24, 2022
1 parent 2ddfd64 commit d082a84
Show file tree
Hide file tree
Showing 4 changed files with 246 additions and 73 deletions.
11 changes: 10 additions & 1 deletion docs/pages/markdowns/Vector.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,8 @@ Example:
"angleProp": "path.to.angle.prop",
"angleUnit": "deg || rad",
"color": "#888888",
"color3d": "#FFFF00",
"depth3d": 8
},
"image": {
"initialVisibility": true,
Expand Down Expand Up @@ -209,7 +211,14 @@ Example:
- `axisUnit`: "meters || kilometers",
- `angleProp`: Prop path to the rotation of the ellipse.
- `angleUnit`: "deg || rad"
- `color`: A css fill color. Will be made more transparent than set.
- `color`: A css fill color. Will be made more transparent than set. Default 'white'
- `fillOpacity`: Map and clamped ellipse fill opacity. 0 to 1. Default 0.25
- `strokeColor`: Map and clamped ellipse stroke/border color. Default 'black'
- `weight`: Map and clamped ellipse stroke/border weight/thickness. Default 1
- `opacity`: Overall Map and clamped ellipse opacity. Default 0.8
- `color3d`: 3d curtain ellipse color. Can be an array for a vertical gradient: ["rgba(0,0,0,0)", "#26A8FF"]
- `depth3d`: Depth in meters for 3d ellipse curve. Default 2
- `opacity3d`: 3d curtain ellipse opacity
- `image`: Places a scaled and orientated image under each marker. A sublayer.
- `initialVisibility`: Whether the image sublayer is initially on. Users can toggle sublayers on and off in the layer settings in the LayersTool.
- `path`: A url to a (preferably) top-down north-facing orthographic image.
Expand Down
122 changes: 102 additions & 20 deletions src/essence/Basics/Layers_/LayerConstructors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,6 +329,87 @@ export const constructSublayers = (geojson, layerObj) => {
layerObj,
'variables.markerAttachments.uncertainty'
)
let uncertaintyStyle
let curtainUncertaintyOptions
let clampedUncertaintyOptions
if (uncertaintyVar) {
uncertaintyStyle = {
fillOpacity: uncertaintyVar.fillOpacity || 0.25,
fillColor: uncertaintyVar.color || 'white',
color: uncertaintyVar.strokeColor || 'black',
weight: uncertaintyVar.weight || 1,
opacity: uncertaintyVar.opacity || 0.8,
className: 'noPointerEventsImportant',
}
// For Globe Curtains
const uncertaintyEllipseFeatures = []
const depth3d = uncertaintyVar.depth3d || 2
geojson.features.forEach((f) => {
let uncertaintyAngle = parseFloat(
F_.getIn(f.properties, uncertaintyVar.angleProp, 0)
)
if (uncertaintyVar.angleUnit === 'rad')
uncertaintyAngle = uncertaintyAngle * (180 / Math.PI)

if (f.geometry.type === 'Point') {
const feature = F_.toEllipse(
{
lat: f.geometry.coordinates[1],
lng: f.geometry.coordinates[0],
},
{
x: F_.getIn(f.properties, uncertaintyVar.xAxisProp, 1),
y: F_.getIn(f.properties, uncertaintyVar.yAxisProp, 1),
},
window.mmgisglobal.customCRS,
{
units: uncertaintyVar.axisUnits || 'meters',
steps: 32,
angle: uncertaintyAngle,
}
)
for (
let i = 0;
i < feature.geometry.coordinates[0].length;
i++
) {
feature.geometry.coordinates[0][i][2] =
f.geometry.coordinates[2] + depth3d
}
uncertaintyEllipseFeatures.push(feature)
}
})

curtainUncertaintyOptions = {
name: `markerAttachmentUncertainty_${layerObj.name}Curtain`,
on: true,
opacity: uncertaintyVar.opacity3d || 0.5,
imageColor:
uncertaintyVar.color3d || uncertaintyVar.color || '#FFFF00',
depth: depth3d + 1,
geojson: {
type: 'FeatureCollection',
features: uncertaintyEllipseFeatures,
},
}
clampedUncertaintyOptions = {
name: `markerAttachmentUncertainty_${layerObj.name}Clamped`,
on: true,
order: -9999,
opacity: 1,
minZoom: 0,
maxZoom: 100,
geojson: {
type: 'FeatureCollection',
features: uncertaintyEllipseFeatures,
},
style: {
default: uncertaintyStyle,
},
}
}

// For Leaflet
const leafletLayerObjectUncertaintyEllipse = {
pointToLayer: (feature, latlong) => {
// Marker Attachment Uncertainty
Expand Down Expand Up @@ -362,18 +443,12 @@ export const constructSublayers = (geojson, layerObj) => {
)

uncertaintyEllipse = L.geoJSON(uncertaintyEllipse, {
style: {
fillOpacity: 0.25,
fillColor: uncertaintyVar.color || 'white',
color: 'black',
weight: 1,
opacity: 0.8,
className: 'noPointerEventsImportant',
},
style: uncertaintyStyle,
})
return uncertaintyEllipse
},
}

// IMAGE
const imageVar = F_.getIn(layerObj, 'variables.markerAttachments.image')
const imageShow = F_.getIn(
Expand Down Expand Up @@ -612,18 +687,25 @@ export const constructSublayers = (geojson, layerObj) => {
}

const sublayers = {
uncertainty_ellipses: uncertaintyVar
? {
on:
uncertaintyVar.initialVisibility != null
? uncertaintyVar.initialVisibility
: true,
layer: L.geoJson(
geojson,
leafletLayerObjectUncertaintyEllipse
),
}
: false,
uncertainty_ellipses:
uncertaintyVar && curtainUncertaintyOptions
? {
on:
uncertaintyVar.initialVisibility != null
? uncertaintyVar.initialVisibility
: true,
type: 'uncertainty_ellipses',
curtainLayerId: curtainUncertaintyOptions.name,
curtainOptions: curtainUncertaintyOptions,
clampedLayerId: clampedUncertaintyOptions.name,
clampedOptions: clampedUncertaintyOptions,
geojson: geojson,
layer: L.geoJson(
geojson,
leafletLayerObjectUncertaintyEllipse
),
}
: false,
image_overlays:
imageVar && imageShow === 'always'
? {
Expand Down
184 changes: 133 additions & 51 deletions src/essence/Basics/Layers_/Layers_.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,17 +195,33 @@ var L_ = {
L_.Map_.map.removeLayer(L_.layersGroup[s.name])
if (L_.layersGroupSublayers[s.name]) {
for (let sub in L_.layersGroupSublayers[s.name]) {
if (
L_.layersGroupSublayers[s.name][sub].type ===
'model'
) {
L_.Globe_.litho.removeLayer(
L_.layersGroupSublayers[s.name][sub].layerId
)
} else {
L_.Map_.rmNotNull(
L_.layersGroupSublayers[s.name][sub].layer
)
switch (L_.layersGroupSublayers[s.name][sub].type) {
case 'model':
L_.Globe_.litho.removeLayer(
L_.layersGroupSublayers[s.name][sub]
.layerId
)
break
case 'uncertainty_ellipses':
L_.Globe_.litho.removeLayer(
L_.layersGroupSublayers[s.name][sub]
.curtainLayerId
)
L_.Globe_.litho.removeLayer(
L_.layersGroupSublayers[s.name][sub]
.clampedLayerId
)
L_.Map_.rmNotNull(
L_.layersGroupSublayers[s.name][sub]
.layer
)
break
default:
L_.Map_.rmNotNull(
L_.layersGroupSublayers[s.name][sub]
.layer
)
break
}
}
}
Expand All @@ -218,27 +234,52 @@ var L_ = {
if (L_.layersGroupSublayers[s.name]) {
for (let sub in L_.layersGroupSublayers[s.name]) {
if (L_.layersGroupSublayers[s.name][sub].on) {
if (
L_.layersGroupSublayers[s.name][sub]
.type === 'model'
switch (
L_.layersGroupSublayers[s.name][sub].type
) {
L_.Globe_.litho.addLayer(
'model',
L_.layersGroupSublayers[s.name][sub]
.modelOptions
)
} else {
L_.Map_.map.addLayer(
L_.layersGroupSublayers[s.name][sub]
.layer
)
L_.layersGroupSublayers[s.name][
sub
].layer.setZIndex(
L_.layersOrdered.length +
1 -
L_.layersOrdered.indexOf(s.name)
)
case 'model':
L_.Globe_.litho.addLayer(
'model',
L_.layersGroupSublayers[s.name][sub]
.modelOptions
)
break
case 'uncertainty_ellipses':
L_.Globe_.litho.addLayer(
'curtain',
L_.layersGroupSublayers[s.name][sub]
.curtainOptions
)
L_.Globe_.litho.addLayer(
'clamped',
L_.layersGroupSublayers[s.name][sub]
.clampedOptions
)
L_.Map_.map.addLayer(
L_.layersGroupSublayers[s.name][sub]
.layer
)
L_.layersGroupSublayers[s.name][
sub
].layer.setZIndex(
L_.layersOrdered.length +
1 -
L_.layersOrdered.indexOf(s.name)
)
break
default:
L_.Map_.map.addLayer(
L_.layersGroupSublayers[s.name][sub]
.layer
)
L_.layersGroupSublayers[s.name][
sub
].layer.setZIndex(
L_.layersOrdered.length +
1 -
L_.layersOrdered.indexOf(s.name)
)
break
}
}
}
Expand Down Expand Up @@ -389,22 +430,49 @@ var L_ = {
const sublayer = sublayers[sublayerName]
if (sublayer) {
if (sublayer.on === true) {
if (sublayer.type === 'model') {
L_.Globe_.litho.removeLayer(sublayer.layerId)
} else {
L_.Map_.rmNotNull(sublayer.layer)
switch (sublayer.type) {
case 'model':
L_.Globe_.litho.removeLayer(sublayer.layerId)
break
case 'uncertainty_ellipses':
L_.Globe_.litho.removeLayer(sublayer.curtainLayerId)
L_.Globe_.litho.removeLayer(sublayer.clampedLayerId)
L_.Map_.rmNotNull(sublayer.layer)
break
default:
L_.Map_.rmNotNull(sublayer.layer)
break
}
sublayer.on = false
} else {
if (sublayer.type === 'model') {
L_.Globe_.litho.addLayer('model', sublayer.modelOptions)
} else {
L_.Map_.map.addLayer(sublayer.layer)
sublayer.layer.setZIndex(
L_.layersOrdered.length +
1 -
L_.layersOrdered.indexOf(layerName)
)
switch (sublayer.type) {
case 'model':
L_.Globe_.litho.addLayer('model', sublayer.modelOptions)
break
case 'uncertainty_ellipses':
L_.Globe_.litho.addLayer(
'curtain',
sublayer.curtainOptions
)
L_.Globe_.litho.addLayer(
'clamped',
sublayer.clampedOptions
)
L_.Map_.map.addLayer(sublayer.layer)
sublayer.layer.setZIndex(
L_.layersOrdered.length +
1 -
L_.layersOrdered.indexOf(layerName)
)
break
default:
L_.Map_.map.addLayer(sublayer.layer)
sublayer.layer.setZIndex(
L_.layersOrdered.length +
1 -
L_.layersOrdered.indexOf(layerName)
)
break
}
sublayer.on = true
}
Expand Down Expand Up @@ -480,13 +548,27 @@ var L_ = {
L_.layersData[i].name
][s]
if (sublayer.on) {
if (sublayer.type === 'model') {
L_.Globe_.litho.addLayer(
'model',
sublayer.modelOptions
)
} else {
map.addLayer(sublayer.layer)
switch (sublayer.type) {
case 'model':
L_.Globe_.litho.addLayer(
'model',
sublayer.modelOptions
)
break
case 'uncertainty_ellipses':
L_.Globe_.litho.addLayer(
'curtain',
sublayer.curtainOptions
)
L_.Globe_.litho.addLayer(
'clamped',
sublayer.clampedOptions
)
map.addLayer(sublayer.layer)
break
default:
map.addLayer(sublayer.layer)
break
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/essence/Tools/Layers/LayersTool.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ function interfaceWithMMGIS() {
'<input class="transparencyslider slider2" layername="' + node[i].name + '" type="range" min="0" max="1" step="0.01" value="' + currentOpacity + '" default="' + L_.opacityArray[node[i].name] + '">',
'</div>',
L_.layersGroupSublayers[node[i].name] ? Object.keys(L_.layersGroupSublayers[node[i].name]).map((function(i){return function(s) {
return [
return L_.layersGroupSublayers[node[i].name][s] === false ? '' : [
'<div class="sublayer">',
`<div>${F_.prettifyName(s)}</div>`,
'<div class="checkboxcont">',
Expand Down

0 comments on commit d082a84

Please sign in to comment.