[Ej] JSTS zoom feature + desactivar movimiento de arrastre (DragPan) y rueda del ratón (MouseWheelZoom)
by deivil79
HTML
<script src="http://mapea4-sigc.juntadeandalucia.es/js/mapea.ol.min.js"></script>
<script src="http://mapea4-sigc.juntadeandalucia.es/js/configuration.js"></script>
<link rel="stylesheet" href="http://mapea4-sigc.juntadeandalucia.es/assets/css/mapea.ol.min.css">
<div id="map"></div>
CSS
html,
body,
#map {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
JavaScript
let mapajs = M.map({
container: "map",
wmcfile: "callejero",
controls: ["layerswitcher"]
});
// Cuando el mapa este completo, esactivamos la rueda de raton
mapajs.on(M.evt.COMPLETED, function(mapa) {
mapa.getMapImpl().getInteractions().forEach((i) => {
//if (i instanceof ol.interaction.DragPan) {
if (i instanceof ol.interaction.MouseWheelZoom || i instanceof ol.interaction.DragPan) {
i.setActive(false);
}
})
});
//GeoJSON servido
let lyProvincias = new M.layer.WFS({
name: "ate",
url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/wfs",
namespace: "tematicos"
});
// aplicamos un estilo
lyProvincias.setStyle(new M.style.Polygon({
fill: {
color: 'green',
opacity: 0.3,
},
stroke: {
color: '#FF0000',
width: 2
}
}));
// Cuando se selecciona un feature
lyProvincias.on(M.evt.SELECT_FEATURES, function(features) {
// Obtenemos su envelope y lo aplicamos al mapa
parser = new jsts.io.GeoJSONReader();
f = parser.read(features[0].getGeoJSON());
env = f.geometry.getEnvelopeInternal();
mapajs.setBbox([env._minx, env._miny, env._maxx, env._maxy]);
});
mapajs.addLayers([lyProvincias]);