Filtros espaciales

by SIGC GUADALTEL

HTML

<script src="https://mapea4-sigc.juntadeandalucia.es/js/mapea-5.0.0.ol.min.js"></script>
<script src="https://mapea4-sigc.juntadeandalucia.es/js/configuration-5.0.0.js"></script>
<link rel="stylesheet" href="https://mapea4-sigc.juntadeandalucia.es/assets/css/mapea-5.0.0.ol.min.css">
 <div class="modal" id="modal">
        <h2>Cargando...</h2>
    </div>
    <div id="mapjs">
        <button id="b1">Interseccion</button>
        <button id="b2">Diferencia</button>
        <button id="b3">Contenido</button>
        <button id="b4">Contiene</button>
        <button id="b9">Limpiar filtro</button>
    </div>

CSS

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

.m-panel.m-freedrawing-tools.left.opened>button.m-panel-btn.g-cartografia-flecha-izquierda,
.m-panel.m-freedrawing-tools.opened>button.m-panel-btn.g-cartografia-flecha-derecha {
  background-color: #d5006e !important;
  color: #fff
}

.activated {
  color: #d5006e !important
}

.m-freedrawing-tools-container {
  position: absolute;
  top: .5em;
  right: .5em;
  text-align: left;
  overflow-y: auto !important;
  width: 100%
}

@media only screen and (min-width:769px) {
  .m-freedrawing-tools-container {
    width: 210
  }
}

.m-areas>div.m-area>div.m-panel.m-freedrawing-tools>button.m-panel-btn {
  color: #fff;
  max-height: 40px
}

.m-areas>div.m-area>div.m-panel.m-freedrawing-tools.collapsed>button.m-panel-btn {
  color: #d5006e;
}

.m-areas>div.m-area>div.m-panel.m-freedrawing-right>button.m-panel-btn {
  position: absolute;
  left: -40px;
  background-color: #4e92ce;
  color: #fff;
  z-index: 999999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 -1px 0 rgba(0, 0, 0, .02)
}

.m-areas>div.m-area>div.m-panel.m-freedrawing-tools.opened {
  background-color: #f4f4f4
}

@-moz-document url-prefix() {
  .m-areas>div.m-area>div.m-panel.m-freedrawing-tools.opened {
    z-index: 9999999 !important
  }
}

.m-areas>div.m-area>div.m-panel.m-freedrawing-tools {
  order: -100
}

.m-panel-controls .m-freedrawing-tools-panel {
  display: flex !important;
  flex-direction: row-reverse
}

.m-areas>div.m-area>div.m-panel.m-freedrawing-tools {
  max-height: 40px
}

.m-freedrawing-tools-container .m-mapea-container input[type=text] {
  margin: 0
}

.tools-icon {
  position: inherit !important;
  overflow: hidden;
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: table
}

#m-feature-freedrawing-ftext {
  margin: 0
}

@media (-ms-high-contrast:active),
(-ms-high-contrast:none) {
  #m-freedrawing-tools-icons-container {
    z-index: 9999 !important;
    display:...

JavaScript

! function(e) {
  var t = {};

  function n(o) {
    if (t[o]) return t[o].exports;
    var r = t[o] = {
      i: o,
      l: !1,
      exports: {}
    };
    return e[o].call(r.exports, r, r.exports, n), r.l = !0, r.exports
  }
  n.m = e, n.c = t, n.d = function(e, t, o) {
    n.o(e, t) || Object.defineProperty(e, t, {
      enumerable: !0,
      get: o
    })
  }, n.r = function(e) {
    "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
      value: "Module"
    }), Object.defineProperty(e, "__esModule", {
      value: !0
    })
  }, n.t = function(e, t) {
    if (1 & t && (e = n(e)), 8 & t) return e;
    if (4 & t && "object" == typeof e && e && e.__esModule) return e;
    var o = Object.create(null);
    if (n.r(o), Object.defineProperty(o, "default", {
        enumerable: !0,
        value: e
      }), 2 & t && "string" != typeof e)
      for (var r in e) n.d(o, r, function(t) {
        return e[t]
      }.bind(null, r));
    return o
  }, n.n = function(e) {
    var t = e && e.__esModule ? function() {
      return e.default
    } : function() {
      return e
    };
    return n.d(t, "a", t), t
  }, n.o = function(e, t) {
    return Object.prototype.hasOwnProperty.call(e, t)
  }, n.p = "", n(n.s = 4)
}([function(e, t, n) {
  var o;
  ! function(r) {
    "use strict";

    function i(e, t) {
      function n(t) {
        if (d) {
          var n = t.target.getBoundingClientRect(),
            r = f.getImageData(t.clientX - n.left, t.clientY - n.top, 1, 1).data;
          o.setColor("rgb(" + r[0] + "," + r[1] + "," + r[2] + ")"), e.dispatchEvent(y, [o.colorHex, o.colorRGB])
        }
      }
      this.options = function() {
        for (var e = 1; e < arguments.length; e++)
          for (var t in arguments[e]) arguments[e].hasOwnProperty(t) && (arguments[0][t] = arguments[e][t]);
        return arguments[0]
      }({}, l, t), this._defaults = l, this._name = a;
      var o = this,
        r =...