Skip to content

Commit

Permalink
fix multi point display on map
Browse files Browse the repository at this point in the history
  • Loading branch information
@JustinElms
JustinElms committed Nov 21, 2024
1 parent 1f4368c commit 9644418
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 118 deletions.
7 changes: 2 additions & 5 deletions oceannavigator/frontend/src/components/map/Map.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,6 @@ const MainMap = forwardRef((props, ref) => {
strategy: olLoadingstrategy.bbox,
format: new GeoJSON(),
loader: loader,
wrapX: true,
});

const newObsDrawSource = new VectorSource({
Expand Down Expand Up @@ -590,7 +589,6 @@ const MainMap = forwardRef((props, ref) => {
strategy: olLoadingstrategy.bbox,
format: new GeoJSON(),
loader: loader,
wrapX: true,
});
layerVector.setSource(newVectorSource);
setVectorSource(newVectorSource);
Expand Down Expand Up @@ -676,13 +674,12 @@ const MainMap = forwardRef((props, ref) => {

const drawPoints = (vectorSource) => {
if (props.vectorCoordinates.length > 0) {
let feat = pointFeature(
pointFeature(
props.vectorType,
props.vectorCoordinates,
vectorSource,
props.mapSettings.projection
);

vectorSource.addFeature(feat);
}
};

Expand Down
240 changes: 127 additions & 113 deletions oceannavigator/frontend/src/components/map/drawing.js
View file
Original file line number Diff line number Diff line change
@@ -1,138 +1,152 @@
import Feature from "ol/Feature.js";
import * as olExtent from "ol/extent";
import * as olinteraction from "ol/interaction";
import Draw from "ol/interaction/Draw";
import * as olgeom from "ol/geom";
import * as olProj from "ol/proj";
import { getDistance } from "ol/sphere";

export const drawAction = (vectorSource, vectorType, projection, action) => {
const drawAction = new olinteraction.Draw({
source: vectorSource,
type: "Point",
stopClick: true,
wrapX: true,
});
const drawAction = new Draw({
source: vectorSource,
type: "Point",
stopClick: true,
wrapX: true,
});

drawAction.set("type", vectorType);
drawAction.on("drawend", function (e) {
// Disable zooming when drawing
const latlon = olProj
.transform(
e.feature.getGeometry().getCoordinates(),
projection,
"EPSG:4326"
)
.reverse();
// Draw point on map(s)
action("addPoints", [latlon]);
});
return drawAction
};
drawAction.set("type", vectorType);
drawAction.on("drawend", function (e) {
// Disable zooming when drawing
const latlon = olProj
.transform(
e.feature.getGeometry().getCoordinates(),
projection,
"EPSG:4326"
)
.reverse();
// Draw point on map(s)
action("addPoints", [latlon]);
});
return drawAction;
};

export const pointFeature = (
vectorType,
vectorCoordinates,
vectorSource,
projection
) => {
if (vectorCoordinates.length < 2) {
vectorType = "point";
}

export const pointFeature = (vectorType, vectorCoordinates, projection) => {
let geom;
let feat;
if ((vectorType === "point") | (vectorCoordinates.length < 2)) {
for (let c of vectorCoordinates) {
geom = new olgeom.Point([c[1], c[0]]);
geom = geom.transform("EPSG:4326", projection);

switch (vectorType) {
case "point":
for (let c of vectorCoordinates) {
geom = new olgeom.Point([c[1], c[0]]);
geom = geom.transform("EPSG:4326", projection);
feat = new Feature({
geometry: geom,
name: c[0].toFixed(4) + ", " + c[1].toFixed(4),
type: "point",
});
vectorSource.addFeature(feat);
}
break;
case "line":
geom = new olgeom.LineString(
vectorCoordinates.map(function (c) {
return [c[1], c[0]];
})
);

geom.transform("EPSG:4326", projection);
feat = new Feature({
geometry: geom,
name: c[0].toFixed(4) + ", " + c[1].toFixed(4),
type: "point",
type: "line",
});
}
} else if (vectorType === "line") {
geom = new olgeom.LineString(
vectorCoordinates.map(function (c) {
return [c[1], c[0]];
})
);

geom.transform("EPSG:4326", projection);
feat = new Feature({
geometry: geom,
type: "line",
});
} else if (vectorType === "area") {
geom = new olgeom.Polygon([
vectorCoordinates.map(function (c) {
return [c[1], c[0]];
}),
]);
const centroid = olExtent.getCenter(geom.getExtent());
geom.transform("EPSG:4326", projection);
feat = new Feature({
geometry: geom,
type: "area",
centroid: centroid,
});
}

return feat;
vectorSource.addFeature(feat);
break;
case "area":
geom = new olgeom.Polygon([
vectorCoordinates.map(function (c) {
return [c[1], c[0]];
}),
]);
const centroid = olExtent.getCenter(geom.getExtent());
geom.transform("EPSG:4326", projection);
feat = new Feature({
geometry: geom,
type: "area",
centroid: centroid,
});
vectorSource.addFeature(feat);
break;
}
};

export const getLineDistance = (line) => {
var dist = 0;
for (let i = 1; i < line.length; i++) {
let start = [line[i - 1][1], line[i - 1][0]];
let end = [line[i][1], line[i][0]];
dist += getDistance(start, end);
}
var dist = 0;
for (let i = 1; i < line.length; i++) {
let start = [line[i - 1][1], line[i - 1][0]];
let end = [line[i][1], line[i][0]];
dist += getDistance(start, end);
}

return dist;
};
return dist;
};

export const obsPointDrawAction = (map, obsDrawSource, projection, action) => {
const drawAction = new olinteraction.Draw({
source: obsDrawSource,
type: "Point",
stopClick: true,
});
drawAction.set("type", "Point");
drawAction.on("drawend", function (e) {
// Disable zooming when drawing
const lonlat = olProj.transform(
e.feature.getGeometry().getCoordinates(),
projection,
"EPSG:4326"
);

// Send area to Observation Selector
obsDrawSource.clear();
action("setObsArea", [[lonlat[1], lonlat[0]]]);

map.removeInteraction(drawAction);
});
const drawAction = new Draw({
source: obsDrawSource,
type: "Point",
stopClick: true,
});
drawAction.set("type", "Point");
drawAction.on("drawend", function (e) {
// Disable zooming when drawing
const lonlat = olProj.transform(
e.feature.getGeometry().getCoordinates(),
projection,
"EPSG:4326"
);

return drawAction
}
// Send area to Observation Selector
obsDrawSource.clear();
action("setObsArea", [[lonlat[1], lonlat[0]]]);

map.removeInteraction(drawAction);
});

return drawAction;
};

export const obsAreaDrawAction = (map, obsDrawSource, projection, action) => {
const draw = new olinteraction.Draw({
source: obsDrawSource,
type: "Polygon",
stopClick: true,
});
draw.set("type", "Polygon");
draw.on("drawend", function (e) {
// Disable zooming when drawing
const points = e.feature
.getGeometry()
.getCoordinates()[0]
.map(function (c) {
const lonlat = olProj.transform(
c,
projection,
"EPSG:4326"
);
return [lonlat[1], lonlat[0]];
});
// Send area to Observation Selector
action("setObsArea", points);
map.removeInteraction(draw);
setTimeout(function () {
obsDrawSource.clear();
}, 251);
const drawAction = new Draw({
source: obsDrawSource,
type: "Polygon",
stopClick: true,
});
drawAction.set("type", "Polygon");
drawAction.on("drawend", function (e) {
// Disable zooming when drawing
const points = e.feature
.getGeometry()
.getCoordinates()[0]
.map(function (c) {
const lonlat = olProj.transform(c, projection, "EPSG:4326");
return [lonlat[1], lonlat[0]];
});
}
// Send area to Observation Selector
action("setObsArea", points);
map.removeInteraction(drawAction);
setTimeout(function () {
obsDrawSource.clear();
}, 251);
});

return drawAction;
};
1 change: 1 addition & 0 deletions oceannavigator/frontend/src/components/map/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
import VectorTile from "ol/source/VectorTile";
import VectorTileLayer from "ol/layer/VectorTile.js";
import VectorLayer from "ol/layer/Vector.js";
import GeoJSON from "ol/format/GeoJSON.js";
import MVT from "ol/format/MVT.js";
import XYZ from "ol/source/XYZ";
import { defaults as defaultControls } from "ol/control/defaults";
Expand Down

0 comments on commit 9644418

Please sign in to comment.