Diferenças

Aqui você vê as diferenças entre duas revisões dessa página.

--- base_rima:botanica:kingdom:phylum:class:ordem:family:genus:inga [2020/11/24 22:28]
carol
+++ base_rima:botanica:kingdom:phylum:class:ordem:family:genus:inga [2021/12/14 14:36] (atual)
@@ Linha 2: / Linha 2: @@
 kingdom,phylum,class,ordem,family,genus
 Plantae, Angiospermas, SuperrosÃdeas, Fabales, Fabaceae, Inga
 registros rima:
-http://192.168.0.13:8080/geoserver/rima/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=rima:pontos_flora&CQL_FILTER=genus=%27Inga%27&outputFormat=json
+http://rede.inma.gov.br/geoserver/rima/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=rima:pontos_flora&CQL_FILTER=genus=%27Inga%27&outputFormat=json
 mapa interativo:
-http://192.168.0.13:8080/geoserver/rima/wms?service=WMS&version=1.1.0&request=GetMap&layers=rima%3Apontos_flora&CQL_FILTER=genus=%27Inga%27&bbox=-41.8558387756348%2C-21.0377807617188%2C-39.6697692871094%2C-18.2336101531982&width=598&height=768&srs=EPSG%3A4674&format=application/openlayers
+http://rede.inma.gov.br/geoserver/rima/wms?service=WMS&version=1.1.0&request=GetMap&layers=rima%3Apontos_flora&CQL_FILTER=genus=%27Inga%27&bbox=-41.8558387756348%2C-21.0377807617188%2C-39.6697692871094%2C-18.2336101531982&width=598&height=768&srs=EPSG%3A4674&format=application/openlayers
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="//rede.inma.gov.br/geoserver/openlayers3/ol.css" type="text/css">
+    <style>
+        .ol-zoom {
+          top: 52px;
+        }
+        .ol-toggle-options {
+          z-index: 1000;
+          background: rgba(255,255,255,0.4);
+          border-radius: 4px;
+          padding: 2px;
+          position: absolute;
+          left: 8px;
+          top: 8px;
+        }
+        #updateFilterButton, #resetFilterButton {
+          height: 22px;
+          width: 22px;
+          text-align: center;
+          text-decoration: none !important;
+          line-height: 22px;
+          margin: 1px;
+          font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
+          font-weight: bold !important;
+          background: rgba(0,60,136,0.5);
+          color: white !important;
+          padding: 2px;
+        }
+        .ol-toggle-options a {
+          background: rgba(0,60,136,0.5);
+          color: white;
+          display: block;
+          font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
+          font-size: 19px;
+          font-weight: bold;
+          height: 22px;
+          line-height: 11px;
+          margin: 1px;
+          padding: 0;
+          text-align: center;
+          text-decoration: none;
+          width: 22px;
+          border-radius: 2px;
+        }
+        .ol-toggle-options a:hover {
+          color: #fff;
+          text-decoration: none;
+          background: rgba(0,60,136,0.7);
+        }
+        body {
+            font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
+            font-size: small;
+        }
+        iframe {
+            width: 100%;
+            height: 250px;
+            border: none;
+        }
+        /* Toolbar styles */
+        #toolbar {
+            position: relative;
+            padding-bottom: 0.5em;
+        }
+        #toolbar ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        #toolbar ul li {
+            float: left;
+            padding-right: 1em;
+            padding-bottom: 0.5em;
+        }
+        #toolbar ul li a {
+            font-weight: bold;
+            font-size: smaller;
+            vertical-align: middle;
+            color: black;
+            text-decoration: none;
+        }
+        #toolbar ul li a:hover {
+            text-decoration: underline;
+        }
+        #toolbar ul li * {
+            vertical-align: middle;
+        }
+        #map {
+            clear: both;
+            position: relative;
+            width: 400px;
+            height: 400px;
+            border: 1px solid black;
+        }
+        #wrapper {
+            width: 598px;
+        }
+        #location {
+            float: right;
+        }
+        /* Styles used by the default GetFeatureInfo output, added to make IE happy */
+        table.featureInfo, table.featureInfo td, table.featureInfo th {
+            border: 1px solid #ddd;
+            border-collapse: collapse;
+            margin: 0;
+            padding: 0;
+            font-size: 90%;
+            padding: .2em .1em;
+        }
+        table.featureInfo th {
+            padding: .2em .2em;
+            font-weight: bold;
+            background: #eee;
+        }
+        table.featureInfo td {
+            background: #fff;
+        }
+        table.featureInfo tr.odd td {
+            background: #eee;
+        }
+        table.featureInfo caption {
+            text-align: left;
+            font-size: 100%;
+            font-weight: bold;
+            padding: .2em .2em;
+        }
+    </style>
+    <script src="//rede.inma.gov.br/geoserver/openlayers3/ol.js" type="text/javascript"></script>
+    <title>OpenLayers map preview</title>
+  </head>
+  <body>
+    <div id="toolbar" style="display: none;">
+      <ul>
+        <li>
+          <a>WMS version:</a>
+          <select id="wmsVersionSelector" onchange="setWMSVersion(value)">
+            <option value="1.1.1">1.1.1</option>
+            <option value="1.3.0">1.3.0</option>
+          </select>
+        </li>
+        <li>
+          <a>Tiling:</a>
+          <select id="tilingModeSelector" onchange="setTileMode(value)">
+            <option value="untiled">Single tile</option>
+            <option value="tiled">Tiled</option>
+          </select>
+        </li>
+        <li>
+          <a>Antialias:</a>
+          <select id="antialiasSelector" onchange="setAntialiasMode(value)">
+            <option value="full">Full</option>
+            <option value="text">Text only</option>
+            <option value="none">Disabled</option>
+          </select>
+        </li>
+        <li>
+          <a>Format:</a>
+          <select id="imageFormatSelector" onchange="setImageFormat(value)">
+            <option value="image/png">PNG 24bit</option>
+            <option value="image/png8">PNG 8bit</option>
+            <option value="image/gif">GIF</option>
+            <option id="jpeg" value="image/jpeg">JPEG</option>
+            <option id="jpeg-png" value="image/vnd.jpeg-png">JPEG-PNG</option>
+            <option id="jpeg-png8" value="image/vnd.jpeg-png8">JPEG-PNG8</option>
+          </select>
+        </li>
+        <li>
+          <a>Styles:</a>
+          <select id="imageFormatSelector" onchange="setStyle(value)">
+            <option value="">Default</option>
+          </select>
+        </li>
+        <li>
+          <a>Width/Height:</a>
+          <select id="widthSelector" onchange="setWidth(value)">
+             <!--
+             These values come from a statistics of the viewable area given a certain screen area
+             (but have been adapted a litte, simplified numbers, added some resolutions for wide screen)
+             You can find them here: http://www.evolt.org/article/Real_World_Browser_Size_Stats_Part_II/20/2297/
+             --><option value="auto">Auto</option>
+                <option value="600">600</option>
+                <option value="750">750</option>
+                <option value="950">950</option>
+                <option value="1000">1000</option>
+                <option value="1200">1200</option>
+                <option value="1400">1400</option>
+                <option value="1600">1600</option>
+                <option value="1900">1900</option>
+            </select>
+            <select id="heigthSelector" onchange="setHeight(value)">
+                <option value="auto">Auto</option>
+                <option value="300">300</option>
+                <option value="400">400</option>
+                <option value="500">500</option>
+                <option value="600">600</option>
+                <option value="700">700</option>
+                <option value="800">800</option>
+                <option value="900">900</option>
+                <option value="1000">1000</option>
+            </select>
+          </li>
+          <li>
+              <a>Filter:</a>
+              <select id="filterType">
+                  <option value="cql">CQL</option>
+                  <option value="ogc">OGC</option>
+                  <option value="fid">FeatureID</option>
+              </select>
+              <input type="text" size="80" id="filter"/>
+              <a id="updateFilterButton" href="#" onClick="updateFilter()" title="Apply filter">Apply</a>
+              <a id="resetFilterButton" href="#" onClick="resetFilter()" title="Reset filter">Reset</a>
+          </li>
+        </ul>
+      </div>
+    <div id="map">
+      <div class="ol-toggle-options ol-unselectable"><a title="Toggle options toolbar" onClick="toggleControlPanel()" href="#toggle">...</a></div>
+    </div>
+    <div id="wrapper">
+        <div id="location"></div>
+        <div id="scale">
+    </div>
+    <div id="nodelist">
+        <em>Click on the map to get feature info</em>
+    </div>
+    <script type="text/javascript">
+      var pureCoverage = false;
+      // if this is just a coverage or a group of them, disable a few items,
+      // and default to jpeg format
+      var format = 'image/png';
+      var bounds = [-41.8558387756348, -21.0377807617188,
+                    -39.6697692871094, -18.2336101531982];
+      if (pureCoverage) {
+        document.getElementById('antialiasSelector').disabled = true;
+        document.getElementById('jpeg').selected = true;
+        format = "image/jpeg";
+      }
+      var supportsFiltering = true;
+      if (!supportsFiltering) {
+        document.getElementById('filterType').disabled = true;
+        document.getElementById('filter').disabled = true;
+        document.getElementById('updateFilterButton').disabled = true;
+        document.getElementById('resetFilterButton').disabled = true;
+      }
+      var mousePositionControl = new ol.control.MousePosition({
+        className: 'custom-mouse-position',
+        target: document.getElementById('location'),
+        coordinateFormat: ol.coordinate.createStringXY(5),
+        undefinedHTML: '&nbsp;'
+      });
+      var untiled = new ol.layer.Image({
+        source: new ol.source.ImageWMS({
+          ratio: 1,
+          url: 'http://rede.inma.gov.br/geoserver/rima/wms',
+          params: {'FORMAT': format,
+                   'VERSION': '1.1.1',
+                "CQL_FILTER": 'genus=\'Inga\'',
+                "LAYERS": 'rima:pontos_flora',
+                "exceptions": 'application/vnd.ogc.se_inimage',
+          }
+        })
+      });
+      var tiled = new ol.layer.Tile({
+        visible: false,
+        source: new ol.source.TileWMS({
+          url: 'http://rede.inma.gov.br/geoserver/rima/wms',
+          params: {'FORMAT': format,
+                   'VERSION': '1.1.1',
+                   tiled: true,
+                "CQL_FILTER": 'genus=\'Inga\'',
+                "LAYERS": 'rima:pontos_flora',
+                "exceptions": 'application/vnd.ogc.se_inimage',
+             tilesOrigin: -41.8558387756348 + "," + -21.0377807617188
+          }
+        })
+      });
+      var projection = new ol.proj.Projection({
+          code: 'EPSG:4674',
+          units: 'degrees',
+          axisOrientation: 'neu',
+          global: true
+      });
+      var map = new ol.Map({
+        controls: ol.control.defaults({
+          attribution: false
+        }).extend([mousePositionControl]),
+        target: 'map',
+        layers: [
+          untiled,
+          tiled
+        ],
+        view: new ol.View({
+           projection: projection
+        })
+      });
+      map.getView().on('change:resolution', function(evt) {
+        var resolution = evt.target.get('resolution');
+        var units = map.getView().getProjection().getUnits();
+        var dpi = 25.4 / 0.28;
+        var mpu = ol.proj.METERS_PER_UNIT[units];
+        var scale = resolution * mpu * 39.37 * dpi;
+        if (scale >= 9500 && scale <= 950000) {
+          scale = Math.round(scale / 1000) + "K";
+        } else if (scale >= 950000) {
+          scale = Math.round(scale / 1000000) + "M";
+        } else {
+          scale = Math.round(scale);
+        }
+        document.getElementById('scale').innerHTML = "Scale = 1 : " + scale;
+      });
+      map.getView().fit(bounds, map.getSize());
+      map.on('singleclick', function(evt) {
+        document.getElementById('nodelist').innerHTML = "Loading... please wait...";
+        var view = map.getView();
+        var viewResolution = view.getResolution();
+        var source = untiled.get('visible') ? untiled.getSource() : tiled.getSource();
+        var url = source.getGetFeatureInfoUrl(
+          evt.coordinate, viewResolution, view.getProjection(),
+          {'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50});
+        if (url) {
+          document.getElementById('nodelist').innerHTML = '<iframe seamless src="' + url + '"></iframe>';
+        }
+      });
+      // sets the chosen WMS version
+      function setWMSVersion(wmsVersion) {
+        map.getLayers().forEach(function(lyr) {
+          lyr.getSource().updateParams({'VERSION': wmsVersion});
+        });
+        if(wmsVersion == "1.3.0") {
+            origin = bounds[1] + ',' + bounds[0];
+        } else {
+            origin = bounds[0] + ',' + bounds[1];
+        }
+        tiled.getSource().updateParams({'tilesOrigin': origin});
+      }
+      // Tiling mode, can be 'tiled' or 'untiled'
+      function setTileMode(tilingMode) {
+        if (tilingMode == 'tiled') {
+          untiled.set('visible', false);
+          tiled.set('visible', true);
+        } else {
+          tiled.set('visible', false);
+          untiled.set('visible', true);
+        }
+      }
+      function setAntialiasMode(mode) {
+        map.getLayers().forEach(function(lyr) {
+          lyr.getSource().updateParams({'FORMAT_OPTIONS': 'antialias:' + mode});
+        });
+      }
+      // changes the current tile format
+      function setImageFormat(mime) {
+        map.getLayers().forEach(function(lyr) {
+          lyr.getSource().updateParams({'FORMAT': mime});
+        });
+      }
+      function setStyle(style){
+        map.getLayers().forEach(function(lyr) {
+          lyr.getSource().updateParams({'STYLES': style});
+        });
+      }
+      function setWidth(size){
+        var mapDiv = document.getElementById('map');
+        var wrapper = document.getElementById('wrapper');
+        if (size == "auto") {
+          // reset back to the default value
+          mapDiv.style.width = null;
+          wrapper.style.width = null;
+        }
+        else {
+          mapDiv.style.width = size + "px";
+          wrapper.style.width = size + "px";
+        }
+        // notify OL that we changed the size of the map div
+        map.updateSize();
+      }
+      function setHeight(size){
+        var mapDiv = document.getElementById('map');
+        if (size == "auto") {
+          // reset back to the default value
+          mapDiv.style.height = null;
+        }
+        else {
+          mapDiv.style.height = size + "px";
+        }
+        // notify OL that we changed the size of the map div
+        map.updateSize();
+      }
+      function updateFilter(){
+        if (!supportsFiltering) {
+          return;
+        }
+        var filterType = document.getElementById('filterType').value;
+        var filter = document.getElementById('filter').value;
+        // by default, reset all filters
+        var filterParams = {
+          'FILTER': null,
+          'CQL_FILTER': null,
+          'FEATUREID': null
+        };
+        if (filter.replace(/^\s\s*/, '').replace(/\s\s*$/, '') != "") {
+          if (filterType == "cql") {
+            filterParams["CQL_FILTER"] = filter;
+          }
+          if (filterType == "ogc") {
+            filterParams["FILTER"] = filter;
+          }
+          if (filterType == "fid")
+            filterParams["FEATUREID"] = filter;
+          }
+          // merge the new filter definitions
+          map.getLayers().forEach(function(lyr) {
+            lyr.getSource().updateParams(filterParams);
+          });
+        }
+        function resetFilter() {
+          if (!supportsFiltering) {
+            return;
+          }
+          document.getElementById('filter').value = "";
+          updateFilter();
+        }
+        // shows/hide the control panel
+        function toggleControlPanel(){
+          var toolbar = document.getElementById("toolbar");
+          if (toolbar.style.display == "none") {
+            toolbar.style.display = "block";
+          }
+          else {
+            toolbar.style.display = "none";
+          }
+          map.updateSize()
+        }
+    </script>
+  </body>
+</html>