Skip to main content

Serviços de dados

1. Introdução

Esta página reúne informação básica de como integrar os CDG disponibilizados através de serviços de dados disponibilizados em sistemasaplicações de informaçãoanálise geográfica (SIG).geoespacial.

2. ServiçosSistemas de dadosinformação geográfica

2.1. Web Map Service (WMS)

2.2. Web Feature Service (WFS)

2.3. OGC API Features (OAPIF) 

3. Páginas web

  • Construir uma página web para visualização do serviço de dados num mapa.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buoys Datawell Map with Dynamic Marker Colors</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            height: 100%;
        }
        #map {
            height: 100vh;
        }
        .loading {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.7);
            padding: 5px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="loading">Loading data...</div>
    <div id="map"></div>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        const map = L.map('map').setView([39.0, -9.0], 6); // Center the map over the Iberian Peninsula

        // Add a tile layer (e.g., OpenStreetMap)
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        const url = 'https://webgeo4.hidrografico.pt/geoserver/oceanography/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=oceanography%3Abuoys_datawell&outputFormat=application%2Fjson';

        // Function to create a custom circleMarker based on the status
        function getIcon(status) {
            let fillColor = 'gray'; // Default to gray if inactive
            if (status && status.toLowerCase() === 'active') {
                fillColor = 'blue'; // Blue for active
            }

            // Create a circle marker with the dynamic color
            return L.circleMarker([0, 0], {
                radius: 8,
                fillColor: fillColor,
                color: fillColor,  // Border color
                weight: 2,
                opacity: 1,
                fillOpacity: 0.8
            });
        }

        // Function to create popups with dynamic attributes
        function onEachFeature(feature, layer) {
            if (feature.properties) {
                let popupContent = '<b>Buoy Information:</b><br>';

                // Loop through all properties and append them to the popup
                for (let prop in feature.properties) {
                    if (feature.properties.hasOwnProperty(prop)) {
                        popupContent += `<b>${prop}:</b> ${feature.properties[prop]}<br>`;
                    }
                }

                // Bind the popup with the generated content
                layer.bindPopup(popupContent);
            }
        }

        // Fetch the WFS data in GeoJSON format
        fetch(url)
            .then(response => response.json())
            .then(data => {
                // Hide loading message
                document.querySelector('.loading').style.display = 'none';

                // Add GeoJSON layer to the map with custom icons based on the status
                L.geoJSON(data, {
                    pointToLayer: function (feature, latlng) {
                        const status = feature.properties.status;  // Get the status property
                        const icon = getIcon(status);  // Get the appropriate icon color based on status

                        icon.setLatLng(latlng);  // Set the position of the icon to the feature's coordinates
                        return icon;
                    },
                    onEachFeature: onEachFeature
                }).addTo(map);
            })
            .catch(error => {
                // Display error message
                document.querySelector('.loading').style.color = 'red';
                document.querySelector('.loading').textContent = 'Error loading data: ' + error.message;
            });
    </script>
</body>
</html>

 

Back to top