Skip to content

Commit

Permalink
Edit shown style and correct popup coord
Browse files Browse the repository at this point in the history
  • Loading branch information
@MatRouillard
MatRouillard committed Jan 14, 2025
1 parent 05382d8 commit 7422c42
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 143 deletions.
19 changes: 10 additions & 9 deletions Carte.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -789,18 +789,18 @@ Carte.prototype.getFeaturesPopupContent = function(feat, getAllFeaturesContent =
}

/** Show a multi popup for an array of features
* @param {Array<Feature>} feat array of features
* @param {Array<Feature>} features array of features
* @param {ol.Overlay.Popup} popup the popup to display on the map
* @param {ol.Coordinate} coord popup position (the closest point will be used)
* @param {ol.geom|undefined} [geom] use as geometry, default use object geom
* @returns {Array<string>} Array of popup content
* @private
*/
Carte.prototype.showPopupFeatures = function(feat, popup, coord, geom) {
Carte.prototype.showPopupFeatures = function(features, popup, coord, geom) {
// Get features popup content
const result = this.getFeaturesPopupContent(feat)
const result = this.getFeaturesPopupContent(features)
const contents = result.contents;
const features = result.renderedFeatures;
const renderedFeatures = result.renderedFeatures;

// Show popup only if there is content
if (contents.length) {
Expand All @@ -815,26 +815,27 @@ Carte.prototype.showPopupFeatures = function(feat, popup, coord, geom) {

// Update coord if needed
if (!coord) {
// Get position of first feature on the map
const f = features[0]
coord = popup.getPosition() || (geom||f.getGeometry()).getFirstCoordinate();
}

if (features[0].getGeometry().getType() === 'Point') {
var offset = popup.offsetBox;
// Statistic layer has no style
if (features[0].getLayer() && features[0].getLayer().getIgnStyle) {
if (features[0].getLayer && features[0].getLayer() && features[0].getLayer().getIgnStyle) {
var style = features[0].getLayer().getIgnStyle(features[0]);
var offsetX = /left|right/.test(popup.autoPositioning[0]) ? style.pointRadius : 0;
popup.offsetBox = [-offsetX, (style.pointOffsetY ? -2:-1)*style.pointRadius, offsetX, style.pointOffsetY ? 0:style.pointRadius];
}
if (geom) popup.show(geom.getClosestPoint(coord), contents, features);
else popup.show(features[0].getGeometry().getFirstCoordinate(), contents, features);
if (geom) popup.show(geom.getClosestPoint(coord), contents, renderedFeatures);
else popup.show(features[0].getGeometry().getFirstCoordinate(), contents, renderedFeatures);
popup.offsetBox = offset;
} else {
if (/polygon/i.test(features[0].getGeometry().getType())) {
popup.show(coord, contents, features);
popup.show(coord, contents, renderedFeatures);
} else {
popup.show(features[0].getGeometry().getClosestPoint(coord), contents, features);
popup.show(features[0].getGeometry().getClosestPoint(coord), contents, renderedFeatures);
}
}
} else {
Expand Down
180 changes: 46 additions & 134 deletions style/ignStyleFn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -931,49 +931,43 @@ function getFeatureStyle(f, clustered, options, ignStyle, clusterColor) {
*/
function getSelectStyleFn(options) {
options = options || {};
var style = options.styleFn || getStyleFn({
const style = options.styleFn || getStyleFn({
// zIndex: Infinity,
select: options.type });
const selColor = options.color ? asArray(options.color) : [255,0,0];
const selColorFill = selColor.slice();
selColorFill[3] = 0;
selColorFill[3] = 0.5;

var stroke = options.stroke || new ol_style_Stroke({
const stroke = options.stroke || new ol_style_Stroke({
color: selColor,
width: 2,
});
var fill = options.fill || new ol_style_Fill({
const fill = options.fill || new ol_style_Fill({
color: selColorFill,
});
var radius = options.radius || 5;
var color = stroke.getColor();
var showObject = options.showObject !== false;
const radius = options.radius || 5;
const color = stroke.getColor();
const showObject = options.showObject !== false;

var pts = options.points instanceof ol_style_Image ? options.points : new ol_style_Circle({
const pts = options.points instanceof ol_style_Image ? options.points : new ol_style_Circle({
stroke: new ol_style_Stroke({
color: color,
width: 1,
}),
radius: 5,
declutterMode: 'none',
});
var ptsStyle = new ol_style_Style({
const ptsStyle = new ol_style_Style({
image: pts,
geometry: getGeomPoints,
zIndex: Infinity
});
var strokePoint = new ol_style_Stroke({
const strokePoint = new ol_style_Stroke({
color: color,
width: 5,
});

var fillStyle = new ol_style_Style({
// stroke: new ol_style_Stroke({ color:'transparent'}),
fill: fill,
zIndex: Infinity
});

var overlay = new ol_style_Style({
const overlay = new ol_style_Style({
image: new ol_style_Circle({
stroke: stroke,
fill: fill,
Expand All @@ -986,7 +980,7 @@ function getSelectStyleFn(options) {
});

return function(f, res) {
var s, s0;
let s, s0;
const points = options.features.getLength() > 10 ? false : options.points;
switch (options.type) {
case 'highlight':
Expand All @@ -995,7 +989,7 @@ function getSelectStyleFn(options) {
s0 = style(f, res);
s = [];
s0.forEach((si0) => {
var si = si0;
let si = si0;
if (si.getImage()) {
si.getImage().setScale(1.25);
si.getImage().setRotation(si0.getImage().getRotation());
Expand All @@ -1005,7 +999,6 @@ function getSelectStyleFn(options) {
}
s.push(si);
});
s.push(fillStyle);
if (points) s.push(ptsStyle);
return s;
}
Expand All @@ -1020,21 +1013,21 @@ function getSelectStyleFn(options) {
// Feature style
s = showObject ? style(f, res) : [];
// Add
var g = f.getGeometry();
console.log("select style")
const g = f.getGeometry();
if (/Point/.test(g.getType())) {
var cluster = f.get('features');
let cluster = f.get('features');
let feat = f;
let functionRadius = getClusterRadius;
if (cluster instanceof Array && cluster.length == 1) {
feat = cluster[0];
cluster = false;
} else if (cluster[0].getLayer().get('clusterType') === "stat") {
console.log("chart")
functionRadius = getChartRadius;
if (cluster instanceof Array) {
if (cluster.length == 1) {
feat = cluster[0];
cluster = false;
} else if (cluster[0].getLayer().get('clusterType') === "stat") {
functionRadius = getChartRadius;
}
}
// Get radius value
const r = (cluster ? functionRadius(cluster.length) : (feat.getIgnStyle('pointRadius') || 5)) + radius;
const r = (cluster instanceof Array ? functionRadius(cluster.length) : (feat.getIgnStyle('pointRadius') || 5)) + radius;
s.unshift(new ol_style_Style({
image: new ol_style_Circle({
stroke: strokePoint,
Expand Down Expand Up @@ -1068,38 +1061,29 @@ function getSelectStyleFn(options) {
*/
function getShownFeatureStyleFn(options) {
options = options || {};
const style = options.styleFn || getStyleFn({
select: options.type
});
// Get select style as default style
const style = options.styleFn || getSelectStyleFn(options);

const selColor = options.color ? asArray(options.color) : [255,0,0];
const selColorFill = selColor.slice();
selColorFill[3] = 0;

const stroke = options.stroke || new ol_style_Stroke({
color: selColor,
width: 2,
width: 5,
});

const selColorFill = selColor.slice();
selColorFill[3] = 0.5;
const fill = options.fill || new ol_style_Fill({
color: selColorFill,
});
const fillStyle = new ol_style_Style({
fill: fill,
zIndex: Infinity
});

const radius = options.radius || 5;
const color = stroke.getColor();
const showObject = options.showObject !== false;

const pts = options.points instanceof ol_style_Image ? options.points : new ol_style_Circle({
stroke: new ol_style_Stroke({
color: color,
width: 1,
}),
radius: 5,
declutterMode: 'none',
});
const ptsStyle = new ol_style_Style({
image: pts,
geometry: getGeomPoints,
zIndex: Infinity
});
const strokePoint = new ol_style_Stroke({
color: color,
width: 5,
Expand All @@ -1119,7 +1103,6 @@ function getShownFeatureStyleFn(options) {

return function(f, res) {
let s;
const points = options.features.getLength() > 10 ? false : options.points;
switch (options.type) {
case 'highlight':
case 'zoom': {
Expand All @@ -1135,104 +1118,33 @@ function getShownFeatureStyleFn(options) {
let cluster = f.get('features');
let feat = f;
let functionRadius = getClusterRadius;
if (cluster instanceof Array && cluster.length == 1) {
feat = cluster[0];
cluster = false;
} else if (cluster[0].getLayer().get('clusterType') === "stat") {
functionRadius = getChartRadius;
if (cluster instanceof Array) {
if (cluster.length == 1) {
feat = cluster[0];
cluster = false;
} else if (cluster[0].getLayer().get('clusterType') === "stat") {
functionRadius = getChartRadius;
}
}
// Get radius value
const r = (cluster ? functionRadius(cluster.length) : (feat.getIgnStyle('pointRadius') || 5)) + radius;
const style = new ol_style_Style({
const r = (cluster instanceof Array ? functionRadius(cluster.length) : (feat.getIgnStyle('pointRadius') || 5)) + radius;
s.unshift(new ol_style_Style({
image: new ol_style_Circle({
stroke: strokePoint,
radius: r,
declutterMode: 'none',
}),
zIndex: Infinity
})
style.newStyle = true
s.unshift(style);
}));
} else {
const fill = new ol_style_Fill({
color: [255, 0, 0, 0.5]
})
const fillStyle = new ol_style_Style({
fill: fill,
zIndex: Infinity
});
fillStyle.selectFill = true;

const g = f.getGeometry();
const stroke = new ol_style_Stroke({
color: [255, 0, 0],
width: 5,
});
const newStyle = new ol_style_Style({
stroke: stroke,
geometry: fromExtent(g.getExtent()),
zIndex: Infinity,
})
// Value to delete later
newStyle.newStyle = true;
s.unshift(newStyle);
s.push(fillStyle)
s.push(fillStyle);
}
}
return s
}
case 'overlay': {
// Feature style
s = showObject ? style(f, res) : [];
overlay.newStyle = true;
s.push(overlay);
if (points) {
ptsStyle.newStyle = true;
s.push(ptsStyle);
}
return s;
}
default: {
// Feature style
// Return feature style
s = showObject ? style(f, res) : [];
// Add
const g = f.getGeometry();
if (/Point/.test(g.getType())) {
let cluster = f.get('features');
let feat = f;
let functionRadius = getClusterRadius;
if (cluster instanceof Array && cluster.length == 1) {
feat = cluster[0];
cluster = false;
} else if (cluster[0].getLayer().get('clusterType') === "stat") {
console.log("chart shown")
functionRadius = getChartRadius;
}
// Get radius value
const r = (cluster ? functionRadius(cluster.length) : (feat.getIgnStyle('pointRadius') || 5)) + radius;
const style = new ol_style_Style({
image: new ol_style_Circle({
stroke: strokePoint,
radius: r,
declutterMode: 'none',
}),
zIndex: Infinity
})
style.newStyle = true
s.unshift(style);
} else {
if (points) {
ptsStyle.newStyle = true;
s.push(ptsStyle);
}
const style = new ol_style_Style({
stroke: stroke,
geometry: fromExtent( g.getExtent() ),
zIndex: Infinity
})
style.newStyle = true
s.unshift(style);
}
return s;
}
}
Expand Down

0 comments on commit 7422c42

Please sign in to comment.