0

私は、MVCプロジェクトで構築された、オープンレイヤーと3つのコントロールを備えたマップのかなり基本的なセットアップを持っています。ただし、理由から、ナビゲーションコントロールとパンズームは表示されません（ただし、マウスの位置は表示されます）。マップがロードされている間、私はそれらを一瞬見ますが、その後消えます。以下は、これを実現するために使用するコードです。誰かが私が間違っていることを教えてもらえますか？

        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

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 に答える