Question

我试图开始使用OpenLayers和Nominatim进行地理编码，但是当我尝试更改地图视图时（例如，因为用户输入了一个地址，并且我想在地图上居中）错误：

ol-debug.js:6171 Uncaught TypeError: Cannot read property 'getCode' of null
at Object.ol.proj.getTransformFromProjections (ol-debug.js:6171)
at Object.ol.proj.getTransform (ol-debug.js:6155)
at Object.ol.proj.transform (ol-debug.js:6251)
at Object.ol.proj.fromLonLat (ol-debug.js:6063)
at Object.<anonymous> ((index):74)
at c (jquery-3.4.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.4.1.min.js:2)
at l (jquery-3.4.1.min.js:2)
at XMLHttpRequest.<anonymous> (jquery-3.4.1.min.js:2)

这是我的代码（主要是我在网上找到的示例代码的一部分）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>OpenStreetMap &amp; OpenLayers - Marker Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.5/build/ol-debug.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>

    <script>
        /* OSM & OL example code provided by https://mediarealm.com.au/ */
        var map;
        var mapLat = -33.829357;
        var mapLng = 150.961761;
        var mapDefaultZoom = 10;
        var view = new ol.View({
            center: ol.proj.fromLonLat([mapLng, mapLat]),
            zoom: mapDefaultZoom
        })
        function initialize_map() {
            map = new ol.Map({
                target: "map",
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM({
                            url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
                        })
                    })
                ],
                view: view
            });
        }
        function add_map_point(lat, lng) {
            var vectorLayer = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [new ol.Feature({
                        geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
                    })]
                }),
                style: new ol.style.Style({
                    image: new ol.style.Icon({
                        anchor: [0.5, 0.5],
                        anchorXUnits: "fraction",
                        anchorYUnits: "fraction",
                        src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
                    })
                })
            });
            map.addLayer(vectorLayer);
        }

        function geocode() {
            var address = $("#address").val();

            console.log(address);

            var data = {
                "format": "json",
                "addressdetails": 1,
                "q": address,
                "limit": 1
            };
            $.ajax({
                method: "GET",
                url: "https://nominatim.openstreetmap.org",
                data: data
            })
                .done(function (msg) {
                    console.log(msg);
                    add_map_point(msg[0].lat, msg[0].lon);
                    view.center = ol.proj.fromLonLat(msg[0].lon, msg[0].lat);
                    });
        }
    </script>
</head>
<body onload="initialize_map();">
    <input type="text" id="address" />
    <button type="submit" id="submit" onclick="geocode();">Submit</button>
    <div id="map" style="width: 100vw; height: 100vh;"></div>
</body>
</html>

因此，我在文本框中输入地址或城市或其他内容，然后单击“提交”按钮-在地图上搜索的位置出现一个红点，但地图并未将自身定位在该位置。相反，我得到了我先前描述的错误。可能出什么问题了？

编辑：将view.center行替换为：

view.animate({
    center: ol.proj.fromLonLat([msg[0].lon, msg[0].lat]),
    duration: 2000});

这使得它可以完成某事-但它居中于大海之中！

Answer 1

view.center应该是view.setCenter()

view.setCenter([ol.proj.fromLonLat(msg[0].lon, msg[0].lat]);

如果lon / lat值是字符串，则需要将其转换为float

view.setCenter([ol.proj.fromLonLat(parseFloat(msg[0].lon), parseFloat(msg[0].lat)]);

您也可以尝试

view.animate({
    center: ol.proj.fromLonLat([parseFloat(msg[0].lon), parseFloat(msg[0].lat)]),
    duration: 2000});

Answer 2

按照OpenLayers文档，view.center应该使用经度和纬度来调用view.setCenter()（需要使用parseFloat来确保它们是数字而不是字符串）。我在您的ajax centerMap()函数中添加了done函数，该函数将使用View类功能animate在地图上移动，并使用{{ 1}}您已设置：

mapDefaultZoom

function centerMap(lat, lng) {
  view.animate({
    center: ol.proj.fromLonLat([parseFloat(lng), parseFloat(lat)]),
    duration: 1000,
    zoom: mapDefaultZoom
  });
  console.log("Long: " + lng + " Lat: " + lat);
}

var map;
var mapLat = -33.829357;
var mapLng = 150.961761;
var mapDefaultZoom = 10;
var view = new ol.View({
  center: ol.proj.fromLonLat([mapLng, mapLat]),
  zoom: mapDefaultZoom
});

function initialize_map() {
  map = new ol.Map({
    target: "map",
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM({
          url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
        })
      })
    ],
    view: view
  });
}

function add_map_point(lat, lng) {
  var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
      })]
    }),
    style: new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.5, 0.5],
        anchorXUnits: "fraction",
        anchorYUnits: "fraction",
        src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
      })
    })
  });
  map.addLayer(vectorLayer);
}

function geocode() {
  var address = $("#address").val();

  console.log(address);

  var data = {
    "format": "json",
    "addressdetails": 1,
    "q": address,
    "limit": 1
  };
  $.ajax({
      method: "GET",
      url: "https://nominatim.openstreetmap.org",
      data: data
    })
    .done(function(msg) {
      console.log(msg);
      add_map_point(msg[0].lat, msg[0].lon);
      //view.center = ol.proj.fromLonLat(msg[0].lon, msg[0].lat);
      centerMap(msg[0].lat, msg[0].lon);
    });
}

function centerMap(lat, lng) {
  view.animate({
    center: ol.proj.fromLonLat([parseFloat(lng), parseFloat(lat)]),
    duration: 1000,
    zoom: mapDefaultZoom
  });
  console.log("Long: " + lng + " Lat: " + lat);
}

当我尝试更改地图视图时，OpenLayers中出现错误

2 个答案: