[sedona] branch master updated: [SEDONA-264] zeppelin helium plugin supports drawing geometry like linestring, polygon (#801)

[ji...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

jiayu pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/sedona.git


The following commit(s) were added to refs/heads/master by this push:
     new 0bcfa656 [SEDONA-264] zeppelin helium plugin supports drawing geometry like linestring, polygon (#801)
0bcfa656 is described below

commit 0bcfa656205153933385b66b4b27c61bbaff7fad
Author: the-sea <hu...@huawei.com>
AuthorDate: Sat Mar 18 15:32:57 2023 +0800

    [SEDONA-264] zeppelin helium plugin supports drawing geometry like linestring, polygon (#801)
---
 zeppelin/index.js | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/zeppelin/index.js b/zeppelin/index.js
index 0de3c87a..9776ba47 100644
--- a/zeppelin/index.js
+++ b/zeppelin/index.js
@@ -57,7 +57,7 @@ export default class LeafletMap extends Visualization {
 		];
 
 		this.transformation = new ColumnselectorTransformation(config, columnSpec);
-		this.chartInstance = L.map(this.getChartElementId());
+		this.chartInstance = this.createMap();
 	}
 
 	getTransformation() {
@@ -68,11 +68,16 @@ export default class LeafletMap extends Visualization {
 		super.setConfig(config);
 		this.transformation.setConfig(config);
 		if (!this.chartInstance) {
-			this.chartInstance = L.map(this.getChartElementId());
+			this.chartInstance = this.createMap();
 		}
 		return this.chartInstance;
 	};
 
+	createMap() {
+	    // using canvas renderer to support drawing geometry like LineString, Polygon etc.
+	    return L.map(this.getChartElementId(), {renderer: L.canvas()});
+	}
+
 	getChartElementId() {
 		return this.targetEl[0].id
 	};
@@ -109,21 +114,33 @@ export default class LeafletMap extends Visualization {
 		map.invalidateSize(true)
 
 		var imageBounds = null
-		const markers = chartDataModel.rows.map(
+		const markers = chartDataModel.rows.flatMap(
 				row => {
 					const {image, boundary, info} = row;
+					var markers = [];
+
 					// throw new Error(image);
 					var jsts = require("jsts");
 					// Read WKT string from Sedona
 					var reader = new jsts.io.WKTReader();
-					var obj = reader.read(boundary)
+					var obj = reader.read(boundary);
 					// Collect the centroid point of the input geometry
 					var centroid = obj.getCentroid()
 					var marker = L.marker([centroid.getY(), centroid.getX()]);
 					const mapMarker = marker.addTo(map);
+					markers.push(marker);
+
+					if (obj.getGeometryType() !== 'Point') {
+					    var writer = new jsts.io.GeoJSONWriter();
+					    var geojson = writer.write(obj);
+					    marker = L.geoJSON(geojson);
+					    marker.addTo(map);
+					    markers.push(marker);
+					}
+
 					// Attach the marker information if exists
 					if(info){
-						mapMarker.bindTooltip(info)
+						mapMarker.bindTooltip(info);
 					}
 					// Overlay the generated image over the tile layer
 					if (image) {
@@ -133,7 +150,7 @@ export default class LeafletMap extends Visualization {
 						var imageUrl = 'data:image/png;base64,' + image;
 						L.imageOverlay(imageUrl, imageBounds).addTo(map);
 					}
-					return marker
+					return markers;
 			}
 		);
 		// Adjust the location of the viewport