Mapea5 - JSTS

by SIGC

HTML

<script src="https://sigc.desarrollo.guadaltel.es/mapea5/js/mapea.ol.min.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea5/assets/css/mapea.ol.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea5/js/configuration.js"></script>

<div id="map"></div>

CSS

html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
      }

JavaScript

let mapajs = M.map({
   container: "map",
   wmcfile: "callejero",
   controls: ["layerswitcher"]
 });

 //GeoJSON servido
 let lyProvincias = new M.layer.WFS({
   name: "Provincias",
   url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/wfs",
   namespace: "tematicos"
 });
 let lyEnvelope = new M.layer.GeoJSON({
   source: {
     "crs": {
       "properties": {
         "name": "EPSG:25830"
       },
       "type": "name"
     },
     "features": [],
     "type": "FeatureCollection"
   },
   name: 'envelope'
 });

 lyProvincias.on(M.evt.SELECT_FEATURES, function(features) {
 
   parser = new jsts.io.GeoJSONReader();
   f = parser.read(features[0].getGeoJSON());
   objEnv = f.geometry.getEnvelopeInternal();
      
   fEnv = new M.Feature(features[0].getAttribute("nombre"), {
     "type": "Feature",
     "id": "fEnv",
     "geometry": {
       "type": "Polygon",
       "coordinates":  [[
       									[objEnv._minx, objEnv._miny],
                        [objEnv._minx, objEnv._maxy],
       									[objEnv._maxx, objEnv._maxy],
                        [objEnv._maxx, objEnv._miny]
                       ]]
     },
     "geometry_name": "the_geom",
     "properties": {
       "nombre": "envelope"
     }
   });
      
   lyEnvelope.clear();
   lyEnvelope.addFeatures(fEnv);
 });

 mapajs.addLayers([lyProvincias, lyEnvelope]);