OpenLayers: невозможно добавить линейную линию координат на карту - PullRequest
Новая
       25

OpenLayers: невозможно добавить линейную линию координат на карту

1 голос
/ 06 апреля 2019

У меня проблемы с отображением линейной строки на основе существующего списка координат, и я был бы признателен за помощь. Ниже приведен мой код, который показывает карту OpenLayers5, но не перекрывается линией строк.

Я читал кучу разных тем ( OpenLayers 3: простой пример LineString ) и документы по API, но я не могу понять, чего мне не хватает.

map with no linestring overlay

<!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

1 Ответ

2 голосов
/ 06 апреля 2019

Две ошибки.Во-первых, это width и color, а не strokeWidth/Color.Во-вторых, вы перепроектируете центр с lon / lat на WebMercator, но забыли сделать то же самое с координатами линии - так что ваша линия фактически находится где-то в Гвинейском заливе (10/50 метров от точки 0,0).

Вот исправленная версия. 

<!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>
...