Skip to content

Commit

Permalink
Merge pull request #431 from guadaltel/develop
Browse files Browse the repository at this point in the history 
20230626 - v6.4.0
  • Loading branch information
@fbma
fbma authored Jun 26, 2023
2 parents 1b52afb + f2d570b commit 70d9a9e
Show file tree
Hide file tree
Showing 8 changed files with 395 additions and 193 deletions.
4 changes: 0 additions & 4 deletions mapea-js/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,6 @@
"url": "https://github.com/sigcorporativo-ja/Mapea4/issues"
},
"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/plugin-proposal-export-default-from": "^7.0.0-beta.51",
"@babel/preset-env": "^7.4.4",
"babel-loader": "^8.0.0-beta.4",
"chromedriver": "^2.46.0",
"copy-webpack-plugin": "^6.1.0",
"cross-env": "^5.2.0",
Expand Down
161 changes: 106 additions & 55 deletions mapea-js/src/impl/ol/style/Generic.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* @module M/impl/style/Generic
*/
import { isFunction, isUndefined, isDynamic, drawDynamicStyle } from 'M/util/Utils';
import { isFunction, isUndefined, isDynamic, drawDynamicStyle, concatUrlPaths, addParameters, getImageSize } from 'M/util/Utils';
import OLFeature from 'ol/Feature';
import RenderFeature from 'ol/render/Feature';
import OLStyleIcon from 'ol/style/Icon';
Expand Down Expand Up @@ -54,40 +54,14 @@ class Generic extends Simple {
* @api
*/
toImage() {
const imgSize = 30;
const imgSizeWidth = 30;
const imgSizeHeight = 10;
let loadImagePoint = null;
let loadImagePoly = null;
let loadImageLine = null;
const dinamic = drawDynamicStyle();
const promises = [];

// Point image
if (!isUndefined(this.options_.point)) {
loadImagePoint = d =>
new Promise((resolve, reject) => {
const img = new Image();

// onload / onerror
img.onload = () => resolve(img);
img.onerror = reject;

// img
img.width = imgSize;
img.height = imgSize;

if (isDynamic(this.options_.point) === true) {
img.src = d;
} else {
const getterPoint = GETTER_BY_GEOM.Point;
const stylesPoint = getterPoint(this.options_, this, this.layer_);
stylesPoint[0].getImage().setRadius(5);
const imageURLPoint = stylesPoint[0].getImage().getImage(1).toDataURL();
img.src = imageURLPoint;
}
});
promises.push(loadImagePoint(dinamic));
}

// Polygon image
if (!isUndefined(this.options_.polygon)) {
loadImagePoly = d =>
Expand All @@ -102,32 +76,32 @@ class Generic extends Simple {

if (isDynamic(this.options_.polygon) === true) {
img.src = d;
img.width = imgSize;
img.height = imgSize;
img.width = imgSizeWidth;
img.height = imgSizeWidth;
} else {
const getterPolygon = GETTER_BY_GEOM.Polygon;
const stylesPolygon = getterPolygon(this.options_, this, this.layer_);
const canvasPO = document.createElement('canvas');
canvasPO.width = imgSize;
canvasPO.height = imgSize;
const ctxPO = canvasPO.getContext('2d');
const vectorContextPol = toContextRender(ctxPO);
const canvasPolygon = document.createElement('canvas');
canvasPolygon.width = 30;
canvasPolygon.height = 10;
const contextPolygon = canvasPolygon.getContext('2d');
const vectorContextPol = toContextRender(contextPolygon);
vectorContextPol.setStyle(stylesPolygon[0], 0, 0);
const canvasSize = [25, 15];
const canvasSize = [20, 7];
const maxW = Math.floor(canvasSize[0]);
const maxH = Math.floor(canvasSize[1]);
const minW = (canvasSize[0] - maxW);
const minH = (canvasSize[1] - maxH);
vectorContextPol.drawGeometry(new OLGeomPolygon([
[
[minW + 3, minH + 3],
[maxW - 3, minH + 3],
[maxW - 3, maxH - 3],
[minW + 3, maxH - 3],
[minW + 3, minH + 3],
[minW + 1, minH + 1],
[maxW - 1, minH + 1],
[maxW - 1, maxH - 1],
[minW + 1, maxH - 1],
[minW + 1, minH + 1],
],
]));
img.src = canvasPO.toDataURL();
img.src = canvasPolygon.toDataURL();
}
});
promises.push(loadImagePoly(dinamic));
Expand All @@ -151,14 +125,14 @@ class Generic extends Simple {
} else {
const getterLine = GETTER_BY_GEOM.LineString;
const stylesLine = getterLine(this.options_, this, this.layer_);
const canvasLI = document.createElement('canvas');
canvasLI.width = 30;
canvasLI.height = 30;
const ctxLI = canvasLI.getContext('2d');
const vectorContextLin = toContextRender(ctxLI);
const canvasLine = document.createElement('canvas');
canvasLine.width = 30;
canvasLine.height = 15;
const contextLine = canvasLine.getContext('2d');
const vectorContextLin = toContextRender(contextLine);
vectorContextLin.setStyle(stylesLine[0], 0, 0);
const x = 25;
const y = 15;
const x = 20;
const y = 10;
const stroke = isUndefined(stylesLine[0].getStroke()) ?
1.5 : stylesLine[0].getStroke().getWidth();
vectorContextLin.drawGeometry(new OLGeomLineString([
Expand All @@ -167,25 +141,102 @@ class Generic extends Simple {
[(2 * x) / 3, 0 + (stroke / 2)],
[x - (stroke / 2), (y / 2) - (stroke / 2)],
]));
img.src = canvasLI.toDataURL();
img.src = canvasLine.toDataURL();
}
});
promises.push(loadImageLine(dinamic));
}


// Point image
if (!isUndefined(this.options_.point)) {
loadImagePoint = d =>
new Promise((resolve, reject) => {
const img = new Image();
if (this.options_.point.icon) {
if (this.options_.point.icon.src) {
if (!this.options_.point.icon.src.startsWith(window.location.origin)) {
getImageSize(this.options_.point.icon.src).then((imgx) => {
img.onload = () => resolve(img);
img.onerror = reject;
const proxyImageURL = concatUrlPaths([M.config.PROXY_URL, '/image']);
img.crossOrigin = 'anonymous';
img.src = addParameters(proxyImageURL, {
url: this.options_.point.icon.src,
});
img.width = imgSizeWidth;
img.height = imgSizeWidth;
const calc1 = (imgSizeWidth / (imgx.width / imgx.height));
img.height =
imgx.width > imgx.height ? calc1 : img.height;
img.width =
imgx.height > imgx.width ? (imgSizeWidth / (imgx.height / imgx.width))
: img.width;
});
} else {
img.src = this.options_.point.icon.src;
}
} else if (this.options_.point.icon.form) { // es un FORM
img.onload = () => resolve(img);
img.width = imgSizeWidth;
img.height = imgSizeWidth;
const getterPoint = GETTER_BY_GEOM.Point;
const stylesPoint = getterPoint(this.options_, this, this.layer_);
const imageFormPoint = stylesPoint[1].getImage().getImage(1);
if (imageFormPoint != null && imageFormPoint) {
img.src = imageFormPoint.toDataURL();
}
}
} else {
// onload / onerror
img.onload = () => resolve(img);
img.onerror = reject;

// img
img.width = imgSizeHeight;
img.height = imgSizeHeight;

if (isDynamic(this.options_.point) === true) {
img.src = d;
} else {
const getterPoint = GETTER_BY_GEOM.Point;
const stylesPoint = getterPoint(this.options_, this, this.layer_);
stylesPoint[0].getImage().setRadius(5);
const imageURLPoint = stylesPoint[0].getImage().getImage(1).toDataURL();
img.src = imageURLPoint;
}
}
});
promises.push(loadImagePoint(dinamic));
}

// Canvas / Context
const canvasGL = document.createElement('canvas');
canvasGL.width = 200;
canvasGL.height = 50;
canvasGL.height = 20;
const ctxGL = canvasGL.getContext('2d');

const positions = [0, 60, 120];
const positions = [0, 35, 70];
let cont = 0;

// Loading images
return Promise.all(promises).then((values) => {
const lngt = values.length;
if (lngt === 1) {
canvasGL.width = 35;
} else if (lngt === 2) {
canvasGL.width = 70;
} else {
canvasGL.width = 100;
}
let height = 0;
values.forEach((image) => {
if (image.height > height) {
height = image.height;
}
});
canvasGL.height = height;
values.forEach((image) => {
ctxGL.drawImage(image, positions[cont], 0);
ctxGL.drawImage(image, positions[cont], 0, image.width, image.height);
cont += 1;
});
return canvasGL.toDataURL();
Expand Down
40 changes: 40 additions & 0 deletions mapea-js/test/development/style-category-generic.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="mapea" content="yes">

<title>PRUEBA DESARROLLO</title>
<style rel="stylesheet">
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: auto;
}

.makidentist:before {
content: '\e814';
color: 'red'
}
</style>

</head>

<body>
<button id="categoria" onclick="setStyleCat()">
Categoría
</button>
<button id="cluster" onclick="setStyleCluster()">
Cluster
</button>
<div id="map" class="map"></div>
<script src="/config.js" charset="utf-8"></script>
<script src="/style-category-generic.js" charset="utf-8"></script>
</body>

</html>
Loading

0 comments on commit 70d9a9e

Please sign in to comment.