Openlayers 4.3.2 - impossible d'obtenir le rendu toile ou WebGL en mode démo simple

Question

J'essaie de développer une démo ultra-simple d'OpenLayers 4. Tout ce que je veux faire c'est afficher une carte. Lorsque je charge le fichier html localement dans mon navigateur (Firefox 42), la page s'affiche, mais il n'y a pas de contenu dans la carte div.

Je reçois des erreurs dans la console du navigateur en disant:

Erreur: WebGL: Refusé pour créer le contexte OpenGL natif en raison de listes noires.

J'ai essayé de demander explicitement un moteur de rendu 'canvas', mais évidemment cela ne fonctionne pas non plus (je pense que 'canvas' est la valeur par défaut).

J'apprécierais des conseils pour contourner ce problème. Mon HTML/JS est ci-dessous, dépouillé de non essentiels:

var map = null; /* want to be able to see outside of initialize */ 
 

 
/* Initialize the map. Right now we use an arbitrary 
 
* center point in Amphawa. 
 
*/ 
 
function initialize() 
 
{ 
 
    map = new ol.Map(
 
    { 
 
    target: 'map-canvas', 
 
    renderer: 'canvas', 
 
    layers: 
 
    [ 
 
     new ol.layer.Tile(
 
     { 
 
     source: new ol.source.OSM() 
 
     }) 
 
    ], 
 
    view: new ol.View(
 
    { 
 
     center: ol.proj.fromLonLat([13.354169, 99.931984]), 
 
     zoom: 4 
 
    }) 
 
    }); 
 
} 
 

 
initialize();

#header { 
 
    background-color: #DDFFFF; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    text-align: center; 
 
    line-height: 150%; 
 
} 
 
#map-canvas { 
 
    width: 95%; 
 
    height: 200px; 
 
    border-style: inset; 
 
    border-width: 4px 
 
} 
 

 
#titlebar { 
 
    width : 100%; 
 
    height : 20px; 
 
    background-color : #DDDDDD; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    border-color: black; 
 
}

<script src="https://openlayers.org/en/v4.3.2/build/ol.js"></script> 
 
<!-- Layout of page starts here --> 
 
<div id="container" style="width:100%; height: 100%; margin: 0px"> 
 
<table width="100%"> 
 
    <tr> 
 
<td colspan="2"> 
 
    <div id="header"> 
 
     <table width="100%"> 
 
     <tr> 
 
    <td width="15%"> 
 
     <div id="control-panel"> 
 
      &nbsp; 
 
     </div> 
 
      </td> 
 
      <td style="text-align: center;" width="85%"> 
 
     </td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td width="15%"> 
 
&nbsp; 
 
    </td> 
 
    <td> 
 
    <div id="map-canvas"> 
 
    </div> 
 
    </td> 
 
</tr> 
 
</table> 
 
</div> <!-- container -->

s'il vous plaît BTW ne prennent pas la peine de critiquer mon html ou le style JS. Je sais qu'ils sont laids!

Answer 1

99,931984 n'est pas une latitude valide - essayez d'échanger les valeurs des coordonnées

var map = null; /* want to be able to see outside of initialize */ 
 

 
/* Initialize the map. Right now we use an arbitrary 
 
* center point in Amphawa. 
 
*/ 
 
function initialize() 
 
{ 
 
    map = new ol.Map(
 
    { 
 
    target: 'map-canvas', 
 
    renderer: 'canvas', 
 
    layers: 
 
    [ 
 
     new ol.layer.Tile(
 
     { 
 
     source: new ol.source.OSM() 
 
     }) 
 
    ], 
 
    view: new ol.View(
 
    { 
 
     center: ol.proj.fromLonLat([99.931984, 13.354169]), 
 
     zoom: 4 
 
    }) 
 
    }); 
 
} 
 

 
initialize();

#header { 
 
    background-color: #DDFFFF; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    text-align: center; 
 
    line-height: 150%; 
 
} 
 
#map-canvas { 
 
    width: 95%; 
 
    height: 200px; 
 
    border-style: inset; 
 
    border-width: 4px 
 
} 
 

 
#titlebar { 
 
    width : 100%; 
 
    height : 20px; 
 
    background-color : #DDDDDD; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    border-color: black; 
 
}

<script src="https://openlayers.org/en/v4.3.2/build/ol.js"></script> 
 
<!-- Layout of page starts here --> 
 
<div id="container" style="width:100%; height: 100%; margin: 0px"> 
 
<table width="100%"> 
 
    <tr> 
 
<td colspan="2"> 
 
    <div id="header"> 
 
     <table width="100%"> 
 
     <tr> 
 
    <td width="15%"> 
 
     <div id="control-panel"> 
 
      &nbsp; 
 
     </div> 
 
      </td> 
 
      <td style="text-align: center;" width="85%"> 
 
     </td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td width="15%"> 
 
&nbsp; 
 
    </td> 
 
    <td> 
 
    <div id="map-canvas"> 
 
    </div> 
 
    </td> 
 
</tr> 
 
</table> 
 
</div> <!-- container -->