0

親愛なるopenlayersの専門家へ:私はopenlayersクックブックの最初の例から始めて(不均一;もっと良いものはありますか?)、最大ズームをsetCenter呼び出しに変更し、それを試しました。ズームは機能しますが、中央は機能しません。それはおそらく本当に単純な問題ですが、初心者には当惑します。また、rcp1_map がどこにあるのかもわかりません。これはおそらく世界地図です。

<!DOCTYPE html>
<html>
    <head>
    <title>Map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript"
              src="http://openlayers.org/api/OpenLayers.js"></script>
    <style> html, body { width: 80%; height: 80%; margin: 1em; padding: 1em; } </style>

    <script type="text/javascript">
        function init() {
            var map = new OpenLayers.Map("rcp1_map");
            var osm = new OpenLayers.Layer.OSM();
            map.addLayer(osm);
            map.setCenter(new OpenLayers.LonLat(34.05,118.25), 5);
        }
    </script>
    </head>

<body onload="init()">
    <h1>Hello, Los Angeles</h1>
    <div id="rcp1_map" style="width: 100%; height: 100%;"></div>
</body>
</html>

そして、rcp1_map の代わりに、完全な世界地図をどこかに街路レベルまでダウンロードしてインストールする必要がありますか?

初心者のアドバイスをいただければ幸いです。

/iaw

4

1 に答える 1

0

まず、onload="init()"as を呼び出す前にマップを定義すると、次のようになります。

var map;
function init() {
    map = new OpenLayers.Map("rcp1_map");
    var osm = new OpenLayers.Layer.OSM();
    map.addLayer(osm);
    map.setCenter(new OpenLayers.LonLat(34.05,118.25), 5);
}

その後、setCenter が機能します。問題は、現在 Google 座標に座標を入力していることです。http://docs.openlayers.org/library/spherical_mercator.htmlを参照してください。

Google メルカトルでのロサンゼルスの座標は、-13180189,4018753 になります。http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/を見て、Google メルカトルでの座標を確認してください。

に関してはrcp1_map、これはマップがページの本文内に入る div の ID です。

最終的なコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
          src="http://openlayers.org/api/OpenLayers.js"></script>
<style> html, body { width: 80%; height: 80%; margin: 1em; padding: 1em; } </style>

<script type="text/javascript">
    var map;
    function init() {
        map = new OpenLayers.Map("rcp1_map");
        var osm = new OpenLayers.Layer.OSM();
        map.addLayer(osm);
        map.setCenter(new OpenLayers.LonLat(-13180189,4018753), 5);
    }
</script>
</head>

<body onload="init()">
<h1>Hello, Los Angeles</h1>
<div id="rcp1_map" style="width: 100%; height: 100%;"></div>
</body>
</html>

これが役立つことを願っています。

于 2013-10-29T17:54:02.283 に答える