Quiero hacer una función "Agregar área". Después de hacer clic en el mapa, se mostrará la ventana emergente para ingresar el nombre del área y, después de confirmar el nombre, el mapa debería hacer zoom automáticamente en el área con el relleno {100,100,100,100} y se mostrará el marcador de imagen. Pero mi marcador de imagen (.png y .svg) no se muestra, luego se amplía demasiado. Parece que mi relleno no funcionó bien.

AddArea.js

 import 'ol/ol.css'; import Draw from 'ol/interaction/Draw'; import Map from 'ol/Map'; import View from 'ol/View'; import {toLonLat} from 'ol/proj'; import {toStringXY} from 'ol/coordinate'; import {OSM, Vector as VectorSource} from 'ol/source'; import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'; import Feature from 'ol/Feature'; import Point from 'ol/geom/Point'; import {fromLonLat} from 'ol/proj'; import Swal from 'sweetalert2/dist/sweetalert2.js' import 'sweetalert2/src/sweetalert2.scss' const map=$('#map').data('map'); const vectorSource = new VectorSource(); const vector = new VectorLayer({ source: vectorSource, style: new Style({ image: new Icon({ anchor: [0.5, 1], anchorXUnits: "fraction", anchorYUnits: "fraction", src: "pin.png" }) }) }); var vectorLayer = new VectorLayer({ source: new VectorSource(), }); map.addLayer(vectorLayer); let draw; function addInteraction() { map.addLayer(vector); draw = new Draw({ source: vectorSource, type: "Point", }); map.addInteraction(draw); } $('#add-area-btn').click(function(){ addInteraction(); map.on('singleclick', function (evt) { Swal.fire({ position: 'top', title: 'Input area name', input: 'text', inputPlaceholder: 'Enter area name', showCancelButton: true, allowOutsideClick: false, inputValidator: (value) => { if (!value) { return 'You need to write something!' } else { map.getView().fit(vectorSource.getExtent(), { size: map.getSize, padding:[100,100,100,100] }); vector.getSource().clear(true); map.removeLayer(vector); map.getInteractions().pop(); //Enable click function map.un('click', callback); } } }).then((result) => { //Cancel button clicked if (result.dismiss == Swal.DismissReason.cancel) { Swal.fire({ position: 'top', icon: 'info', title: 'Area Canceled' }); vector.getSource().clear(true); map.removeLayer(vector); map.getInteractions().pop(); //Enable click function map.un('click', callback); } }) }); })

Ese es mi código y espero que alguien pueda ayudarme... Gracias...