-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #31 from eurostat/development
Development
- Loading branch information
Showing
25 changed files
with
2,151 additions
and
1,367 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,190 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>JSDoc: Source: layers/geojsonLayer.js</title> | ||
|
||
<script src="scripts/prettify/prettify.js"> </script> | ||
<script src="scripts/prettify/lang-css.js"> </script> | ||
<!--[if lt IE 9]> | ||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> | ||
<![endif]--> | ||
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> | ||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> | ||
</head> | ||
|
||
<body> | ||
|
||
<div id="main"> | ||
|
||
<h1 class="page-title">Source: layers/geojsonLayer.js</h1> | ||
|
||
|
||
|
||
|
||
|
||
|
||
<section> | ||
<article> | ||
<pre class="prettyprint source linenums"><code>// logic for adding geojson features to the gridviz viewer | ||
|
||
import { Color, Group } from "three"; | ||
|
||
import { Line2 } from "../../lib/threejs/lines/Line2"; | ||
import { LineGeometry } from "../../lib/threejs/lines/LineGeometry"; | ||
import { LineMaterial } from "../../lib/threejs/lines/LineMaterial"; | ||
|
||
import * as THREE from "three/src/constants"; | ||
|
||
let lineMaterial; // linematerial used for threejs webgl lines | ||
|
||
/** | ||
* | ||
* @description Add geojson features to three.js scene. Currently accepts polygon, multipolygon or linestring | ||
* @param {Array} features Geojson feature array | ||
* @param {Object} viewer gridviz viewer | ||
* @function addGeoJsonToScene | ||
*/ | ||
let layerZ = 1; | ||
export function addGeoJsonToScene(features, viewer) { | ||
layerZ = layerZ + 0.002; // increment draw order so that latest geojson is added on top of the rest. | ||
let geojsonGroup = new Group(); | ||
geojsonGroup.renderOrder = 999; //always on top of grid | ||
// GEOJSON to ThreeJS | ||
for (let i = 0; i < features.length; i++) { | ||
let feature = features[i]; | ||
let coords = []; | ||
for (let c = 0; c < feature.geometry.coordinates.length; c++) { | ||
if (feature.geometry.type == "Polygon") { | ||
let coords = []; | ||
for (let s = 0; s < feature.geometry.coordinates[c].length; s++) { | ||
let xyz; | ||
if (viewer.zerosRemoved_) { | ||
let d = Number('1E' + viewer.zerosRemoved_); | ||
xyz = { | ||
x: feature.geometry.coordinates[c][s][0] / d, | ||
y: feature.geometry.coordinates[c][s][1] / d, | ||
z: layerZ | ||
}; | ||
} else { | ||
xyz = { | ||
x: feature.geometry.coordinates[c][s][0], | ||
y: feature.geometry.coordinates[c][s][1], | ||
z: layerZ | ||
}; | ||
} | ||
|
||
coords.push(xyz); | ||
} | ||
if (coords.length > 0) { | ||
geojsonGroup.add(createLineFromCoords(coords, viewer.lineColor_, viewer.lineWidth_)); | ||
} | ||
|
||
} else if (feature.geometry.type == "MultiPolygon") { | ||
for (let s = 0; s < feature.geometry.coordinates[c].length; s++) { | ||
//each polygon in multipolygon: | ||
let coords = []; | ||
for ( | ||
let m = 0; | ||
m < feature.geometry.coordinates[c][s].length; | ||
m++ | ||
) { | ||
let xyz; | ||
if (viewer.zerosRemoved_) { | ||
let d = Number('1E' + viewer.zerosRemoved_); | ||
xyz = { | ||
x: feature.geometry.coordinates[c][s][m][0] / d, | ||
y: feature.geometry.coordinates[c][s][m][1] / d, | ||
z: layerZ | ||
}; | ||
} else { | ||
xyz = { | ||
x: feature.geometry.coordinates[c][s][m][0], | ||
y: feature.geometry.coordinates[c][s][m][1], | ||
z: layerZ | ||
}; | ||
} | ||
coords.push(xyz); | ||
} | ||
if (coords.length > 0) { | ||
geojsonGroup.add(createLineFromCoords(coords, viewer.lineColor_, viewer.lineWidth_)); | ||
} | ||
} | ||
} else if (feature.geometry.type == "LineString") { | ||
let xyz; | ||
if (viewer.zerosRemoved_) { | ||
let d = Number('1E' + viewer.zerosRemoved_); | ||
xyz = { | ||
x: feature.geometry.coordinates[c][0] / d, | ||
y: feature.geometry.coordinates[c][1] / d, | ||
z: layerZ | ||
}; | ||
} else { | ||
xyz = { | ||
x: feature.geometry.coordinates[c][0], | ||
y: feature.geometry.coordinates[c][1], | ||
z: layerZ | ||
}; | ||
} | ||
coords.push(xyz); | ||
} | ||
} | ||
if (feature.geometry.type = "LineString") { | ||
if (coords.length > 0) { | ||
geojsonGroup.add(createLineFromCoords(coords, viewer.lineColor_, viewer.lineWidth_)); | ||
} | ||
} | ||
} | ||
viewer.scene.add(geojsonGroup); | ||
} | ||
|
||
/** | ||
* @description Build threejs line geometry from world coordinates | ||
* @function createLineFromCoords | ||
* @param coords {Array} array of coord objects with values x,y,z | ||
* @param lineColor {String | Number} accepted color value for geojson lines | ||
* @param lineWidth {Number} Geojson line width. Default: 0.0012 | ||
* @returns {Line2} | ||
*/ | ||
function createLineFromCoords(coords, lineColor, lineWidth) { | ||
let line_geom = new LineGeometry(); | ||
let positions = []; | ||
let colors = []; | ||
let color = new Color(lineColor); | ||
for (var i = 0; i < coords.length; i++) { | ||
positions.push(coords[i].x, coords[i].y, layerZ); | ||
colors.push(color.r, color.g, color.b); | ||
} | ||
line_geom.setPositions(positions); | ||
line_geom.setColors(colors); | ||
if (!lineMaterial) { | ||
lineMaterial = new LineMaterial({ | ||
linewidth: lineWidth, | ||
vertexColors: THREE.VertexColors | ||
}); | ||
} | ||
//line2 allows custom linewidth (but not currently included in main threejs build) | ||
return new Line2(line_geom, lineMaterial); | ||
}</code></pre> | ||
</article> | ||
</section> | ||
|
||
|
||
|
||
|
||
</div> | ||
|
||
<nav> | ||
<h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#addButtonEvents">addButtonEvents</a></li><li><a href="global.html#addCellCountToDOM">addCellCountToDOM</a></li><li><a href="global.html#addChangeEventToSizeFieldDropdown">addChangeEventToSizeFieldDropdown</a></li><li><a href="global.html#addEventListeners">addEventListeners</a></li><li><a href="global.html#addGeoJson">addGeoJson</a></li><li><a href="global.html#addGeoJsonToScene">addGeoJsonToScene</a></li><li><a href="global.html#addHeadingsContainerToDOM">addHeadingsContainerToDOM</a></li><li><a href="global.html#addHomeButtonToDOM">addHomeButtonToDOM</a></li><li><a href="global.html#addMouseEventsToView">addMouseEventsToView</a></li><li><a href="global.html#addNuts2jsonToScene">addNuts2jsonToScene</a></li><li><a href="global.html#addPanAndZoom">addPanAndZoom</a></li><li><a href="global.html#addPointsToScene">addPointsToScene</a></li><li><a href="global.html#addResizeEvent">addResizeEvent</a></li><li><a href="global.html#addSelectorsContainerToDOM">addSelectorsContainerToDOM</a></li><li><a href="global.html#addSourcesToDOM">addSourcesToDOM</a></li><li><a href="global.html#addSubtitleToDOM">addSubtitleToDOM</a></li><li><a href="global.html#addTitleToDOM">addTitleToDOM</a></li><li><a href="global.html#animate">animate</a></li><li><a href="global.html#build">build</a></li><li><a href="global.html#createCamera">createCamera</a></li><li><a href="global.html#createColorSchemeDropdown">createColorSchemeDropdown</a></li><li><a href="global.html#createLabelRenderer">createLabelRenderer</a></li><li><a href="global.html#createLineFromCoords">createLineFromCoords</a></li><li><a href="global.html#createRaycaster">createRaycaster</a></li><li><a href="global.html#createScene">createScene</a></li><li><a href="global.html#createTooltipContainer">createTooltipContainer</a></li><li><a href="global.html#createWebGLRenderer">createWebGLRenderer</a></li><li><a href="global.html#defineColorScale">defineColorScale</a></li><li><a href="global.html#defineFar">defineFar</a></li><li><a href="global.html#defineGridConfig">defineGridConfig</a></li><li><a href="global.html#defineNear">defineNear</a></li><li><a href="global.html#definePointSize">definePointSize</a></li><li><a href="global.html#defineRaycasterThreshold">defineRaycasterThreshold</a></li><li><a href="global.html#defineSizeScale">defineSizeScale</a></li><li><a href="global.html#fragmentShader">fragmentShader</a></li><li><a href="global.html#loadGrid">loadGrid</a></li><li><a href="global.html#loadNuts2json">loadNuts2json</a></li><li><a href="global.html#redefineCamera">redefineCamera</a></li><li><a href="global.html#requestGrid">requestGrid</a></li><li><a href="global.html#setCamera">setCamera</a></li><li><a href="global.html#updateColorScaleFunction">updateColorScaleFunction</a></li><li><a href="global.html#updatePointsColors">updatePointsColors</a></li><li><a href="global.html#updatePointsSizes">updatePointsSizes</a></li><li><a href="global.html#updateTooltip">updateTooltip</a></li><li><a href="global.html#validateInputs">validateInputs</a></li><li><a href="global.html#vertexShader">vertexShader</a></li><li><a href="global.html#viewer">viewer</a></li><li><a href="global.html#viewWholeGrid">viewWholeGrid</a></li><li><a href="global.html#zoom">zoom</a></li></ul> | ||
</nav> | ||
|
||
<br class="clear"> | ||
|
||
<footer> | ||
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.6</a> on Wed Dec 09 2020 16:42:27 GMT+0100 (Central European Standard Time) | ||
</footer> | ||
|
||
<script> prettyPrint(); </script> | ||
<script src="scripts/linenumber.js"> </script> | ||
</body> | ||
</html> |
Oops, something went wrong.