OpenLayers 4.3.2 - Canvas oder WebGL render kann nicht in einer einfachen Demo funktionieren

Question

Ich versuche eine sehr einfache Demo von OpenLayers 4 zu entwickeln. Alles was ich tun möchte, ist eine Karte anzuzeigen. Wenn ich die html-Datei lokal in meinen Browser (Firefox 42) lade, wird die Seite angezeigt, aber es gibt keinen Inhalt in der Karte div.

bekomme ich Fehler in der Browser-Konsole sagen:

Fehler: WebGL: Refused nativen OpenGL-Kontext eine schwarze Liste wegen zu erstellen.

Ich habe explizit versucht, einen 'Canvas' Renderer, aber offensichtlich funktioniert auch nicht (ich erhalte 'Leinwand' ist die Standardeinstellung).

Ich würde mich über Ratschläge freuen, um dies zu umgehen. Mein HTML/JS unten ist, beraubt Unwesentlichen:

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 -->

BTW bitte nicht stören meine HTML oder JS-Stil zu kritisieren. Ich weiß, dass sie hässlich sind!

Answer 1

99,931984 keine gültige Breite ist - versuchen, die Werte

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 -->