iTowns · gchoqueux · Mar 27, 2019 · Feb 26, 2019 · Mar 12, 2019 · Mar 12, 2019
diff --git a/docs/config.json b/docs/config.json
@@ -52,6 +52,7 @@
             "src/Parser/B3dmParser.js",
             "src/Parser/BatchTableParser.js",
             "src/Parser/BatchTableHierarchyExtensionParser.js",
+            "src/Parser/ShapefileParser.js",
 
             "src/Renderer/OrientedImageMaterial.js",
             "src/Renderer/ColorLayersOrdering.js",

diff --git a/docs/navigation.json b/docs/navigation.json
@@ -54,7 +54,8 @@
         "CameraCalibrationParser",
         "B3dmParser",
         "BatchTableParser",
-        "BatchTableHierarchyExtensionParser"
+        "BatchTableHierarchyExtensionParser",
+        "ShapefileParser"
     ],
 
     "Converter": [

diff --git a/examples/index.html b/examples/index.html
@@ -200,5 +200,11 @@ <h3>Orientation utils planar</h3>
                 <img src='screenshots/orientation_utils_planar.jpg'>
             </a>
         </div>
+        <div class="exampleContainer">
+            <a href='./shapefile.html' target='_blank'>
+                <h3>Displaying shapefile as a color layer</h3>
+                <img src='screenshots/shapefile.jpg'>
+            </a>
+        </div>
     </body>
 </html>
diff --git a/examples/screenshots/shapefile.jpg b/examples/screenshots/shapefile.jpg
diff --git a/examples/shapefile.html b/examples/shapefile.html
@@ -0,0 +1,64 @@
+<html>
+    <head>
+        <title>Itowns - Displaying Shapefile</title>
+        <meta charset="UTF-8">
+        <link rel="stylesheet" type="text/css" href="css/example.css">
+        <link rel="stylesheet" type="text/css" href="css/loading_screen.css">
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script src="js/GUI/dat.gui/dat.gui.min.js"></script>
+    </head>
+    <body>
+        <div id="viewerDiv"></div>
+        <script src="js/GUI/GuiTools.js"></script>
+        <script src="../dist/itowns.js"></script>
+        <script src="js/loading_screen.js"></script>
+        <script src="../dist/debug.js"></script>
+        <script type="text/javascript">
+            // Define initial camera position
+            var positionOnGlobe = { longitude: 2.351323, latitude: 48.856712, altitude: 25000 };
+            var miniView;
+            var minDistance = 10000000;
+            var maxDistance = 30000000;
+
+            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
+            var viewerDiv = document.getElementById('viewerDiv');
+            var miniDiv = document.getElementById('miniDiv');
+
+            // Instanciate iTowns GlobeView*
+            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
+            var menuGlobe = new GuiTools('menuDiv', view);
+            setupLoadingScreen(viewerDiv, view);
+
+            // Add one imagery layer to the scene
+            // This layer is defined in a json file but it could be defined as a plain js
+            // object. See Layer* for more info.
+            itowns.Fetcher.json('./layers/JSONLayers/OPENSM.json').then(function _(config) {
+                config.source = new itowns.TMSSource(config.source);
+                var layer = new itowns.ColorLayer('OPENSM', config);
+                view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
+            });
+
+            // Load all the necessary files for a shapefile, parse them and
+            // display them.
+            itowns.Fetcher.multiple('https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/shapefile/velib-disponibilite-en-temps-reel', {
+                arrayBuffer: ['shp', 'dbf', 'shx'],
+                text: ['prj'],
+            }).then(function _(res) {
+                return itowns.ShapefileParser.parse(res, {
+                    buildExtent: true,
+                    crsOut: view.tileLayer.extent.crs(),
+                });
+            }).then(function _(feature) {
+                var velibSource = new itowns.FileSource({
+                    parsedData: feature,
+                });
+
+                var velibLayer = new itowns.ColorLayer('velib', { source: velibSource });
+
+                view.addLayer(velibLayer);
+            });
+        </script>
+    </body>
+</html>
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "earcut": "^2.1.5",
     "js-priority-queue": "^0.1.5",
     "pbf": "^3.1.0",
+    "shpjs": "^3.4.3",
     "text-encoding-utf-8": "^1.0.2"
   },
   "peerDependencies": {

diff --git a/src/Converter/Feature2Texture.js b/src/Converter/Feature2Texture.js
@@ -1,4 +1,5 @@
 import * as THREE from 'three';
+import Coordinates from '../Core/Geographic/Coordinates';
 
 const pt = new THREE.Vector2();
 
@@ -65,27 +66,45 @@ function drawPoint(ctx, x, y, origin, scale, style = {}) {
     pt.multiply(scale);
 
     ctx.beginPath();
-    ctx.arc(Math.round(pt.x), Math.round(pt.y), Math.round(style.radius) || 3, 0, 2 * Math.PI, false);
+    ctx.arc(Math.round(pt.x), Math.round(pt.y), style.radius, 0, 2 * Math.PI, false);
     ctx.fillStyle = style.fill || 'white';
     ctx.fill();
     ctx.lineWidth = style.lineWidth || 1.0;
     ctx.strokeStyle = style.stroke || 'red';
     ctx.stroke();
 }
 
+const coord = new Coordinates('EPSG:4326', 0, 0, 0);
+
 function drawFeature(ctx, feature, origin, scale, extent, style = {}) {
+    const extentDim = extent.dimensions();
     let gStyle = style;
+    let px;
+
     for (const geometry of feature.geometry) {
         const properties = geometry.properties;
 
         if (typeof (style) == 'function') {
             gStyle = style(properties, feature);
         }
+
+        gStyle.radius = Math.round(gStyle.radius) || 3;
+
+        // cross multiplication to know in the extent system the real size of
+        // the point
+        px = gStyle.radius * (extentDim.x / 256);
+
         if (feature.type === 'point') {
-            drawPoint(ctx, feature.vertices[0], feature.vertices[1], origin, scale, gStyle);
+            coord.set(extent.crs(), feature.vertices[0], feature.vertices[1]);
+            if (extent.isPointInside(coord, px)) {
+                drawPoint(ctx, feature.vertices[0], feature.vertices[1], origin, scale, gStyle);
+            }
         } else if (feature.type === 'multipoint') {
             for (var i = 0; i < feature.vertices.length; i += feature.size) {
-                drawPoint(ctx, feature.vertices[i], feature.vertices[i + 1], origin, scale, gStyle);
+                coord.set(extent.crs(), feature.vertices[i], feature.vertices[i + 1]);
+                if (extent.isPointInside(coord, px)) {
+                    drawPoint(ctx, feature.vertices[i], feature.vertices[i + 1], origin, scale, gStyle);
+                }
             }
         } else if (geometry.extent.intersectsExtent(extent)) {
             drawPolygon(ctx, feature.vertices, geometry.indices, origin, scale, properties, gStyle, feature.size);
@@ -117,9 +136,9 @@ export default {
 
             const scale = new THREE.Vector2(ctx.canvas.width / dimension.x, ctx.canvas.width / dimension.y);
 
+            const ex = collection.crs == extent.crs() ? extent : extent.as(collection.crs);
             // Draw the canvas
             for (const feature of collection.features) {
-                const ex = feature.crs == extent.crs() ? extent : extent.as(feature.crs);
                 drawFeature(ctx, feature, origin, scale, ex, style);
             }
 
@@ -139,4 +158,3 @@ export default {
         return texture;
     },
 };
-
diff --git a/src/Core/Geographic/Extent.js b/src/Core/Geographic/Extent.js
@@ -247,22 +247,32 @@ Extent.prototype.center = function center(target) {
     return c;
 };
 
+/**
+ * Returns the dimension of the extent, in a <code>THREE.Vector2</code>.
+ *
+ * @param {THREE.Vector2} [target] - The target to assign the result in.
+ *
+ * @return {THREE.Vector2}
+ */
 Extent.prototype.dimensions = function dimensions(target) {
-    target = target || { x: 0, y: 0 };
+    target = target || new THREE.Vector2();
     target.x = Math.abs(this.east() - this.west());
     target.y = Math.abs(this.north() - this.south());
     return target;
 };
 
 /**
- * Return true if coord is inside the bounding box.
+ * Return true if <code>coord</code> is inside the bounding box.
  *
  * @param {Coordinates} coord
- * @param {number} epsilon coord is inside the extent (+/- epsilon)
+ * @param {number} [epsilon=0] - to take into account when comparing to the
+ * point.
+ *
  * @return {boolean}
  */
 Extent.prototype.isPointInside = function isPointInside(coord, epsilon = 0) {
     const c = (this.crs() == coord.crs) ? coord : coord.as(this.crs());
+
     // TODO this ignores altitude
     if (crsIsGeographic(this.crs())) {
         return c.longitude() <= this.east() + epsilon &&

diff --git a/src/Main.js b/src/Main.js
@@ -60,3 +60,4 @@ export { default as GeoJsonParser } from 'Parser/GeoJsonParser';
 export { default as KMLParser } from 'Parser/KMLParser';
 export { default as CameraCalibrationParser } from 'Parser/CameraCalibrationParser';
 export { default as BatchTableHierarchyExtensionParser } from 'Parser/BatchTableHierarchyExtensionParser';
+export { default as ShapefileParser } from 'Parser/ShapefileParser';