diff --git a/Carte.js b/Carte.js index b60e736..d2d56a8 100644 --- a/Carte.js +++ b/Carte.js @@ -789,18 +789,18 @@ Carte.prototype.getFeaturesPopupContent = function(feat, getAllFeaturesContent = } /** Show a multi popup for an array of features - * @param {Array} feat array of features + * @param {Array} 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} 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) { @@ -815,6 +815,7 @@ 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(); } @@ -822,19 +823,19 @@ Carte.prototype.showPopupFeatures = function(feat, popup, coord, geom) { 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 { diff --git a/style/ignStyleFn.js b/style/ignStyleFn.js index cb8d70c..63e1129 100644 --- a/style/ignStyleFn.js +++ b/style/ignStyleFn.js @@ -931,25 +931,25 @@ 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, @@ -957,23 +957,17 @@ function getSelectStyleFn(options) { 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, @@ -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': @@ -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()); @@ -1005,7 +999,6 @@ function getSelectStyleFn(options) { } s.push(si); }); - s.push(fillStyle); if (points) s.push(ptsStyle); return s; } @@ -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, @@ -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, @@ -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': { @@ -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; } }