Openlayers 4.3.2 - キャンバスまたはWebGLレンダリングを簡単なデモで動作させることができません

Question

私はOpenLayers 4の非常に簡単なデモを開発しようとしています。 htmlファイルをブラウザ（Firefox 42）にローカルに読み込むと、ページが表示されますが、マップdivにはコンテンツがありません。

エラー：WebGLの：理由はブラックリストのネイティブのOpenGLコンテキストを作成するために拒否

は、私は、ブラウザのコンソールにエラーが言ってもらいます。

私は明示的に 'canvas'レンダラーを求めましたが、明らかにそれも働いていません（私は 'canvas'がデフォルトです）。

私はこれを回避するためのアドバイスをいただきたいと思います。私のHTML/JSは、非必需品を剥奪、以下の通りです：

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

はところで、私のHTMLやJSのスタイルを批判する気にしないでください。私は彼らが醜いことを知っている！

Answer 1

99.931984は、有効な緯度ではありません - 座標値をあなたの鋭い目用

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