Merge pull request #361 from OpenSPP/improve-base-gis

improved base GIS by adding image raster layer; fixed issue when ther…

Author: gonzalesedwin1123

spp_base_gis/models/raster_layer.py

@@ -8,6 +8,7 @@ class OpenSPPGisRasterLayer(models.Model):
     RASTER_TYPE_CHOICES = [
         ("d_wms", "Distant WMS"),
         ("osm", "OpenStreetMap"),
+        ("image", "Image"),
     ]
 
     RASTER_STYLE_CHOICES = [
@@ -58,12 +59,12 @@ class OpenSPPGisRasterLayer(models.Model):
         required=True,
     )
     name = fields.Char("Layer Name", translate=True, required=True)
-    url = fields.Char("Service URL")
 
     # technical field to display or not wms options
     is_wms = fields.Boolean(compute="_compute_is_wms")
 
     # wms options
+    url = fields.Char("Service URL")
     wms_layer_name = fields.Char("WMS Layer Name")
     opacity = fields.Float(default=1.0)
 
@@ -72,12 +73,21 @@ class OpenSPPGisRasterLayer(models.Model):
         RASTER_STYLE_CHOICES,
         default="streets",
     )
+    visible_on_load = fields.Boolean("Is visible on load?", default=True)
+
+    # image options
+    image_url = fields.Char()
+    image_opacity = fields.Float(default=1.0)
+    x_min = fields.Float(digits=(3, 15))
+    x_max = fields.Float(digits=(3, 15))
+    y_min = fields.Float(digits=(3, 15))
+    y_max = fields.Float(digits=(3, 15))
+
     view_id = fields.Many2one("ir.ui.view", "Related View", domain=[("type", "=", "gis")], required=True)
 
     type_id = fields.Many2one("spp.gis.raster.layer.type", "Layer", domain="[('service', '=', raster_type)]")
     type = fields.Char(related="type_id.code")
     sequence = fields.Integer("Layer priority", default=6)
-    visible_on_load = fields.Boolean("Is visible on load?", default=True)
 
     @api.depends("raster_type")
     def _compute_is_wms(self):

spp_base_gis/static/src/js/views/gis/gis_renderer/gis_renderer.esm.js

@@ -134,6 +134,11 @@ export class GisRenderer extends Component {
                 this.createWMSRasterSource(rasterLayerSourceId, layer);
                 this.createWMSRasterLayer(rasterLayerSourceId, layer);
             }
+            if (layer.raster_type === "image") {
+                const sourceId = `image_${layer.id}`;
+                this.createImageRasterSource(sourceId, layer);
+                this.createImageRasterLayer(sourceId, layer);
+            }
             if (layer.raster_type === "osm" && layer.isVisible) {
                 this.defaultRaster = layer;
             }
@@ -261,6 +266,38 @@ export class GisRenderer extends Component {
         });
     }
 
+    createImageRasterSource(sourceId, layer) {
+        this.sources.push([
+            sourceId,
+            {
+                type: "image",
+                url: layer.image_url,
+                coordinates: [
+                    [layer.x_min, layer.y_max], // Top-left
+                    [layer.x_max, layer.y_max], // Top-right
+                    [layer.x_max, layer.y_min], // Bottom-right
+                    [layer.x_min, layer.y_min], // Bottom-left
+                ],
+            },
+        ]);
+    }
+
+    createImageRasterLayer(sourceId, layer) {
+        const opacity = Math.min(1, Math.max(0, layer.image_opacity));
+
+        this.layers.push({
+            type: "raster",
+            id: sourceId,
+            source: sourceId,
+            paint: {
+                "raster-opacity": opacity,
+            },
+            layout: {
+                visibility: layer.isVisible ? "visible" : "none",
+            },
+        });
+    }
+
     createDefaultDataSource(features) {
         this.sources.push([
             this.sourceId,
@@ -437,6 +474,25 @@ export class GisRenderer extends Component {
 
                 this.map.setLayoutProperty(rasterLayerSourceId, "visibility", visibility);
                 this.map.setPaintProperty(rasterLayerSourceId, "raster-opacity", opacity);
+            } else if (layer.raster_type === "image") {
+                const sourceId = `image_${layer.id}`;
+                const visibility = layer.isVisible ? "visible" : "none";
+                const opacity = Math.min(1, Math.max(0, layer.image_opacity));
+
+                const source = this.map.getSource(sourceId);
+                if (source) {
+                    source.updateImage({
+                        url: layer.image_url,
+                        coordinates: [
+                            [layer.x_min, layer.y_max], // Top-left
+                            [layer.x_max, layer.y_max], // Top-right
+                            [layer.x_max, layer.y_min], // Bottom-right
+                            [layer.x_min, layer.y_min], // Bottom-left
+                        ],
+                    });
+                    this.map.setLayoutProperty(sourceId, "visibility", visibility);
+                    this.map.setPaintProperty(sourceId, "raster-opacity", opacity);
+                }
             } else if (layer.raster_type === "osm" && layer.isVisible) {
                 this.map.setStyle(this.getMapStyle(layer));
             }

spp_base_gis/static/src/js/views/gis/layers_panel/layers_panel.esm.js

@@ -61,7 +61,7 @@ export class LayersPanel extends Component {
 
     async loadLayers() {
         try {
-            const result = await this.orm.call(this.props.model, "get_gis_layers", []);
+            const result = await this.orm.call(this.props.model, "get_gis_layers", [this.env.config.viewId]);
             this.state.gisLayers = result;
         } catch (error) {
             console.error("Error loading layers:", error);

spp_base_gis/views/raster_layer_view.xml

@@ -23,6 +23,14 @@
                         <field name="raster_style" required="raster_type == 'osm'" />
                         <field name="visible_on_load" />
                     </group>
+                    <group string="Image options" invisible="raster_type != 'image'" colspan="4">
+                        <field name="image_url" required="raster_type == 'image'" />
+                        <field name="image_opacity" required="raster_type == 'image'" />
+                        <field name="x_min" required="raster_type == 'image'" />
+                        <field name="x_max" required="raster_type == 'image'" />
+                        <field name="y_min" required="raster_type == 'image'" />
+                        <field name="y_max" required="raster_type == 'image'" />
+                    </group>
                 </sheet>
             </form>
         </field>