0

I'm having trouble trying to get my map image with the Leaflet-Image plugin.

My code:

var map = L.map('map', {
      preferCanvas: true
    }).setView([43.42851395329958, -3.668450798388781], 23);

    var wmsLayer = L.tileLayer.wms("http://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx?", {
        layers: "Catastro",//nombre de la capa (ver get capabilities)
        format: 'image/png',
      transparent: true,
      maxZoom: 19,
        version: '1.1.1',//wms version (ver get capabilities)
      attribution: '<a href="https://www.sedecatastro.gob.es/"" target="_blank">Dirección General de Catastro</a>'
    }).addTo(map);

        var cjijedaaxwQAeaeqedserersxd = "";


    new L.Proj.CRS(
          "EPSG:3042",
          "+proj=utm +zone=30 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs",
          {
            resolutions: [
              8192,
              4096,
              2048,
              1024,
              512,
              256,
              128,
              64,
              32,
              16,
              8,
              4,
              2,
              1,
            ],
          }
        );
   var geojsonFeature = 
      [ { "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::3042" } }, "geometry": { "coordinates": [ [ [ 445921.5269, 4808549.1899 ], [ 445906.3265, 4808621.7646 ] ] ], "type": "MultiLineString" }, "tipo_fichero": "red_extension", "id": "red_extension.1", "type": "Feature", "properties": { "tipo_actua": "extension", "tension": 400, "tipo": "aereo", "elemento_c": "CABLE", "numcircuit": 3, "tipo_eleme": "tendido", "feeder": "33882643", "tipotramo": "vano", "tipo_tendi": "tensado", "imax": 100, "conductor": "RZ 0,6/1 kV 3x25+54,6 Alm", "nudofin": "nudo_90", "posicion": "intermedia", "ct": "946582", "longitud": 74.14944072808774, "r": 1.2, "agrupadora": "AGR_V BT RZ25 T", "y1": 4808549.1899, "x": 0.1, "x1": 445921.5269, "y2": 4808621.764600014, "x2": 445906.3264895427, "id": "entronque-nudo_90", "nudoorigen": "3117761080" } }, { "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::3042" } }, "geometry": { "coordinates": [ [ [ 445906.3265, 4808621.7646 ], [ 445886.845, 4808681.6768 ] ] ], "type": "MultiLineString" }, "tipo_fichero": "red_extension", "id": "red_extension.2", "type": "Feature", "properties": { "tipo_actua": "extension", "tension": 400, "tipo": "aereo", "elemento_c": "CABLE", "numcircuit": 3, "tipo_eleme": "tendido", "feeder": "33882643", "tipotramo": "vano", "tipo_tendi": "tensado", "imax": 100, "conductor": "RZ 0,6/1 kV 3x25+54,6 Alm", "nudofin": "nudo_153", "posicion": "intermedia", "ct": "946582", "longitud": 63.0000000073621, "r": 1.2, "agrupadora": "AGR_V BT RZ25 T", "y1": 4808621.764600014, "x": 0.1, "x1": 445906.3264895427, "y2": 4808681.676796015, "x2": 445886.8449913647, "id": "nudo_90-nudo_153", "nudoorigen": "nudo_90" } }, { "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::3042" } }, "geometry": { "coordinates": [ [ [ 445886.845, 4808681.6768 ], [ 445887.5215, 4808682.5332 ] ] ], "type": "MultiLineString" }, "tipo_fichero": "red_extension", "id": "red_extension.3", "type": "Feature", "properties": { "tipo_actua": "extension", "tension": 400, "tipo": "aereo", "elemento_c": "CABLE", "numcircuit": 3, "tipo_eleme": "acometida", "feeder": "33882643", "tipotramo": "bajada", "tipo_tendi": "posado", "imax": 100, "conductor": "RZ 0,6/1 kV 3x25+54,6 Alm", "nudofin": "acometida", "posicion": "final", "ct": "946582", "longitud": 1.091405287449764, "r": 1.2, "agrupadora": "AGR_AC BT RZ25 P", "y1": 4808681.676796015, "x": 0.1, "x1": 445886.8449913647, "y2": 4808682.533211502, "x2": 445887.52153996995, "id": "nudo_153-acometida", "nudoorigen": "nudo_153" } } ]
    ;
    var myStyle = {
      "color": "blue",
      "weight": 2,
      "opacity": 0.65,
      "dashArray": "14 10",
      "dashOffset": "3"
    };

    L.Proj.geoJson(geojsonFeature, {
      style: myStyle
    }).addTo(map);

    if (tipoPlano === "Punto de conexion") {

      var utmObj = require("utm-latlng");
      var utm = new utmObj();
      var coordenadasUTM = utm.convertUtmToLatLng(445921, 4808549, 30, "S");

      //445921, 4808549
      var circle = L.circle([coordenadasUTM.lat, coordenadasUTM.lng], {
        color: 'red',
        fillOpacity: 0,
        radius: 3,
        weight: 1
      }).addTo(map);

      var myIcon = L.icon({
          iconUrl: require('@/assets/PRUEBA.png'),
          iconSize: [120, 180],
          iconAnchor: [42, 115]
      });

      L.marker([coordenadasUTM.lat, coordenadasUTM.lng], {icon: myIcon}).addTo(map);
      
      var coordenadasUTMa = utm.convertUtmToLatLng(445886, 4808681, 30, "S");

      var myIcona = L.icon({
          iconUrl: require('@/assets/PRUEBA2.png'),
          iconSize: [120, 180],
          iconAnchor: [42, 115]
      });

      L.marker([coordenadasUTMa.lat, coordenadasUTMa.lng], {icon: myIcona}).addTo(map);

    } else {
      
    }
    
    var src = "";

    setTimeout(function() {
      leafletImage(map, doImage);
    }, 5000);

    function doImage(err, canvas) {
      var img = document.createElement('img');
      var dimensions = map.getSize();
      img.width = dimensions.x;
      img.height = dimensions.y;
      img.src = canvas.toDataURL();
      src = canvas.toDataURL();
      console.log(src);
      snapshot.innerHTML = '';
      snapshot.appendChild(img);
    }

enter image description here

This is my map: enter image description here

When I run the leaflet-Image plugin and add it to an :

enter image description here

Why is this happening and how can I fix it?

  • Leaflet-image plugin draws all content on browser canvas. For security reasons everything that is drawn on canvas from other web resources must have permission for that in the form of HTTP header Access-Control-Allow-Origin: (CORS security, see for example webucator.com/how-to/how-make-cross-origin-ajax-request.cfm=. For example, header Access-Control-Allow-Origin: * allows resource to be used from any web page. Your WMS server responses contain has no such header, and as a consequence browser does not allow usage of this resource. – TomazicM Oct 14 '20 at 17:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.