javascript - 开放层 3 中的坐标基于什么以及它们如何工作？-6ren

javascript - 开放层 3 中的坐标基于什么以及它们如何工作？

转载作者：行者123 更新时间：2023-12-02 21:35:43

我是打开第 3 层的新手，我发现了 an example of drawing a polygon:

我在示例中看到您创建了一个矢量图层，并在该层中为其提供了一个 geoJSON 作为源，geoJSON 具有如下功能:

{
    'type': 'Feature',
    'geometry': {
      'type': 'Polygon',
      'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
}

现在这可以工作了，我得到了一个漂亮的多边形，我不知道这些坐标是什么？我的意思是 -5e6 是什么？!，如果我有一个像这样的长和纬度:

 [[36.301744, 50.010456], [36.302180, 50.019864], [36.301025, 50.021730], [36.293856, 50.016215], [66.293682, 56.009240], [66.301744, 56.010456]]

如何将其转换为这些坐标？
实际上我做了一些搜索，发现了一些链接:
open layers 3 how to draw a polygon programmatically?
但使用后:

polygon.transform('EPSG:4326', 'EPSG:3857');

要转换我的坐标(我仍然不知道我要转换成什么，因为我不知道-5e6之类的东西意味着什么)，我还是没有得到任何结果
有人可以解释一下这些坐标是基于什么以及它们是如何工作的吗？
谢谢。

更新01:
这是我运行的代码，导致无法读取geon/SimpleGeomerty内未定义的属性长度:

const GeographicalMap = ({ onClick }) => {

    const myCoord = [[36.301744, 50.010456], [36.302180, 50.019864], [36.301025, 50.021730], [36.293856, 50.016215], [36.293682, 50.009240], [36.301744, 50.010456]]
    const newCoord = transform(myCoord, 'EPSG:4326', 'EPSG:3857')
    console.log('newCoord', newCoord)

    const geojsonObject = {
        'type': 'FeatureCollection',
        'crs': {
            'type': 'name',
            'properties': {
                'name': 'EPSG:4326'
            }
        },
        'features': [
            {
                'type': 'Feature',
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': newCoord
                }
            },
        ]
    };


    var source = new VectorSource({
        features: (new GeoJSON()).readFeatures(geojsonObject)
    })

    var layer = new VectorLayer({
        source: source,
    });

    const layers = [layer]

    return (
        <Map
            onClick={onClick}
            layers={layers}
        />
    )
}

最让我困扰的是转换后的控制台日志显示的结果是:

[
  null,
  null,
  [
    36.301025,
    50.02173
  ],
  [
    36.293856,
    50.016215
  ],
  [
    36.293682,
    50.00924
  ],
  [
    36.301744,
    50.010456
  ]
]

更新02:
正如答案 cabesuon 所建议的，我现在使用以下代码:

const myCoord = [[36.301744, 50.010456], [36.302180, 50.019864], [36.301025, 50.021730], [36.293856, 50.016215], [36.293682, 50.009240], [36.301744, 50.010456]]

    const polygon = new Polygon(myCoord);    
    polygon.transform('EPSG:4326', 'EPSG:3857');
    console.log('polygon', polygon)
    const feature = new Feature({
        geometry: polygon
    });

    const source = new VectorSource();
    source.addFeature(feature);

    const layer = new VectorLayer({
        source: source,
    });

但是 map 上没有绘制任何内容，在控制台记录多边形之后，我可以看到一个问题:

extent_: (4) [Infinity, Infinity, -Infinity, -Infinity]
ends_: (6) [0, 0, 0, 0, 0, 0]

我不知道为什么，但我的代码中似乎有一些不正确的地方，导致 extent_ 和 ends_ 不正确

最佳答案

要使 map 应用程序正常工作，其呈现的所有信息都需要位于同一空间引用系统 (SR) 中，通常由 basemap 确定，例如 OSM map 、Bing map 等。网络 map 的事实上的 SR是 Web 墨卡托 EPSG:3857。

现在，您所询问的坐标位于 Web Mercator 中。您看到的值以科学计数法表示。例如 1e6=1000000，换句话说，它的意思是 1x10^6。

如果您的坐标是地理坐标 (EPSG:4326)，您需要将其转换为 map 正在使用的 SR。 polygon.transform('EPSG:4326', 'EPSG:3857') 正在将地理坐标转换为 Web 墨卡托，如果您的 map 使用 Web 墨卡托(如果您有 Web basemap ，则可能会这样做)应该可以。

问题更新

您的代码有几个问题，

您有一个坐标数组而不是几何图形，您需要创建一个几何图形
对几何体应用变换后，现在您正在使用变换坐标而不是数组的方法
您不需要为要素集合创建 geojson，只需创建一个要素并将其添加到源

像这样的东西应该有效，

const coords = [[
  [36.301744, 50.010456], [36.302180, 50.019864], [36.301025, 50.021730],
  [36.293856, 50.016215], [36.293682, 50.009240], [36.301744, 50.010456]
]]; // edited on update 2
const polygon = new Polygon(coords);
polygon.transform('EPSG:4326', 'EPSG:3857');
const feature = new Feature({
  geometry: polygon
});
const source = new VectorSource();
source.addFeature(feature);

更新2:我在你的坐标数组中遗漏了一些东西，问题是要创建一个带有坐标的多边形，你必须将一个环数组作为参数传递，而环是一个坐标数组，解决这个问题工作正常。

这里我给你举了一个例子，

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
			#a { display: none; }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
    <title>OL - Feature From Coords</title>
  </head>
  <body>
    <h2>Feature From Coords</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      // tile layer
      var tile = new ol.layer.Tile({
        source: new ol.source.OSM()
      });
      // vector layer
      const coords = [
        [
          [36.301744, 50.010456],
          [36.302180, 50.019864],
          [36.301025, 50.021730],
          [36.293856, 50.016215],
          [36.293682, 50.009240],
          [36.301744, 50.010456]
        ]
      ];
      const polygon = new ol.geom.Polygon(coords);
      polygon.transform('EPSG:4326', 'EPSG:3857');
      const feature = new ol.Feature({
        geometry: polygon
      });
      const source = new ol.source.Vector();
      source.addFeature(feature);
      var vector = new ol.layer.Vector({
        source,
        style: new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'red',
            width: 3
          }),
          fill: new ol.style.Fill({
            color: 'rgba(255, 0, 0, 0.1)'
          })
        })
      })
      var map = new ol.Map({
        layers: [
          tile,
          //image,
          vector
        ],
        target: 'map',
        view: new ol.View({
          center: ol.proj.fromLonLat([36.301025, 50.021730]),
          zoom: 12
        })
      });
    </script>
  </body>
</html>

关于javascript - 开放层 3 中的坐标基于什么以及它们如何工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60499090/

文章推荐： javascript - 从组件响应 native 函数调用

文章推荐： javascript - jQuery 获取最接近输入字段的值

powershell - Powershell ForEach循环间歇性工作-工作，失败，工作，失败，工作等
我在Windows 10中使用一些简单的Powershell代码遇到了这个奇怪的问题，我认为这可能是我做错了，但我不是Powershell的天才。我有这个: $ix = [System.Net.Dn
javascript - solr 正在为我的本地 iis 工作，而不是为托管 iis 工作
var urlsearch = "http://192.168.10.113:8080/collective-intellegence/StoreClicks?userid=" + userId +
c# - 串行通信不通过 QSerialPort (Qt) 工作，但通过终端 (Termite) 工作
我有一个非常奇怪的问题，过去两天一直让我抓狂。我有一个我试图控制的串行设备(LS 100 光度计)。使用设置了正确参数的终端(白蚁)，我可以发送命令(“MES”)，然后是定界符(CR LF)，然后我
.net - RegFree COM 从 C# 工作，而不是从 VBA 工作
我目前正试图让无需注册的 COM 使用 Excel 作为客户端，使用 .NET dll 作为服务器。目前，我只是试图让概念验证工作，但遇到了麻烦。显然，当我使用 Excel 时，我不能简单地使用与可
java - JAX-RS REST 在 WildFly 工作，但不在 Tomcat 工作
我开发了简单的 REST API - https://github.com/pavelpetrcz/MandaysFigu - 我的问题是在本地主机上，WildFly 16 服务器的应用程序运行正常。
python - 使用 Mongoengine 进行插入只能从 shell 工作，但不能从 Django View 工作
我遇到了奇怪的情况 - 从 Django shell 创建一些 Mongoengine 对象是成功的，但是从 Django View 创建相同的对象看起来成功，但 MongoDB 中没有出现任何数据。
Flask 应用程序上下文 : app. app_context().push() 工作，但无法让 "with app.app_context()" block 工作
我是 flask 的新手，只编写了一个相当简单的网络应用程序——没有数据库，只是一个航类搜索 API 的前端。一切正常，但为了提高我的技能，我正在尝试使用应用程序工厂和蓝图重构我的代码。让它与 pus
javascript - Google Analytics 事件跟踪 JS 在开发控制台中运行/工作，但不能从 ex 文件中运行/工作
我的谷歌分析 JavaScript 事件在开发者控制台中运行得很好。但是当从外部 js 文件包含在页面上时，它们根本不起作用。由于某种原因。例如；下面的内容将在包含在控制台中时运行。但当包含在单
node.js - ZeroMQ PUSH/PULL 通信不能通过 IPC 工作，但它可以通过 TCP 工作
这是一本名为“Node.js 8 the Right Way”的书中的任务。你可以在下面看到它: 这是我的解决方案: 'use strict'; const zmq = require('zeromq
java - 为什么 distinct 通过 flatMap 工作，而不是通过 map 的 "sub-stream"工作？
我正在阅读文本行，并创建其独特单词的列表(在将它们小写之后)。我可以使它与 flatMap 一起工作，但不能使它与 map 的“子”流一起工作。 flatMap 看起来更简洁和“更好”，但为什么 di
powershell - 怎么回声$？工作？
我正在编写一些 PowerShell 脚本来进行一些构建自动化。我发现 here echo $? 根据前面的语句返回真或假。我刚刚发现 echo 是 Write-Output 的别名。写主机 $?
Instagram 个人资料照片没有保存/工作？
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 4年前关闭。 Improve thi
iphone - 无法让presentViewController 工作
我将一个工作 View Controller 类从另一个项目复制到一个新项目中。我无法在新项目中加载 View 。在旧项目中我使用了presentModalViewController。在新版本中，我
JavaScript 函数未加载/工作
我对 javascript 很陌生，所以很难看出我哪里出错了。由于某种原因，我的功能无法正常工作。任何帮助，将不胜感激。我尝试在外部 js 文件、头部/主体中使用它们，但似乎没有任何效果。错误要么出在
Flutter复选框未更改/更新/工作
我正在尝试学习Flutter中的复选框。问题是，当我想在Scaffold(body :)中使用复选框时，它正在工作。但我想在不同的地方使用它，例如ListView中的项目。 return Cente
Spring 侦探行李传播未传播/工作
我们当前使用的是 sleuth 2.2.3.RELEASE，我们看不到在 http header 中传递的 userId 字段没有传播。下面是我们的代码。 BaggageField REQUEST_I
java - JComboBox 工作
我有一个组合框，其中包含一个项目，比如“a”。我想调用该组合框的 Action 监听器，仅在手动选择项目“a”完成时才调用。我也尝试过 ItemStateChanged，但它的工作原理与 Action
java - 我怎样才能让interrupt()工作？
你能看一下照片吗？现在，一步前我执行了 this.interrupt()。您可以看到 this.isInterrupted() 为 false。我仔细观察——“这个”没有改变。它具有相同的 ID (1
Spring 侦探行李传播未传播/工作
我们当前使用的是 sleuth 2.2.3.RELEASE，我们看不到在 http header 中传递的 userId 字段没有传播。下面是我们的代码。 BaggageField REQUEST_I
laravel 工作/通知失败
我正在尝试在我的网站上设置一个联系表单，当有人点击发送时，就会运行一个作业，并在该作业中向所有管理员用户发送通知。不过，我在失败的工作表中不断收到此错误: Illuminate\Database\El

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 开放层 3 中的坐标基于什么以及它们如何工作？