javascript - Draw a line between two coordinates in OpenLayers 4

I want to draw a line between two coordinates in OpenLayers (OL) 4. I have been looking for documentations on The Internet but most of them only for OL 2 (example1 , example2) or 3 (example3).

I took the example from the OL website and add my own code. In this case I am using LineString:

<!doctype html>
<html lang="en">
    <head>
        <link rel="stylesheet" href=".6.4/ol.css" type="text/css">
            <style>
          .map {
            height: 400px;
            width: 100%;
          }
            </style>
            <script src=".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's 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>

However, the line does not appear on the map. This is my JS Fiddle. What's missing on my code?

I want to draw a line between two coordinates in OpenLayers (OL) 4. I have been looking for documentations on The Internet but most of them only for OL 2 (example1 , example2) or 3 (example3).

I took the example from the OL website and add my own code. In this case I am using LineString:

<!doctype html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/openlayers/4.6.4/ol.css" type="text/css">
            <style>
          .map {
            height: 400px;
            width: 100%;
          }
            </style>
            <script src="https://cdnjs.cloudflare./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's 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>

However, the line does not appear on the map. This is my JS Fiddle. What's missing on my code?

Share Improve this question asked Jul 12, 2018 at 9:15 user2018 3562 gold badges8 silver badges24 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

You need to convert your coordinates using ol.proj.fromLonLat

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

You also need to provide new ol.geom.LineString an array of points

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

You can see my derived example with the fixes based on your Js Fiddle

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Draw a line between two coordinates in OpenLayers 4 - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)