Openlayers 4.3.2 - 간단한 데모에서 작동하도록 캔버스 또는 WebGL 렌더링을 얻을 수 없습니다.

Question

OpenLayers 4의 매우 간단한 데모를 개발하려고합니다.지도를 표시하기 만하면됩니다. html 파일을 브라우저 (Firefox 42)에 로컬로로드하면 페이지가 표시되지만 맵 div에 내용이 없습니다.

오류 : WebGL을 : 때문에 블랙리스트의 기본 OpenGL을 컨텍스트를 만들 거부

나는 브라우저 콘솔에서 오류가 말을 얻을.

명시 적으로 '캔버스'렌더러에 대해 물어 보았습니다. 그러나 분명히 그 중 하나가 작동하지 않습니다 (나는 캔버스가 기본값입니다).

이 문제를 해결하는 방법에 대한 조언을드립니다. 비 필수 벗겨 내 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 -->

이 BTW 내 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 -->