javascript - 开放层 : Can't add a linestring of coordinates to a map-6ren

javascript - 开放层 : Can't add a linestring of coordinates to a map

转载作者：行者123 更新时间：2023-12-02 23:53:11

25

4

我在显示基于现有坐标列表的线串时遇到问题，希望得到一些帮助。下面是我的代码，它显示了 OpenLayers5 map ，但没有覆盖线串。

我读过很多不同的主题( OpenLayers 3: simple LineString example ) 和 API 文档，但我无法弄清楚我缺少什么。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">

  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>

<body>
  <div id="map" class="map"></div>

  <script type="text/javascript">   
    var view = new ol.View({
      center: ol.proj.fromLonLat([10,50]),
      zoom: 14
    })

    //Dummy coords
    var coordinates = [
      [10, 50],
      [11, 51],
      [12, 55]
    ];

    var layerLines = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.LineString(coordinates),
                name: 'Line'
            })]
        }),
        style : new ol.style.Style({
          stroke : new ol.style.Stroke({ 
            strokeColor: '#ff0000',
            strokeWidth: 5                      
          })
        })
    });

    var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: view
    });

    map.addLayer(layerLines);

    </script>

</body>
</html>

JSFiddle link

最佳答案

两个错误。首先，它是宽度和颜色，而不是笔划宽度/颜色。其次，您将中心从经/纬度重新投影到 WebMercator，但忘记对线坐标执行相同的操作 - 这样您的线实际上位于几内亚湾的某个位置(距离 0,0 点 10/50 米)。

这是更正后的版本。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"
          type="text/css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>

<body>
<div id="map" class="map"></div>

<script>
    var view = new ol.View({
        center: ol.proj.fromLonLat([10, 50]),
        zoom: 14
    })

    //Dummy coords
    var coordinates = [
        ol.proj.fromLonLat([10, 50]),
        ol.proj.fromLonLat([11, 51]),
        ol.proj.fromLonLat([12, 55])
    ];

    var layerLines = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.LineString(coordinates),
                name: 'Line'
            })]
        }),
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#ff0000',
                width: 3
            })
        })
    });

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: view
    });

    map.addLayer(layerLines);
</script>

</body>
</html>

关于javascript - 开放层 : Can't add a linestring of coordinates to a map，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55550581/

25

4

0

文章推荐： javascript - 从异步表达式中获取返回值

文章推荐： javascript - 如何从 JS 代码中排除某些 HTML 类

文章推荐： JavaScript 更改全局变量

can-bus - 单节点 CAN 网络(CAN 协议(protocol))
我是 CAN 协议(protocol)的新手，正在阅读 Robert Bosch 的 CAN 规范 ver2.0 B 部分。我无法理解第 63 页上的以下几行 ”注意:启动/唤醒:如果在启动期间只有一
c - 在 C 中读取 CAN 总线显示 29 位 CAN ID 的 CAN ID 不正确
我用 C 写了一些代码来读取 CAN 总线数据。当我读取 11 位 CAN ID 时一切正常。一旦我尝试读取 29 位 ID，它就会错误地显示 ID。示例: 接收29位ID的消息: 0x01F0A0
can-bus - 虚拟 CAN 总线模拟器
如果这看起来与另一个问题相似或者看起来已经得到回答，我提前道歉。我觉得它非常详细，足以证明自己的问题。我正在尝试寻找一个虚拟的 CAN 总线模拟器(或一些可以轻松制作模拟器的方法)，它只会生成 CA
生成文件 : can 'canned recipes' have parameters?
我的问题涉及 GNU 的品牌。如果您有一系列命令可用作多个目标的配方，则 canned recipe派上用场了。我可能看起来像这样: define run-foo # Here comes a #
can-bus - CAN 标识符和 COB-ID
您好，我是一名学习canopen的学生。Canopen中的COB-ID和CAN标识符有什么关系？我在CIA主页上看到COB-ID不是CAN ID，但我不明白。例如，如果 PDO 通过 CAN 总线传
embedded - 其他节点如何在 CAN 总线上确认传输的 CAN 消息？
我知道一个显性确认位是由另一个节点传输的消息的接收器发送的。我无法理解的是，接收方是在接收到整个消息后发送单个显性位，还是接收者发送相同的消息，其中 ACK 位字段为显性？或者是接收器在发送器传输
linux - RAW CAN 套接字和广播管理器 CAN 套接字之间有什么区别以及如何使用它们？
我是 CAN 协议(protocol)的新手，我正在尝试通过 Linux 的 SocketCAN 使用它。然而，我对可用的 2 种不同的 CAN 套接字(RAW 和广播管理器 (BCM))感到困惑。
embedded - 是否有开源工具可用于模拟具有可编程 CAN 节点的 CAN 总线？
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
can-bus - 使用 ELM327 接收 CAN 报文时的流量控制报文
我正在尝试制作一个在 Windows 下运行并与 ELM327 设备通信的软件。我创建了第一个版本，然后我进入了我的 SMART ForTwo (SMART 451) 车辆，我设法连接了仪表盘(发送
can-bus - 如果在汽车行驶时 CAN Controller 中发生总线关闭错误，会发生什么情况？
我知道在 CAN Controller 中，如果错误计数达到某个阈值(比如 255)，就会发生总线关闭，这意味着特定的 CAN 节点将从 CAN 网络中关闭。所以根本不会有任何交流。但是，如果上述情况
can-bus - 如何使用 ELM327 发送自定义 CAN 消息？
我正在使用 ELM327，我希望能够设置要发送的 CAN 消息的 header 和数据部分。我看到有一个代码用于设置消息的标题 SH xxyyzz 但是我很难找出如何设置数据部分并控制何时发送消息。
PHP : Can retrieve data from db but can not insert
我想做的是: 将数据插入具有两列的表中，并在同一 PHP 页面中显示更新的值。我能够获取数据并显示它，但无法插入任何数据。请指导我。文件名为 mypage.php 到目前为止我的代码:
安卓 11 : Save a file that can other apps can access
(这个问题是关于 Android 11 的) 我想将崩溃日志打印到其他应用程序可以读取的文件中(具体来说，我希望能够导航到该文件并使用"file"应用程序查看数据)。我看过很多关于这个问题的答案，但
swift - "Can' t 展开可选。无 "and I can' t 找出原因
这会产生“ fatal error :无法解开Optional.None”，我似乎不明白为什么 var motionManager = CMMotionManager() motionManager.
Java - can-do 接口(interface)的命名约定，而不是 can-be-done-to
在 Java 中，我经常遇到带有后缀 -able 的接口(interface)，例如可序列化、可迭代等。这表明实现这些接口(interface)的对象具有可以对其执行某些操作的特性，例如该对象可以被序
javascript - can.Construct 和 can.Construct.extend 之间的区别
我正在阅读 CanJS API 文档并遇到 can.Construct.extend http://canjs.com/docs/can.Construct.extend.html .我知道 can.
c - 当 CAN 总线上有帧时，CAN 上 fifo 的接收回调挂起不会触发
我正在使用 C 语言在 STM32F1xx 上进行开发，直到现在我都在尝试使用“CANopenNode-master”实现 CANopen 堆栈，并且我正在使用 2 个中断。第一个是用于处理 SYN
linux - CAN FD 支持 SocketCAN 上的虚拟 CAN (vcan)
我一直在使用 SocketCAN，尤其是 Virtual CAN vcan。但是，到目前为止，我从未使用过 CAN FD(灵活数据速率)。好吧，我今天早上用 can-utils 试了一下: cans
beagleboneblack - 写: no buffer space available socket-can/linux-can
我正在运行一个带有两个 CAN channel 的程序(使用 TowerTech CAN Cape TT3201)。两个 channel 是 can0 (500k) 和 can1 (125k)。 c
c - C 中的格式说明符 : can %s can store integer values?
存储由序列字符组成的字符串的 %s 格式说明符可以存储整数序列吗？如果是的话..你能解释一下吗？最佳答案无论如何，数字都是用字符表示的，所以是的，您可以使用 "%s" 说明符读取数字并将其存储在

首页

博学

6Ren·AI

商城

javascript - 开放层 : Can't add a linestring of coordinates to a map