将 Openlayers 3 和 proj4js 与 RequireJS 结合使用

Question

我在将 Openlayers 3 和 proj4js 与 RequireJS 结合使用时遇到问题。

使用标准 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
            })
        });
    });
});

Answer 1

你必须先告诉 OpenLayers 如何找到 proj4.js:

openLayers.proj.setProj4(proj4);

上面的代码片段需要 OpenLayers >= v3.13.0，并假设设置与问题中的代码片段类似。

将 Openlayers 3 和 proj4js 与 RequireJS 结合使用

Using Openlayers 3 and proj4js with RequireJS

javascript

requirejs

proj4js

openlayers-3