Suite

Créer de nouveaux boutons et supprimer ceux par défaut - Openlayers-3

Créer de nouveaux boutons et supprimer ceux par défaut - Openlayers-3


J'essaie de créer de nouveaux boutons mais je semble utiliser la mauvaise fonction. Pour supprimer les boutons par défaut, j'ai ajouté le code suivant :

var map = new ol.Map({ cible : 'map', contrôles : [], calques : [ new ol.layer.Tile({… etc

Cela fonctionne très bien. Maintenant, j'essaie de connecter un bouton que j'ai créé avec HTML (id=btnZoomOut) à la fonction Zoom :

var buttonZoomOut = new ol.control.Control({element: $('#btnZoomOut')}); map.addControl(nouveau ol.control.Zoom({cible : boutonZoomOut}));

Mais cela ne semble pas fonctionner et génère une erreur :

Uncaught TypeError : (valeur intermédiaire)(valeur intermédiaire)(valeur intermédiaire).appendChild n'est pas une fonction

Comment faire correctement cela ?


Pour modifier les boutons de zoom :

map.addControl(new ol.control.Zoom({ className: 'custom-zoom' }));

CSS, c'est à vous :

.custom-zoom{ bas : .5em; gauche : .5em ; } .custom-zoom button{ background-color: rgba (40, 40, 40, .7); rayon de bordure : 50 % ; }

Pour créer de nouveaux contrôles : exemple de contrôle personnalisé simple Openlayers


Si vous voulez utiliser des icônes géniales de police, alors

var bouton = document.createElement('bouton'); bouton.innerHTML = ''; var handleRotateNorth = function(e) { map.getView().setRotation(0); } ; button.addEventListener('click', handleRotateNorth, false); élément var = document.createElement('div'); element.className = 'rotate-north ol-unselectable ol-control'; element.appendChild(bouton); var map = new ol.Map({ layer: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], target: 'map', view: new ol.View({ center: [0, 0], zoom : 2, rotation : 0 }), contrôles:ol.control.defaults().extend([ new ol.control.Control({ element:element }) ]) });

code de travail jsfiddle