2016-04-19 5 views
1

Ich habe einen lokalen openstreetmap-Kachelserver implementiert und habe es oft versucht, die Karte mit openlayers3 zu zeigen, aber leider gescheitert. Hier ist meine Experimentier-Szene. Ich stelle den Kachelserver auf Port 80 bereit und erhalte das Image korrekt über http://127.0.0.1:80/osm_tiles/ {z}/{x}/{y} .png. Außerdem platziere ich ein Django-Web auf Port 8099, und ich kann über http://127.0.0.1:8099/my/page auf die Webseite zugreifen. In der Vorlage Seite schrieb ich wie dieseWie benutze ich das Attribut 'url' von ol.source.OSM

var layer = new ol.layer.Tile({ 
 
     source: new ol.source.OSM({ 
 
      attributions: [ 
 
       ol.source.OSM.ATTRIBUTION 
 
      ], 
 
      url:'//127.0.0.1:80/osm_tiles2/{z}/{x}/{y}.png'    
 
     }) 
 
    }); 
 

 
var map= new ol.Map({ 
 
     target : 'map_canvas', 
 
     loadTilesWhileAnimating: true, 
 
     view: new ol.View({ 
 
      center:ol.proj.transform([116.391625,39.906813], 'EPSG:4326', 'EPSG:3857'), 
 
      zoom : 12 
 
     }), 
 
     layers:[layer] 
 
    });

Die map_canvas zeigt nichts, aber ich kann die Bilder von Kachel-Server in firebug.WHY bekommen? Hilf mir, vielen Dank!

Antwort

1

Versuchen Hinzufügen crossOrigin: null an die Quelle, etwa so:

var layer = new ol.layer.Tile({ 
    source: new ol.source.OSM({ 
     attributions: [ 
      ol.source.OSM.ATTRIBUTION 
     ], 
     url:'//127.0.0.1:80/osm_tiles2/{z}/{x}/{y}.png', 
     crossOrigin: null    
    }) 
}); 
+0

Ja, es funktioniert! Danke! –

+0

Großartig. Es würde Ihnen Spaß machen, über das allgemeine Problem zu lesen, auf das es sich bezieht: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image – sifriday