Нарисуйте линию между двумя координатами в OpenLayers 4

Question

Нарисуйте линию между двумя координатами в OpenLayers 4

1

Я хочу нарисовать линию между двумя координатами в OpenLayers (OL) 4. Я искал документацию в Интернете, но большинство из них только для OL 2 (example1, example2) или 3 (example3).

Я взял пример с сайта OL и добавлю свой собственный код. В этом случае я использую LineString:

<!doctype html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.css" type="text/css">
            <style>
          .map {
            height: 400px;
            width: 100%;
          }
            </style>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.js"/>
            <title>OpenLayers example</title>
        </head>
        <body>
            <h2>My Map</h2>
            <div id="map" class="map"/>
            <script type="text/javascript">
                var map = new ol.Map({
                    target: 'map',
                    layers: [
                      new ol.layer.Tile({
                        source: new ol.source.OSM()
                      })
                    ],
                    view: new ol.View({
                      center: ol.proj.fromLonLat([37.41, 8.82]),
                      zoom: 5
                    })
                });

                //example coordinates
                var lonlat = [33.8, 8.4];
                var location2 = [37.5, 8.0];

                //create the line style
                var linieStyle = [
                            // linestring
                            new ol.style.Style({
                              stroke: new ol.style.Stroke({
                                color: '#d12710',
                                width: 2
                              })
                            })
                          ];

                //create the line       
                var linie = new ol.layer.Vector({
                        source: new ol.source.Vector({
                        features: [new ol.Feature({
                            geometry: new ol.geom.LineString(lonlat, location2),
                            name: 'Line',
                        })]
                    })
                });

                //set the style and add to layer
                linie.setStyle(linieStyle);
                map.addLayer(linie);

            </script>
        </body>
    </html>

Однако линия не отображается на карте. Это мой сценарий JS. Что пропало в моем коде?

User2018 12 июль 2018, в 11:31

Источник

Теги:

javascript

openlayers

1 ответ

Ещё вопросы

Thomas Gratier · Accepted Answer · 2018-07-12T09-06-00.000Z

Вам необходимо преобразовать ваши координаты, используя ol.proj.fromLonLat

var lonlat = ol.proj.fromLonLat([33.8, 8.4]);
var location2 = ol.proj.fromLonLat([37.5, 8.0]);

Вам также необходимо предоставить new ol.geom.LineString массив точек

new ol.geom.LineString([lonlat, location2])

Вы можете увидеть мой полученный пример с исправлениями, основанными на вашей Js Fiddle