itowns
Version:
A JS/WebGL framework for 3D geospatial data visualization
337 lines (283 loc) • 11.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var THREE = _interopRequireWildcard(require("three"));
var _Feature = require("../Core/Feature");
var _Extent = _interopRequireDefault(require("../Core/Geographic/Extent"));
var _Coordinates = _interopRequireDefault(require("../Core/Geographic/Coordinates"));
var _extent = new _Extent["default"]('EPSG:4326', [0, 0, 0, 0]);
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var matrix = svg.createSVGMatrix();
function drawPolygon(ctx, vertices) {
var indices = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [{
offset: 0,
count: 1
}];
var style = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
var size = arguments.length > 4 ? arguments[4] : undefined;
var extent = arguments.length > 5 ? arguments[5] : undefined;
var invCtxScale = arguments.length > 6 ? arguments[6] : undefined;
var canBeFilled = arguments.length > 7 ? arguments[7] : undefined;
if (vertices.length === 0) {
return;
}
if (style.length) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = style[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var s = _step.value;
_drawPolygon(ctx, vertices, indices, s, size, extent, invCtxScale, canBeFilled);
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator["return"] != null) {
_iterator["return"]();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
} else {
_drawPolygon(ctx, vertices, indices, style, size, extent, invCtxScale, canBeFilled);
}
}
function _drawPolygon(ctx, vertices, indices, style, size, extent, invCtxScale, canBeFilled) {
// build contour
ctx.beginPath();
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = indices[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var indice = _step2.value;
if (indice.extent && indice.extent.intersectsExtent(extent)) {
var offset = indice.offset * size;
var count = offset + indice.count * size;
ctx.moveTo(vertices[offset], vertices[offset + 1]);
for (var j = offset + size; j < count; j += size) {
ctx.lineTo(vertices[j], vertices[j + 1]);
}
}
} // draw line or edge of polygon
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2["return"] != null) {
_iterator2["return"]();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
if (style.stroke.color) {
strokeStyle(style, ctx, invCtxScale);
ctx.stroke();
} // fill polygon only
if (canBeFilled && (style.fill.color || style.fill.pattern)) {
fillStyle(style, ctx, invCtxScale);
ctx.fill();
}
}
function fillStyle(style, ctx, invCtxScale) {
if (style.fill.pattern && ctx.fillStyle.src !== style.fill.pattern.src) {
ctx.fillStyle = ctx.createPattern(style.fill.pattern, 'repeat');
if (ctx.fillStyle.setTransform) {
ctx.fillStyle.setTransform(matrix.scale(invCtxScale));
} else {
console.warn('Raster pattern isn\'t completely supported on Ie and edge');
}
} else if (style.fill.color && ctx.fillStyle !== style.fill.color) {
ctx.fillStyle = style.fill.color;
}
if (style.fill.opacity !== ctx.globalAlpha) {
ctx.globalAlpha = style.fill.opacity;
}
}
function strokeStyle(style, ctx, invCtxScale) {
if (ctx.strokeStyle !== style.stroke.color) {
ctx.strokeStyle = style.stroke.color;
}
var width = (style.stroke.width || 2.0) * invCtxScale;
if (ctx.lineWidth !== width) {
ctx.lineWidth = width;
}
var alpha = style.stroke.opacity == undefined ? 1.0 : style.stroke.opacity;
if (alpha !== ctx.globalAlpha && typeof alpha == 'number') {
ctx.globalAlpha = alpha;
}
if (ctx.lineCap !== style.stroke.lineCap) {
ctx.lineCap = style.stroke.lineCap;
}
ctx.setLineDash(style.stroke.dasharray.map(function (a) {
return a * invCtxScale * 2;
}));
}
function drawPoint(ctx, x, y) {
var style = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
var invCtxScale = arguments.length > 4 ? arguments[4] : undefined;
ctx.beginPath();
var opacity = style.point.opacity == undefined ? 1.0 : style.point.opacity;
if (opacity !== ctx.globalAlpha) {
ctx.globalAlpha = opacity;
}
ctx.arc(x, y, (style.point.radius || 3.0) * invCtxScale, 0, 2 * Math.PI, false);
if (style.point.color) {
ctx.fillStyle = style.point.color;
ctx.fill();
}
if (style.point.line) {
ctx.lineWidth = (style.point.width || 1.0) * invCtxScale;
ctx.strokeStyle = style.point.line;
ctx.stroke();
}
}
var coord = new _Coordinates["default"]('EPSG:4326', 0, 0, 0);
function drawFeature(ctx, feature, extent, style, invCtxScale) {
var extentDim = extent.dimensions();
var scaleRadius = extentDim.x / ctx.canvas.width;
var _iteratorNormalCompletion3 = true;
var _didIteratorError3 = false;
var _iteratorError3 = undefined;
try {
for (var _iterator3 = feature.geometry[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
var geometry = _step3.value;
if (geometry.extent.intersectsExtent(extent)) {
var geoStyle = style.isStyle ? style : geometry.properties.style;
if (feature.type === _Feature.FEATURE_TYPES.POINT) {
// cross multiplication to know in the extent system the real size of
// the point
var px = (Math.round(geoStyle.point.radius * invCtxScale) || 3 * invCtxScale) * scaleRadius;
var _iteratorNormalCompletion4 = true;
var _didIteratorError4 = false;
var _iteratorError4 = undefined;
try {
for (var _iterator4 = geometry.indices[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
var indice = _step4.value;
var offset = indice.offset * feature.size;
var count = offset + indice.count * feature.size;
for (var j = offset; j < count; j += feature.size) {
coord.setFromArray(feature.vertices, j);
if (extent.isPointInside(coord, px)) {
drawPoint(ctx, feature.vertices[j], feature.vertices[j + 1], geoStyle, invCtxScale);
}
}
}
} catch (err) {
_didIteratorError4 = true;
_iteratorError4 = err;
} finally {
try {
if (!_iteratorNormalCompletion4 && _iterator4["return"] != null) {
_iterator4["return"]();
}
} finally {
if (_didIteratorError4) {
throw _iteratorError4;
}
}
}
} else {
drawPolygon(ctx, feature.vertices, geometry.indices, geoStyle, feature.size, extent, invCtxScale, feature.type == _Feature.FEATURE_TYPES.POLYGON);
}
}
}
} catch (err) {
_didIteratorError3 = true;
_iteratorError3 = err;
} finally {
try {
if (!_iteratorNormalCompletion3 && _iterator3["return"] != null) {
_iterator3["return"]();
}
} finally {
if (_didIteratorError3) {
throw _iteratorError3;
}
}
}
}
var origin = new THREE.Vector2();
var dimension = new THREE.Vector2();
var scale = new THREE.Vector2();
var extentTransformed = new _Extent["default"]('EPSG:4326', 0, 0, 0, 0);
var _default = {
// backgroundColor is a THREE.Color to specify a color to fill the texture
// with, given there is no feature passed in parameter
createTextureFromFeature: function createTextureFromFeature(collection, extent, sizeTexture, style, backgroundColor) {
var texture;
if (collection) {
// A texture is instancied drawn canvas
// origin and dimension are used to transform the feature's coordinates to canvas's space
extent.dimensions(dimension);
var c = document.createElement('canvas');
coord.crs = extent.crs;
c.width = sizeTexture;
c.height = sizeTexture;
var ctx = c.getContext('2d');
if (backgroundColor) {
ctx.fillStyle = backgroundColor.getStyle();
ctx.fillRect(0, 0, sizeTexture, sizeTexture);
}
ctx.globalCompositeOperation = style.globalCompositeOperation || 'source-over';
ctx.imageSmoothingEnabled = false;
ctx.lineJoin = 'round';
var ex = collection.crs == extent.crs ? extent : extent.as(collection.crs, _extent);
var t = collection.translation;
var s = collection.scale;
extentTransformed.transformedCopy(t, s, ex);
scale.set(ctx.canvas.width, ctx.canvas.width).divide(dimension);
origin.set(extent.west, extent.south).add(t).multiply(scale).negate();
ctx.setTransform(scale.x / s.x, 0, 0, scale.y / s.y, origin.x, origin.y); // to scale line width and radius circle
var invCtxScale = s.x / scale.x; // Draw the canvas
var _iteratorNormalCompletion5 = true;
var _didIteratorError5 = false;
var _iteratorError5 = undefined;
try {
for (var _iterator5 = collection.features[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
var feature = _step5.value;
drawFeature(ctx, feature, extentTransformed, feature.style || style, invCtxScale);
}
} catch (err) {
_didIteratorError5 = true;
_iteratorError5 = err;
} finally {
try {
if (!_iteratorNormalCompletion5 && _iterator5["return"] != null) {
_iterator5["return"]();
}
} finally {
if (_didIteratorError5) {
throw _iteratorError5;
}
}
}
texture = new THREE.CanvasTexture(c);
texture.flipY = false;
} else if (backgroundColor) {
var data = new Uint8Array(3);
data[0] = backgroundColor.r * 255;
data[1] = backgroundColor.g * 255;
data[2] = backgroundColor.b * 255;
texture = new THREE.DataTexture(data, 1, 1, THREE.RGBFormat);
} else {
texture = new THREE.Texture();
}
return texture;
}
};
exports["default"] = _default;