0

我有一个非常基本的地图设置，带有 openlayers，只有 3 个控件，内置在 MVC 项目中。但是，出于某些原因，导航控件和 panzoombar 不显示（尽管 mouseposition 之一显示）。我在地图加载时看到它们片刻，但随后它们消失了。下面是我用来实现这一点的代码。谁能告诉我我做错了什么？

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

2 回答 2

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>

它工作正常。

于 2012-09-03T15:35:12.280 回答
0

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

例子：

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

捆绑脚本后，脚本路径变为：

/scripts/master-bundle?v=Jg4I5oThMOtPHMDHusv30zPkDMVHcvHtjoLyWPwIC1A1

并且“style.css”无法加载，导致图像不显示。

解决方案可以在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)

如果要捆绑脚本文件，则需要显式引用 'style.css'，如下所示：

<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"
           })
于 2014-05-15T11:50:44.473 回答