Question

我正在尝试开发一个OpenLayers 4的超简单演示。我想要做的就是显示一张地图。当我将html文件本地加载到我的浏览器（Firefox 42）时，页面显示，但地图div中没有内容。

我在浏览器控制台中收到错误消息：

错误：WebGL：由于列入黑名单而拒绝创建原生OpenGL上下文。

我试过明确要求“画布”渲染器，但显然这也不起作用（我收集'canvas'是默认值）。

我很感激有关解决这个问题的建议。我的HTML / JS在下面，删除了非必需品：

configFile

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

顺便说一句，请不要批评我的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 -->

Openlayers 4.3.2 - 无法使canvas或WebGL渲染在简单的演示中工作

1 个答案: