Question

我有一个非常基本的openlayers地图设置，只有3个控件，内置在MVC项目中。尽管如此，导航控制和panzoombar没有显示（虽然鼠标定位）。当地图加载时我立刻看到它们，但随后它们消失了。下面是我用来实现这一目标的代码。谁能告诉我我做错了什么？

        function initNormMap() {
        var map;
        OpenLayers.DOTS_PER_INCH = 72;
        map = new OpenLayers.Map('divmap', {
            controls: [
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.PanZoomBar(),
                        new OpenLayers.Control.MousePosition()
            ], units: 'm',
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326")
        });
        //http://trac.osgeo.org/openlayers/wiki/AvailableWMSServices
        var ol_wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
                    "http://labs.metacarta.com/wms/vmap0",
                      { layers: 'basic' });

        var osm_wms = new OpenLayers.Layer.OSM();
        map.addLayers([osm_wms]);
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
        var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
        var position = new OpenLayers.LonLat(-98, 39).transform(fromProjection, toProjection);
        var zoom = 4;
        map.setCenter(position, zoom);
    }

Answer 1

问题最终与MVC4捆绑在一起，这似乎与openlayers完全没有关系。我在BundleConfig.cs文件中：

var openBun = new ScriptBundle("~/bundles/openlayerjs").Include("~/OpenLayers-2.10/OpenLayers.js");
        openBun.CdnPath = @"http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js";
        bundles.Add(openBun);

在我的实际.cshtml页面中：

@Scripts.Render("~/bundles/openlayerjs")

我甚至在没有CDNPath的情况下尝试过它，每次都会遇到同样的问题。改为直接

<script type="text/javascript" src="@Url.Content("~/OpenLayers-2.10/OpenLayers.js")"></script>

它工作正常。

Answer 2

捆绑失败的原因是除非明确指定，OpenLayers将尝试加载＆＃39; style.css＆＃39;相对于脚本文件。

示例：

Script: /scripts/OpenLayers-2.13.1/OpenLayers.js
Style:  /scripts/OpenLayers-2.13.1/theme/default/style.css

捆绑脚本时，脚本路径将变为：

/scripts/master-bundle?v=Jg4I5oThMOtPHMDHusv30zPkDMVHcvHtjoLyWPwIC1A1

和＆＃39; style.css＆＃39;无法加载，导致图像无法显示。

解决方案可在OpenLayers.js的中找到

* Please remember that when your OpenLayers script is not named * "OpenLayers.js" you will have to make sure that the default theme is * loaded into the page by including an appropriate <link>-tag, * e.g.: * * (code) * <link rel="stylesheet" href="/path/to/default/style.css" type="text/css"> * (end code)

如果您要捆绑脚本文件，则需要明确引用＆＃39; style.css＆＃39; ，如下所示：

<link rel="stylesheet" href="/scripts/OpenLayers-2.13.1/theme/default/style.css" type="text/css" />

<强>更新
您还需要设置OpenLayers.ImgPath，因此这是一个涵盖所有内容的新方法：

的OpenLayers-fix.js

var basePath = '/Scripts/OpenLayers-2.13.1/'; var cssPath = basePath + 'theme/default/style.css'; var imgpath = basePath + 'img/'; // load stylesheet $('<link>') .appendTo('head') .attr({ type: 'text/css', rel: 'stylesheet' }) .attr('href', cssPath); // set image path OpenLayers.ImgPath = imgpath;

捆绑配置

bundles.Add(new ScriptBundle("~/scripts/openlayers") .Include(new[] { "~/Scripts/OpenLayers-2.13.1/OpenLayers.js", "~/Scripts/OpenLayers-2.13.1/lang/nl.js", "~/Scripts/openlayers-fix.js" })

Openlayers导航控件不可见

2 个答案: