Več

Ustvarjanje novih gumbov in odstranjevanje privzetih - Openlayers -3


Poskušam ustvariti nove gumbe, vendar se mi zdi, da uporabljam napačno funkcijo. Če želite izbrisati privzete gumbe, sem dodal naslednjo kodo:

var map = nov ol.Map ({cilj: 'zemljevid', kontrolniki: [], plasti: [nov ol.layer.Tile ({… itd.

To deluje odlično. Zdaj poskušam gumb, ki sem ga ustvaril s HTML (id = btnZoomOut), povezati s funkcijo Zoom:

var buttonZoomOut = nov ol.control.Control ({element: $ ('#btnZoomOut')}); map.addControl (nov ol.control.Zoom ({target: buttonZoomOut}));

Zdi pa se, da to ne deluje in prikaže napako:

Napačena vrsta napake: (vmesna vrednost) (vmesna vrednost) (vmesna vrednost). AppendChild ni funkcija

Kako to pravilno narediti?


Gumbe za povečavo spremenite tako:

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

CSS, to je odvisno od vas:

.prilagodi-zoom {spodaj: .5em; levo: .5em; } .gumb za prilagojeno povečavo {ozadje-barva: rgba (40, 40, 40, .7); meja-polmer: 50%; }

Če želite ustvariti nove kontrolnike: preprost primer nadzora po meri Openlayers


Če želite uporabiti čudovite ikone za pisave

var gumb = document.createElement ('gumb'); button.innerHTML = ''; var handleRotateNorth = funkcija (e) {map.getView (). setRotation (0); }; button.addEventListener ('click', handleRotateNorth, false); var element = document.createElement ('div'); element.className = 'vrti-sever-ol-neizberi ol-nadzor'; element.appendChild (gumb); var map = nov ol.Map ({plasti: [nov ol.layer.Tile ({vir: nov ol.source.OSM ()})]), cilj: 'zemljevid', pogled: nov ol.View ({center: [0, 0], zoom: 2, rotacija: 0}), kontrole: ol.control.defaults (). Extension ([new ol.control.Control ({element: element})])}});

delovna koda jsfiddle