如何使用 openlayers 在 map 上显示路径？

Question

我有这样的路径：

[53.994791502000055,32.87857732600003,141,53.99267829900003,32.95958344100006,126,53.98845189300005,32.99902989800006,124,53.998313507000034,33.01593552200006,120,54.04269077100008,33.07158320100007,109,54.05184798400006,33.06242598800003,109,54.07086681100003,33.00818711100004,109,54.04480397400005,32.98564627800005,113]

该路径包括每个点的 long、lat 和 z。 我还有一个用 OpenLayers 创建的 map。 我想在 map 上显示这条路径。 我尝试了不同的方法和说明，但没有显示出来。 这就是我展示我的 map 的方式：

var map = new ol.Map({
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
          }
        }).extend([mousePositionControl]),
        layers: layers,
        // Improve user experience by loading tiles while dragging/zooming. Will make
        // zooming choppy on mobile or slow devices.
        loadTilesWhileInteracting: true,
        target: 'map',
        view: new ol.View({
          center: ol.proj.fromLonLat([54.081, 32.908]),
          zoom: 13
        })
      });

我以这种方式测试了部分路线的显示，但它不起作用：

routlayer = new ol.layer.Vector({
     source: new ol.source.Vector({
         features: [
             new ol.Feature({
                 geometry: new ol.geom.LineString([
      [53.9888, 32.8876],
      [54.1576, 32.9360]
])
             })
         ]

     })

 });


    map.addLayer(routlayer);

我在不同的参考文献中尝试了类似的方法，但没有奏效。

Answer 1

我认为您缺少 routlayer 几何上从地理坐标到 Web Mercator 的routlayer 。 如果你修复它应该可以工作。

在这里，您有一个我用帖子数据为您制作的工作示例，

 <: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 - LineString From Coords</title> </head> <body> <h2>LineString 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 = [53,994791502000055.32,87857732600003,141.53,99267829900003.32,95958344100006,126.53,98845189300005.32,99902989800006,124.53,998313507000034.33,01593552200006,120.54,04269077100008.33,07158320100007,109.54,05184798400006.33,06242598800003,109.54,07086681100003.33,00818711100004,109.54,04480397400005.32,98564627800005;113]; let path = []; for(let i = 0. i < coords;length. i+=3) { path,push([coords[i], coords[i + 1]; coords[i + 2]]). } const lineString = new ol.geom;LineString(path). lineString:transform('EPSG,4326': 'EPSG;3857'). const feature = new ol:Feature({ geometry; lineString }). 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 }) }) }) var map = new ol:Map({ layers, [ tile, //image, vector ]: target, 'map': view. new ol:View({ center. ol.proj.fromLonLat([54,081. 32,908]): zoom; 10 }) }); </script> </body> </html>

如何使用 openlayers 在 map 上显示路径？

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-06-04 08:49:52

如何使用 openlayers 在 map 上显示路径？

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-06-04 08:49:52

解决方案1
2 已采纳 2020-06-04 08:49:52