2016-02-19 25 views
2

在RequireJS中使用Openlayers 3和proj4js時遇到問題。在RequireJS中使用Openlayers 3和proj4js

使用標準JavaScript文件和html,我有工作代碼來顯示地圖並使用Openlayers鼠標位置控件在EPSG:27700中顯示座標。

當我使用RequireJS(請參閱下面的代碼)時,由於proj.get返回「undefined」,代碼失敗。 Chrome中的錯誤會提示Require需要拋出錯誤。

我嘗試過使用墊片,但這沒有奏效,我不相信這是正確的做法。任何人都可以告訴我如何讓這個工作?

require.config({ 
    baseUrl: './', 
    paths: { 
     'domReady': '../lib/domReady', 
     'openlayers': '../lib/ol', 
     'proj4': '../lib/proj4' 
    } 
}); 

require([ 
    'domReady', 
    'openlayers', 
    'proj4' 
], function (domReady, openLayers, proj4) { 

    "use strict"; 

    function getLayers() { 
     var baseLayer = new openLayers.layer.Tile({ 
       source: new openLayers.source.OSM() 
      }); 

     return [baseLayer]; 
    }; 

    domReady(function() { 
     proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs'); 

     openLayers.proj.get("EPSG:27700").setExtent([0, 0, 700000, 1300000]); 

     var mousePositionControl = new openLayers.control.MousePosition({ 
      coordinateFormat: openLayers.coordinate.createStringXY(4), 
      projection: 'EPSG:27700' 
     }); 

     var map = new openLayers.Map({ 
      target: 'map', 
      layers: getLayers(), 
      controls: [mousePositionControl], 
      view: new openLayers.View({ 
       projection: 'EPSG:27700', 
       center: [300000, 500000], 
       resolutions: [4500, 3200, 2400, 1600, 800, 400, 200, 100, 50, 25, 10, 5, 2.5, 1, 0.5, 0.25, 0.125, 0.0625], 
       zoom: 3, 
       minResolution: 25, 
       maxResolution: 800 
      }) 
     }); 
    }); 
}); 
+0

看到*實際*堆棧跟蹤會很有用,但問題不在於OpenLayers和您的代碼看到Proj4的不同實例嗎?也就是說,當你修改'proj4'變量時,'openLayers.proj'不受影響。您可能想使用調試器來比較對象圖。 – kryger

回答

1

你必須告訴的OpenLayers如何先找到proj4.js:

openLayers.proj.setProj4(proj4); 

上面的代碼中需要的OpenLayers> = v3.13.0,並假定的設置一樣,在這個問題的代碼片段。