javascript - 当我尝试更改 map View 时 OpenLayers 出错-6ren

javascript - 当我尝试更改 map View 时 OpenLayers 出错

转载作者：行者123 更新时间：2023-12-01 00:58:51

28

4

我正在尝试开始使用 OpenLayers 和 Nominatim 进行地理编码，但是当我尝试更改 map 的 View 时(例如，因为用户输入了一个地址，并且我想将 map 置于其中心)，我得到了错误:

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>

因此，我在文本框中输入地址或城市或其他内容，然后单击提交按钮 - map 上搜索位置处会出现一个红点，但 map 不会以该位置为中心；相反，我收到了我之前描述的错误。可能出了什么问题？

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

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

这使它做了一些事情 - 但它的中心位于海洋中央!

最佳答案

view.center 应该是 view.setCenter()

view.setCenter([ol.proj.fromLonLat(msg[0].lon, msg[0].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});

关于javascript - 当我尝试更改 map View 时 OpenLayers 出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56298609/

28

4

0

文章推荐： python - 有没有办法扩大Python中的GUI框？

文章推荐： jQuery/json 从 .NET Web 服务中的 POST 读取参数

文章推荐： jquery - 显示#id - 当悬停另一个#id 时隐藏#id

文章推荐： jQuery 迷你图 : Automatic zero-centering for bar charts

openlayers - openlayers 中的弹出窗口
popup 和 Frame 和 FrameColud 有什么区别？而且，似乎弹出窗口的方向取决于标记相对于 map 的位置。流行音乐可能在标记上方或下方。例如: 上图: 下面: 现在，我想知道如何
openlayers - 哪些书籍可用于 OpenLayers？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
openlayers - 选择特征控制 OpenLayers
我一直在使用 OpenLayers，我做了一个层树(所有层都是矢量图层)，所有这些层都有特征，我想要的是通过选择控件选择这些特征。我制作了选择功能控件，但问题是当我关闭其中一个图层时(我正在从 ma
openlayers - OpenLayers 5 和 OpenLayers 6 的区别
关于即将发布的 OpenLayers 6 的快速问题。有谁知道 OpenLayers 5 和 OpenLayers 6 之间的主要区别是什么。我读了一些 here但出现了其他问题: OpenLayer
openlayers-3 - Openlayers - 不同几何类型的多种样式
所以我使用了一个单个矢量图层，我把我所有的: 积分折线多边形这是我的代码: var source = new ol.source.Vector({ wrapX: false }); var ve
openlayers - 如何按名称删除图层 - openlayers 3
我是用 wkt 添加矢量图层的使用以下代码映射的源: var SelectVector = null; for (var i = 0; i < wktarray.length; i++) {
openlayers - OpenLayers WMS 什么时候物理调用远程服务器？
我正在尝试简化我的应用程序，并想知道 OpenLayers 何时物理调用 WMS 服务器？此外，层可见性是否也在调用中起作用？实例化一个层时会发生吗 var layer = new OpenLaye
openlayers-3 - Openlayers 3偏移正则形状
对于群集功能，我想在OL3中制作以下样式: 一个正方形，在其顶部，在右上角还有另一个较小的正方形。较大的正方形将保留符号，而较小的正方形将保留聚类要素的数量。类似于this 有可能实现这一目标吗？在
openlayers - 在 OpenLayers 中绘制速度引导线
我正在尝试在 OpenLayers map 上绘制一个代表实体的图标，其中包括一条“速度领导者”，这是一条从图标开始并沿实体移动方向向外绘制的小线段。线的长度表示实体的速度。我遇到的问题是我希望线的
openlayers - 使用 openlayer 在标记中单击处理程序
我正在使用 openlayers，当我从服务器查询 pois 列表时，我想为每个添加到 map 中。所以我为它们中的每一个都创建了标记，并且我希望在单击标记时打开一个 FrameCloud。我用这
openlayers - ZoomToExtent OpenLayers 3
OpenLayers 2具有非常有用的map.zoomToExtent(extent)功能。 OpenLayers 3中有类似的东西吗？我可以使用source.getExtent()获得感兴趣的范围，
openlayers - 链接到旧的 openlayers api
ol5最近发布了，但我仍在使用ol4。他们网站上的所有链接都指向最新的文档，但我需要 4.6.5 的文档。有谁知道它在哪里吗？最佳答案 https://openlayers.org/en/v4.6.
openlayers - 使用 OpenLayers 动态添加自定义标记以映射
我想让用户在 map 上添加自定义标记以及每个标记的描述。任何提示、任何教程的链接都会非常有用。最佳答案您可以注册一个函数来在 map 上“点击”事件。当用户点击它时，标记会自动添加。尝试这样的
openlayers - 如何使用 Openlayers map
我对这个 openlayers map 完全感到困惑。即使有很多示例和 wiki，我也找不到如何重用它。我的意思是我想显示我的城市 map ，管理员可以管理，管理员可以添加点和位置，它应该显示在前端。
openlayers - 如何更改 OpenLayers 样式？
我对网络制图非常非常陌生。我有一个由 PostGis 数据库的形状文件制作的 OpenLayers map ，有一个矢量图层，它有默认样式(GeoServer SLD)，但我想在用户单击刷新按钮时更改
openlayers - 如何在本地安装 openLayers 3？
我是 OpenLayers 的新手，我必须开发一个使用它的离线应用程序。我已经下载了 OL 3.7.0 并设置了一个测试 html 文件，该文件通过以下方式加载 OL javascript 文件:
openlayers - 带有圆角的 Openlayer map
我将我的 openlayer map 集成到一个带有圆角的 div 中。我怎样才能让 map 有圆角？我曾尝试将 border-radius 应用于开发人员工具中的许多 div，但 map 拒绝圆角。
openlayers - 如何在 Openlayers 外拖动特征
在我们的应用程序中，我们希望从“CanvasMap”上的标记/功能到外部世界(任何接受该类型拖放操作的 HTML 目标)启动 native (HTML) 拖放操作。想象一下，我们在 CanvasMa
javascript - Openlayers 3 - 创建自定义符号，如 openlayers 2 -> OpenLayers.Renderer.symbol.anySymbol
在 Openlayers v2 中，我可以添加如下符号: OpenLayers.Renderer.symbol.pointToIcon = [100, 70, 20, 50, 42, 70, 20,
openlayers - 在缩放更改时，特征在 openlayers 中消失
我在 map 上有一些功能，在我移动它们之后，使用 var point = new OpenLayers.LonLat(newlon, newlat); point.transform(epsg432

首页

博学

6Ren·AI

商城

javascript - 当我尝试更改 map View 时 OpenLayers 出错